Web JS with React

Prerequisites

Required client settings

As this library is designed for SPAs, make sure you have selected Application Type in your client settings as Single Page Application.

For a fully functional integration ensure that Callback redirect URIs and Signout redirect URIs are configured.

Install web-js package

npm i @axioms/web-js

React client configuration

Grab the client key. Now, in your React app.js file create web-js Auth object which looks like below.

src/app.js

import { Auth } from '@axioms/web-js';
// Auth
const auth = new Auth({
    axioms_domain: process.env.REACT_APP_Axioms_Domain,
    response_type: process.env.REACT_APP_Response_Type,
    redirect_uri: process.env.REACT_APP_Redirect_Uri,
    post_logout_uri: process.env.REACT_APP_Post_Logout_Uri,
    client_id: process.env.REACT_APP_Client_Id,
    scope: process.env.REACT_APP_Scope,
    post_login_navigate: process.env.REACT_APP_Post_Login_Navigate
});

Next add a .env (.env.local for local or .env.production for production) file in your React project root, and populate following values,

.env.local

REACT_APP_Client_Id=<Your-Client-ID>
REACT_APP_Axioms_Domain=<Your-Axioms-Domain>
REACT_APP_Redirect_Uri=https://<Your-App-Host>/callback
REACT_APP_Post_Logout_Uri=https://<Your-App-Host>/login
REACT_APP_Response_Type=<Your-Response-Type>
REACT_APP_Scope=<Your-Scope>
REACT_APP_Post_Login_Navigate=<Your-Post-Login-Navigate>

Here is an example version of .env.local

.env.local

REACT_APP_Client_Id=MvnGPGwPJ7DNs0fQLpAr4dhi2PbfuQX1
REACT_APP_Axioms_Domain=auth.test-unlimited.com
REACT_APP_Redirect_Uri=http://localhost:3000/callback
REACT_APP_Post_Logout_Uri=http://localhost:3000/login
REACT_APP_Response_Type=id_token token
REACT_APP_Scope=openid profile email orgs
REACT_APP_Post_Login_Navigate=/dashboard

Using web-js functions

In your component files access various web-js JavaScript functions using AuthContext object passed by App component.

Get AuthContext object

const $auth = React.useContext(AuthContext);

To login with redirect,

$auth.login_with_redirect();

For logout with redirect,

$auth.logout_with_redirect();

To check if user is authenticated,

$auth.session.is_authenticated()

Create auth context

src/AuthContext.js

import React from "react";

const AuthContext = React.createContext();
export default AuthContext;

Add view for redirect URI

Create Callback.js in your view, add authorization response processing logic, and register as route /callback.

src/views/Callback.js

import React from 'react';
import AuthContext from "../AuthContext";

function Callback() {
    const $auth = React.useContext(AuthContext);
    $auth.process_authorize_response();
    return null;
}

export default Callback;

Register redirect URI in your client's settings and also add in .env. URI should be https://{host}/callback or http://{host}/callback where host can be localhost i.e. localhost:8080 or domain hosting your React app i.e. app.my-domain.com.

Add view to initiate login

Create Login.js in your view, add logic to initiate login, and register as route /login.

src/views/Login.js

import React from 'react';
import AuthContext from "../AuthContext";

function Login() {
    const $auth = React.useContext(AuthContext);
    $auth.login_with_redirect();
    return null;
}

export default Login;

Your can use login endpoint https://{host}/login or http://{host}/login as post logout uri in your client's settings and also add in .env where where host can be localhost i.e. localhost:8080 or domain hosting your React app i.e. app.my-domain.com.

Add view to initiate logout

Create Logout.js in your view, add logic to initiate logout, and register as route /logout.

src/views/Logout.js

import React from 'react';
import AuthContext from "../AuthContext";

function Logout() {
    const $auth = React.useContext(AuthContext);
    $auth.logout_with_redirect();
    return null;
}

export default Logout;

Add React router guard

Using web-js, you can guard your React router for un-authenticated users and redirect them to login. We will create a new component PrivateRoute which will be used to define private and protected routes.

src/App.js

import React from 'react';
import { Redirect } from "react-router-dom";

function PrivateRoute({ children, ...rest }) {
  return (
    <Route
      {...rest}
      render={({ location }) =>
        $auth.session.is_authenticated() ? (
          children
        ) : (
          <Redirect
            to={{
              pathname: "/login",
              state: {
                from: location
              }
            }}
          />
        )
      }
    />
  );
}

Add React routes

src/router/App.js

import React from 'react';
import AuthContext from "../AuthContext";
import { Switch, Route } from "react-router-dom";
import Login from "./views/Login";
import Logout from "./views/Logout";
import Callback from "./views/Callback";

function App() {
  return (
    <AuthContext.Provider value={$auth}>
      <div className="App">
          <Switch>
           // Routes for web-js authentication and authorization
            <Route path="/login">
              <Login />
            </Route>{" "}
            <PrivateRoute path="/logout">
              <Logout />
            </PrivateRoute>{" "}
            <Route path="/callback">
              <Callback />
            </Route>{" "}

            // Routes for your other protected or private views
            /*
            <PrivateRoute path="/dashboard">
              <Dashboard />
            </PrivateRoute>{" "}
            */
          </Switch>{" "}
      </div>{" "}
    </AuthContext.Provider>
  );
}

React Sample

To learn more download our React sample from our Github repository. In less than 10 minutes you can deploy React sample to Netlify.

#Prerequisites

#Required client settings

#Install web-js package

#React client configuration

#Using web-js functions

#Create auth context

#Add view for redirect URI

#Add view to initiate login

#Add view to initiate logout

#Add React router guard

#Add React routes

#React Sample