DEV Community: Kiran Mali

AppAuth JS integration in React

Kiran Mali — Mon, 10 Aug 2020 12:28:03 +0000

❤️ What is OpenID Connect and why Authorization Code flow for React(SPA) Application?
👉 Check my blog here for answer

🎯 The AppAuth JS is the best library to integrate OpenID Connect Authorization Code PKCE Flow at your React or any single page application technology.

🔥 Here is React JS code with AppAuth JS integration.

kdhttps / appauth-react

Appauth JS integration with React 🎯

App Auth React

App-Auth JS integration with the React App. This project was bootstrapped with Create React App.

Prerequisites

Node JS >= 10.x.x
Auth0 client - Currently for I am using auth0.com as a OP Server. Demo should work with every OP Provider.

Configuration

Use environment.js to set OP Client configuration.

Start

Install Dependencies

npm install

Start Application

npm start

Runs the app in the development mode.
Open http://localhost:4200 to view it in the browser.

View on GitHub

📚 Let's Go Step by Step

Before start, You need to create an OP Client using your OP Admin Panel. Setup client, client id, client secret, redirect login URL, response_type = code, grant_type = authorization_code and refresh_token(as per your need).

https://server.com is just for example. You need to use your OP server URL.

There are 3 main steps

Authorization Request to OP Server
Get a code from URL and get access_token
Get user info using access_token

⭐ Authorization Request to OP Server

The first task is to make the authorization requests to the OpenID Connect server.

Below all code in one file. Please check my appauth-react repo for whole code.

1. First step is to initialize the RedirectRequestHandler. This object is responsible to handle the redirect task. It needs 4 Parameters.

A. Define Storage
B. URL Parameter Parser to get query params
C. Current location or URL
D. Crypto Method - to generate code_verifier and code_challenge



import {
    RedirectRequestHandler,
    LocalStorageBackend, DefaultCrypto
} from '@openid/appauth';
import { NoHashQueryStringUtils } from './noHashQueryStringUtils';

const authorizationHandler = 
    new RedirectRequestHandler(
       new LocalStorageBackend(), 
       new NoHashQueryStringUtils(), 
       window.location, 
       new DefaultCrypto()
);

2. Second step is to configure query param parser

It is for URL parsing. Default it assume that you have # in URL. If you worked on OLD Angular.js then it uses # for client-side routing.

If you want to change this method then you can easily overwrite the method like below code:



import {BasicQueryStringUtils} from '@openid/appauth';

export class NoHashQueryStringUtils extends BasicQueryStringUtils {
    parse(input, useHash) {
        return super.parse(input, false /* never use hash */);
    }
}

3. Third Step is AppAuth needs your OP Server configuration information that is provided by endpoint https://server.com/.well-known/openid-configuration.

Below AppAuthJS code help you hit, get info, and stored info in local storage. This information is internally used by AppAuthJS.

You just need to pass two parameters.

A. Your OP Server URL: for example: https://server.com
B. FetchRequester: It is Javascript Fetch API to make an HTTP Request to OP configuration endpoint. If you miss this parameter, It will use JQuery and we don't want to use JQuery in React Application.



import {
    AuthorizationServiceConfiguration,
    FetchRequestor,
} from '@openid/appauth';

AuthorizationServiceConfiguration.fetchFromIssuer([your_op_seerver_url], new FetchRequestor())
            .then((response) => {
                console.log(response)
                // You need to add auth request code here
            })
            .catch(error => {
                setError(error);
            });

4. Make an auth request. Below is a combined code with configuration info step.



 AuthorizationServiceConfiguration.fetchFromIssuer(environment.OPServer, new FetchRequestor())
            .then((response) => {
                const authRequest = new AuthorizationRequest({
                    client_id: 'your_client_id',
                    redirect_uri: 'your_redirect_login_url',
                    scope: 'openid email profile',
                    response_type: AuthorizationRequest.RESPONSE_TYPE_CODE,
                    // extras: environment.extra
                });

               // Please check next point 5 for this.
authorizationHandler.performAuthorizationRequest(response, authRequest);

            })
            .catch(error => {
                setError(error);
            });

Pass extra parameters using extra property.

5. Redirect to OP for Auth

It needs two parameters first configuration information and second is auth Request.

Use the below code for this. Once this code executes, it will redirect you to OP Server.



authorizationHandler.performAuthorizationRequest(response, authRequest);

⭐ OP Server will authenticate the user and redirect back to your side with code in URL. Let's assume you configure redirect login URL is `https://client.com/callback`. Please check my appauth-react repo for Flow GIF and code. You will get an idea.

⭐ Get a `code` from URL and get `access_token`

Let's assume URL in the browser is like now https://client.com/callback?code=[code_send_by_op_server]

we are now on /callback react-router. so you need to handle the next operations on this route.

Note: You can combine these steps into one file. Currently, for an easy explanation, I am doing it in different files.

1. The first step you need to configure the AuthorizationNotifier which will trigger when you want to process code(the code from URL).



import {
    AuthorizationServiceConfiguration,
    RedirectRequestHandler,
    AuthorizationNotifier,
    FetchRequestor, LocalStorageBackend, DefaultCrypto
} from '@openid/appauth';

import {NoHashQueryStringUtils} from './noHashQueryStringUtils';

const authorizationHandler = new RedirectRequestHandler(new LocalStorageBackend(), new NoHashQueryStringUtils(), window.location, new DefaultCrypto());

const notifier = new AuthorizationNotifier();
        authorizationHandler.setAuthorizationNotifier(notifier);

notifier.setAuthorizationListener((request, response, error) => {
    // response object returns code which is in URL i.e. response.code
    // request object returns code_verifier i.e request.internal.code_verifier
    // you will need to add here token request process
}

2. Above notifier only trigger when you want it using below code:



authorizationHandler.completeAuthorizationRequestIfPossible()

Once this code executes, it will trigger the notifier and in the response object, you will get code from URL.

3. Request for access_token

The below code is inside the notifier.

A. First, you need to create a token request object
B. Again get configuration information
C. Hit `/token` endpoint and get token




const tokenHandler = new BaseTokenRequestHandler(new FetchRequestor());

notifier.setAuthorizationListener((request, response, error) => {
            console.log('Authorization request complete ', request, response, error);
            if (response) {
                console.log(`Authorization Code  ${response.code}`);

                let extras = null;
                if (request && request.internal) {
                    extras = {};
                    extras.code_verifier = request.internal.code_verifier;
                }

                // A. First, you need to create a token request object
                const tokenRequest = new TokenRequest({
                    client_id: 'your_client_id',
                    redirect_uri: 'your_redirect_login_url',
                    grant_type: GRANT_TYPE_AUTHORIZATION_CODE,
                    code: response.code,
                    extras
                });

                // B. Again get configuration information
AuthorizationServiceConfiguration.fetchFromIssuer(environment.OPServer, new FetchRequestor())
                    .then((oResponse) => {
                        const configuration = oResponse;
                        // C. Hit `/token` endpoint and get token
                        return tokenHandler.performTokenRequest(configuration, tokenRequest);
                    })
                    .then((oResponse) => {
                        localStorage.setItem('access_token', oResponse.accessToken);
                        // do operation now as per your need
                        props.history.push('/profile');
                    })
                    .catch(oError => {
                        setError(oError);
                    });
            }
        });

Now, you have access_token, you can store it in localStorage and use it in the whole application.

⭐ Get user info using access_token

You don't need AppAuthJS for this task. You just need to hit the /userinfo endpoint of your OP Server and it will return you the user information.

https://server.com is just for example. You need to use your OP server URL.

let's assume we are now on /profile page.




const fetchUserInfo = async (token) => {
    const res = await fetch(`https://server.com/userinfo`, {
        headers: {
            authorization: `Bearer ${token}`
        }
    });
    return res.json();
};

export const Profile = () => {
    const [userInfo, setUserInfo] = useState(null);

    useEffect(() => {
        const fetchToken = localStorage.getItem('access_token');
        fetchUserInfo(fetchToken)
            .then((info) => {
                console.log(info);
                setUserInfo(info);
            })
        return () => {
        }
    }, []);

  return (
  .....
  );
}

Done.

We just integrated AppAuth JS into React Application.

Please check my appauth-react repo for whole integration.

If you are on angular then please check my appauth-angular repo.

You can integrate AppAuthJS in any client-side technology using the above steps.

Hope this will help !!!

#HappySharing #HappyHelping

The Best Security for Single Page Applications(SPA) - OpenID Connect OAuth 2.0 Authorization Code PKCE Flow

Kiran Mali — Fri, 07 Aug 2020 12:27:23 +0000

The user identity and data security is a crucial part of your application. Your application should need to be 100% sure that the one who is using the application is the correct user. The only username/password security to identify users and for application security is a bad idea 👎 .

What is OpenID Connect OAuth 2.0?

🎯 OpenID Connect OAuth 2.0 is the best security framework available nowadays.

You must have seen in so many applications that log in with Twitter, Gmail, Facebook. So Once we click on a button it redirects us to specific social media(OP - OpenID Connect Server). We login to social media, redirect back to the current application and the current application allows us to log in. So How can social media platform allows the other application to authenticate and authorized user so This is OpenID Connect OAuth 2.0 security.

More Details

Instead of building your own just username/password security, you should have to integrate implement or integrate OpenID Connect OAuth 2.0 security.

There are many security flows available in OpenID Connect OAuth 2.0. As per your Application requirements and flow, you can choose the flow.

There are three flow for Single Page Application(SPA).

Implicit flow
Authorization Code Flow (without PKCE) - This is not really for SPA Applications
Authorization Code PKCE Flow

❌ Why not implicit flow?

Because it exposes access_token into the browser URL and you will not have refresh_token facility because OP client is not able to call /token endpoint which requires client authentication.

Below is the implicit flow diagram which helps you to understand the whole flow.

Note: server.com and client.com are just for example. You need to use endpoints as per your OpenID Providers.

❌ Why not Authorization Code Flow (without PKCE) for SPA?

Stop.

Don't use it. Without PKCE that means You need to store the client secret on your browser to request /token endpoint and get an access token. Store client secret at the browser is a big security risk.

This flow is generally used at the server-side. Where we can safely store client id and client secret. In this case, the /token endpoint is protected by Token Endpoint authentication methods. ✔️ You don't need PKCE flow if you are managing authentication flow using the server.

✔️ Why to use Authorization Code PKCE flow.?

❤️ If you have a SPA(Single Page Application), the best security flow for this is the Authorization Code with PKCE flow. Because It does not expose access token to the browser in URL and you don't need client secret at all.

PKCE stands for Proof Key for Code Exchange.

In this case, the /token endpoint is not protected by Token Endpoint authentication methods. Because of PCKE, OP Server use code_challenge and code_verifier to verify request. You also need to check what should be the token endpoint auth method for PKCE flow. This is vary as per oidc service provider.

✔️ Authorization Code PKCE flow and implementation

Note: server.com and client.com are just for example. You need to use endpoints as per your OpenID Connect Providers.

1.First, you need to code_verifier and code_challenge. Below is the code of Node.js to generate code_challenge. code_verifier is just a random string.

var code_verifier="s4vqXQA0ePi98eS9Px4jcghBi7UQHRaQl6jMRwLkBj9Eh8g1yxnesereK4jUHdAT0HkLEWBPLZ8z35HX1Ditxf"

const crypto = require('crypto')
const base64url = require('base64url')

var hash = crypto.createHash('sha256').update(code_verifier).digest();
var code_challenge = base64url.encode(hash)
console.log(code_challenge)

This is a simple Node.js code. For SPA applications, there is the best library available that is AppAuth JS. I've a integrate it with Angular and React Please check links

kdhttps / appauth-angular

Appauth JS integration with Angular 🚀 🛡️

App Auth Angular

App-Auth JS integration with the Angular App. This project was generated with Angular CLI version 8.3.20.

Prerequisites

Node JS >= 10.x.x
@angular/cli >= 8.3.21
Auth0 client - Currently for I am using auth0.com as a OP Server. Demo should work with every OP Provider.

Configuration

Use environment.ts to set OP Client configuration.

Start

Install Dependencies

npm install

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

View on GitHub

kdhttps / appauth-react

Appauth JS integration with React 🎯

App Auth React

App-Auth JS integration with the React App. This project was bootstrapped with Create React App.

Prerequisites

Node JS >= 10.x.x
Auth0 client - Currently for I am using auth0.com as a OP Server. Demo should work with every OP Provider.

Configuration

Use environment.js to set OP Client configuration.

Start

Install Dependencies

npm install

Start Application

npm start

Runs the app in the development mode.
Open http://localhost:4200 to view it in the browser.

View on GitHub

2.Authorization request to OP Server

HTTP Get redirect

https://server.com/authorize
?redirect_uri=https://client.com/callback
&client_id=[your_client_id]
&response_type=code
&state=[uuid]
&scope=openid%20email%20profile
&code_challenge=[code_challenge]
&code_challenge_method=S256

3.OP Server authenticates the user and redirects back to https://client.com/callback with code in URL. You can check the above flow diagram.

4.Now request to https://server.com/token with code and code_challenge.

HTTP POST https://server.com/token
content-type: application/x-www-form-urlencoded
accept: application/json

Form Data:
grant_type: authorization_code
client_id: [your_client_id]
redirect_uri: [your_callback_url]
code: [code]
code_verifier: [code_verifier]

This request will return your JSON response with access_token

5.Request to https://server.com/usernifo endpoint with access_token and get user info.

I am not forcing you to use PKCE flow but it is better than the implicit flow.

I've integrated the Authorization Code PKCE flow in my Angular and React App. Code links are given below:

kdhttps / appauth-angular

Appauth JS integration with Angular 🚀 🛡️

kdhttps / appauth-react

Appauth JS integration with React 🎯

I've one application on Heroku. If you want to check then click here https://mean-star.herokuapp.com/

I am using auth0.com as my OpenID Connect Server. You can use any provider which provides you OpenID Connect Standards. I would like to list here some: Janssen Project Auth Server, Gluu Server, Auth0, Okta, KeyCloak. Please comment if you have more OpenID Connect Providers

You can also use Google, Twitter, Facebook who provide this feature.

Happy Helping 😊, Thank you !!!

For More Blog

The Idea behind Netlify and Heroku Free Deployment and Domain linking

Kiran Mali — Sun, 05 Jul 2020 10:57:36 +0000

Everyone knows that Netlify and Heroku has a free plan where you can deploy your application. My main idea behind this blog is Free deployment and linking with a custom domain so that web traffic will keep remain on your domain. In case your user increase, you can buy dedicated servers.

Terminology 📚

Custom Domain

The domain which you buy from a domain provider e.g. Godaddy.com.

Technology Stack ❤️

The Technology stack which I've used for my blog site https://kdhttps.com.

Angular: You can use any SPA e.g. React, Vue.
Scully - Angular Static Site Generator. There are many options available for Vue and React.
mdBootstrap for CSS and Design
Node
Mongo
Express

Problems 🧐

So below are the problems which I faced:

Heroku allows you to deploy the full dynamic site but for custom domain linking you have to buy a paid plan.
Netlify allows you to deploy the JAM Stack. In short, It allows us to deploy the static HTML. You can only use High-Level Languages(Node, PHP, Ruby, etc...) to build your project. You can not deploy your server(e.g. Node JS) application on Netlify.

Solution 🤩

Solution is simple:

Deploy Backend Node Application on Heroku
Deploy Frontend Angular Scully Application on Netlify
I used Heroku to write my blogs, store it in MongoDB, and display blogs on Netlify Frontend Application.
Link domain with Netlify, So that Web traffic always on your domain.

Images 🥙

For resources, assets and images. I am using GitHub so that less space on Heroku and Netlify.

Github Code

😍 https://github.com/kdhttps/kdhttps: The code which I've deployed on Netlify.

😎 https://github.com/kdhttps/mean-star: The code which I've deployed on Heroku.

Problems

You need to deploy your Netlify project after every new blog because it will build a new static page for new pages and you have all Scully and SEO features.

Conclusion 📖

By the great combination of Heroku and Netlify, you can freely deploy your applications
you just need to buy a domain.
This technology stack and deployment techniques will help you understand CI/CD modules.
You don't need to pay any money and credit card for the whole implementation.

Note :📚

Buy a dedicated server when your users increases.

Next 🎯

If you build the blog site next thing you need is SEO. It is really important to bring users to your blog website.

Check here my SEO Blog, It will help you with setting SEO for your SPA.

SEO Tips and Tricks with Single Page Application Angular React Vue

Kiran Mali — Thu, 25 Jun 2020 15:30:40 +0000

Before starting work on Blog or any content site. You should have to do some research on whether your technology stack supports SEO things or not.

For example: I am using Angular Scully which is an angular static site generator. The problem which I faced with the only angular is not enough because as other SPA Technology, it is render HTML after page load so Whenever crawler scrap your website. It failed to find out the meta tags.

The solution is you have to use Server Side Rendering or Static Site Generator or rendertron. There are many options available for every SPA(Angular, Vue, and React).

If you have already developed SPA application and you don't want to add server-side rendering then you can use rendertron which is pretty much good design for this purpose.

SEO(Search Engine Optimazation) Tips and Tricks 🤩

1. Register your domain to google search console

Search Console tools and reports help you measure your site's Search traffic and performance, fix issues, and make your site shine in Google Search results.

Open Link https://search.google.com/search-console/welcome
Add your domain in URL prefix
Verify your ownership
Choose the HTML Tag verify technique which I think easy.
Done

2. SEO Tips to Choose the Best title for your Blog

Ubersuggest tool which use to check trend and volume search about the topic. You can easily install the extension and just search on google. It will show you details on the right side of the page.

Update your <title></title> tag with your title which is really important. The title should not be the same across whole the website.

This is the best SEO Tips and Tricks which helps you to find out the correct title for your content or blog.

For example:

Just type in google search `SEO Tips`. it will show you the number of times search these words in google search engine.

Also Update Title. 
<title>SEO Tips and Tricks with SPA | kdhttps.com</title>

3. Blog link should contain the title

For example:

https://kdhttps.com/blog/seo%20tips%20and%20tricks%20with%20spa

You can see the link has a blog title that just helps Google to improve SEO.

4. Blog heading should contain your title for Good SEO

Blog heading means the heading tags(h1, h2, ...., h6). It should contain your title with some description. Like just take on of my blog example.

5. Metatags

This is the most important part. The metatags which should be on your page. These are the tags that are generally scrapping by the crawler(google, twitter crawler).

og:image and twitter:image should have a full path of the image, otherwise the crawler will fail to show the image on your social site.

For example:

<meta property="og:type" content="website">
<meta name="description" content="The Idea behind Technology Stack for Blog site with Netlify and Heroku free deployment and free domain linking">
<meta property="og:image" content="https://raw.githubusercontent.com/kdhttps/generator/master/assets/blog-1-tech-stack.png">
<meta property="og:title" content="The Idea summary behind Netlify and Heroku Free Deployment and Domain linking">
<meta property="og:url" content="https://kdhttps.com">
<meta property="og:description" content="The Idea behind Technology Stack for Blog site with Netlify and Heroku free deployment and free domain linking">

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://raw.githubusercontent.com/kdhttps/generator/master/assets/blog-1-tech-stack.png">
<meta name="twitter:title" content="The Idea summary behind Netlify and Heroku Free Deployment and Domain linking">
<meta name="twitter:url" content="https://kdhttps.com">
<meta name="twitter:description" content="The Idea behind Technology Stack for Blog site with Netlify and Heroku free deployment and free domain linking">
<meta name="twitter:site" content="@kdhttps">
<meta name="twitter:creator" content="@kdhttps">

6. Image

You should have to add at least one image in your blog and don't forgot to add alt attribute with values. Sometimes we search only for images and users may click on images and google will redirect users to your website.

For Example:

<img src="blog-1-tech-stack.png" alt="SEO Tips and Tricks with SPA" />

7. Repeat your title in your content

At least repeat 2-3 times your title in your blogs. It is best google directly highlight this content. But make sure it is looks and sound goods otherwise users may not like it.

For example:

Point 2. SEO Tips to Choose the Best title for your Blog.

You can see, I've repeated `SEO`, `Tips`, and `Tricks` words in a whole blog.

This is my first blog on Dev.to so suggestions are welcome about anything change in the blog. I hope it will help someone.

Originally published on my own site https://kdhttps.com

DEV Community: Kiran Mali

AppAuth JS integration in React

kdhttps / appauth-react

Appauth JS integration with React 🎯

App Auth React

Prerequisites

Configuration

Start

📚 Let's Go Step by Step

There are 3 main steps

⭐ Authorization Request to OP Server

⭐ OP Server will authenticate the user and redirect back to your side with code in URL. Let's assume you configure redirect login URL is https://client.com/callback. Please check my appauth-react repo for Flow GIF and code. You will get an idea.

⭐ Get a code from URL and get access_token

⭐ Get user info using access_token

#HappySharing #HappyHelping

The Best Security for Single Page Applications(SPA) - OpenID Connect OAuth 2.0 Authorization Code PKCE Flow

What is OpenID Connect OAuth 2.0?

❌ Why not implicit flow?

❌ Why not Authorization Code Flow (without PKCE) for SPA?

✔️ Why to use Authorization Code PKCE flow.?

✔️ Authorization Code PKCE flow and implementation

kdhttps / appauth-angular

Appauth JS integration with Angular 🚀 🛡️

App Auth Angular

Prerequisites

Configuration

Start

kdhttps / appauth-react

Appauth JS integration with React 🎯

App Auth React

Prerequisites

Configuration

Start

kdhttps / appauth-angular

Appauth JS integration with Angular 🚀 🛡️

kdhttps / appauth-react

Appauth JS integration with React 🎯

The Idea behind Netlify and Heroku Free Deployment and Domain linking

Terminology 📚

Technology Stack ❤️

Problems 🧐

Solution 🤩

Images 🥙

Github Code

Problems

Conclusion 📖

Note :📚

Next 🎯

SEO Tips and Tricks with Single Page Application Angular React Vue

SEO(Search Engine Optimazation) Tips and Tricks 🤩

1. Register your domain to google search console

2. SEO Tips to Choose the Best title for your Blog

3. Blog link should contain the title

4. Blog heading should contain your title for Good SEO

5. Metatags

6. Image

7. Repeat your title in your content

⭐ OP Server will authenticate the user and redirect back to your side with code in URL. Let's assume you configure redirect login URL is `https://client.com/callback`. Please check my appauth-react repo for Flow GIF and code. You will get an idea.

⭐ Get a `code` from URL and get `access_token`