React.js User Authentication with Cloudentity

Within the directory of your choice, initialize the application by executing the following command in your terminal:

npx create-react-app oidc-auth-sample-app && cd oidc-auth-sample-app

We will use a couple of npm packages to build this application:

Let's go ahead and install the packages.

npm install --save react-router-dom @cloudentity/auth jwt-decode

To keep our application organized, let's create a components directory and create some basic React components.

Login.js - view for unauthenticated traffic. Profile.js - view for authenticated users.

Let's define some routing within the React authentication app.

We will use the react-router-dom package to handle the routing. We will be building and securing these routes as we progress through this article. At this point, anyone can visit them without authorization. Let's modify the default src/App.js to include above Routes and also import the view components for Login and Profile.

import {
  BrowserRouter,
  Routes,
  Route
} from 'react-router-dom';
import Login from './components/Login';
import Profile from './components/Profile';
import './App.css';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route index element={<Login />} />
          <Route path="profile" element={<Profile />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Let's do some basic styling for App by editing src/App.css, we'll modify the App class to look like the following snippet, and discard everything else. You may choose to style it for your needs

.App {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

You can start the development server by executing the following command in your project root catalog:

npm start

Navigate to http://localhost:3000. You'll see the Login view. If you go directly to http://localhost:3000/profile, you'll see the Profile view.

Login view

Profile view

We have not applied the authorization logic to the routes yet, so let's register the application with Cloudentity and then configure the application to protect the profile view to be accessible for authorized users.

We will register a public OAuth Client Application in the Cloudentity platform. The client application type is recommended to be public as this is a single page application with no trusted backend and there should NOT be any client secrets/credentials used in this application for OAuth flow. This means we will use the OAuth authorization code with PKCE flow - RFC7636 for securely obtaining the ID token which represents an authenticated end user identity token.

Now that we have registered the OAuth client application, let's look at some of the highlighted configurations.

As we pointed our earlier, we will use the Cloudentity OAuth SDK library to wrap the entire handling of the OAuth handshake flows that includes PKCE code generation, authorize call, exchange code for tokens, and more. Let's configure the Cloudentity OAuth SDK library in our React application with the registered OAuth client information.

First, we need to set up a config file that contains the registered OAuth client application information, and a file for an auth hook that we can use in our components to check whether the user is authorized to access a certain view.

Let's create a file named authConfig.js under the src directory. In the src/authConfig.js file, replace the example values with values from the OAuth application set up within Cloudentity. You can find the values for these from the Cloudentity application registration page as shown in below images.

const authConfig = {
    domain: 'mytenant.us.authz.cloudentity.io', // e.g. 'mytenant.us.authz.cloudentity.io.' Recommended; always generates URLs with 'https' protocol.
     // baseUrl: optional alternative to 'domain.' Protocol required, e.g. 'https://mytenant.us.authz.cloudentity.io'
     // In situations where protocol may dynamically resolve to 'http' rather than 'https' (for example in dev mode), use 'baseUrl' rather than 'domain'.
     tenantId: 'mytenant', // This is generally in the subdomain of your Cloudentity ACP URL
     authorizationServerId: 'demo', // This is generally the name of the workspace you created the OAuth application in.
     clientId: 'application-client-id-goes-here',
     redirectUri: 'http://localhost:3000/',
     scopes: ['profile', 'email', 'openid'], // 'revoke_tokens' scope must be present for 'logout' action to revoke token! Without it, token will only be deleted from browser's local storage.
     accessTokenName: 'mytenant_demo_access_token', // optional; defaults to '{tenantId}_{authorizationServerId}_access_token'
     idTokenName: 'mytenant_demo_id_token', // optional; defaults to '{tenantId}_{authorizationServerId}_id_token'
 };

 export default authConfig;

Tip - Configuration reference

Let's create a React hook to manage the state whether user is authenticated or not.

In the src/auth.js file, we'll create a simple hook to manage our authenticated state:

import {useState, useEffect} from 'react';

export const useAuth = (auth) => {
  const [authenticated, setAuthentication] = useState(null);

  function removeQueryString() {
    if (window.location.href.split('?').length > 1) {
      window.history.replaceState({}, document.title, window.location.href.replace(/\?.*$/, ''));
    }
  }

  useEffect(() => {
    auth.getAuth().then((res) => {
      if (res) {
        console.log('auth response:', JSON.stringify(res));
        removeQueryString();
      }
      setAuthentication(true);
    })
    .catch((_authErr) => {
      setAuthentication(false);
      if (window.location.href.split('?error').length > 1) {
        if (authenticated === false) {
          window.alert('The authorization server returned an error.');
        }
      } else {
        removeQueryString();
      }
    });
  });

  return [authenticated];
};

Now we have all the building blocks to wire the OAuth flow with Cloudentity as an OIDC provider within the React application. Cloudentity Auth SDK handles the OAuth authorization (code => token exchange), redirects. and setting the access token. If an access token is not available in the local storage, the user is redirected to the / route that prompts them to login.

As the last step, let's go back to the src/App.js file, and import the Cloudentity Auth SDK, registered OAuth client application configuration, and the auth hook; we'll then add the login and logout handlers to pass as props to our Login and Profile components (as shown below).

// ...

import CloudentityAuth from '@cloudentity/auth';
import authConfig from './authConfig';
import { useAuth } from './auth';

function App() {
  const cloudentity = new CloudentityAuth(authConfig);
  const [authenticated] = useAuth(cloudentity);

  function authorize () {
    cloudentity.authorize();
  };

  function clearAuth () {
    cloudentity.revokeAuth()
      .then(() => {
        window.location.reload();
      })
      .catch(() => {
        window.location.reload();
      });
  };

  return (
    <div className="App">
      <BrowserRouter>
        <Routes>
          <Route index element={<Login auth={authenticated} handleLogin={authorize} />} />
          <Route path="profile" element={<Profile auth={authenticated} handleLogout={clearAuth} />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

// ...

Now, we just need to wire up our Login and Profile components to detect the auth state and redirect if necessary.

In the src/components/Login.js file:

import { Navigate } from 'react-router-dom';

const Login = ({auth, handleLogin}) => {
  return (
    <div>
      {auth === null && <div>Loading...</div>}
      {auth === false && (
        <div>
          <h1>Welcome!</h1>
          <button onClick={handleLogin}>
            Please log in.
          </button>
        </div>
      )}
      {auth && <Navigate to='/profile' />}
    </div>
  );
};

export default Login;

In src/components/Profile.js:

import { Navigate } from 'react-router-dom';

const Profile = ({auth, handleLogout}) => {
  return (
    <div>
      {auth === null && <div>Loading...</div>}
      {auth === false && <Navigate to='/' />}
      {auth && (
        <div>
          <h1>Welcome, { /* we'll dynamically populate this soon */ 'user' }!</h1>
          <h3>
            Your profile info:
          </h3>
          <div>
            { /* we'll dynamically populate this soon */ }
          </div>
          <button onClick={handleLogout} style={{marginTop: 20}}>
            Log out
          </button>
        </div>
      )}
    </div>
  );
};

export default Profile;

Note that there is both a false and null state for auth. This is because checking the auth state is asynchronous, so when redirecting to our app after the OAuth handshake, there is a brief moment where our application renders, but the auth check is not finished. To handle this, we'll display a message that reads "Loading..." in that brief moment after the successful redirect from Cloudentity.

The one thing remaining is to extract the user's identity data from the OAuth ID token and display it in their profile view. To do this, we'll import the jwt-decode library into our Profile page, and add a simple list of profile attributes. Parameters such as iat or issued at, which can allow us to display a human-readable last login time, are returned as Unix timestamps and must be converted.

After adding some profile data and minimal styles, here's our finished src/components/Profile.js file:

import { Navigate } from 'react-router-dom';
import jwt_decode from 'jwt-decode';
import authConfig from '../authConfig';

const Profile = ({auth, handleLogout}) => {
  const idToken = window.localStorage.getItem(authConfig.idTokenName);
  const idTokenData = idToken ? jwt_decode(idToken) : {};
  const lastLogin = idTokenData.iat ? (new Date(idTokenData.iat*1000)).toLocaleString() : 'N/A';

  console.log(idTokenData, lastLogin, idTokenData.iat);

  const profileItemStyle = {
    display: 'flex',
    justifyContent: 'space-between'
  };

  const profileLabelStyle = {
    fontWeight: 'bold'
  };

  return (
    <div>
      {auth === null && <div>Loading...</div>}
      {auth === false && <Navigate to='/' />}
      {auth && (
        <div>
          <h1>Welcome, {idTokenData.sub || 'user'}!</h1>
          <h3>
            Your profile info:
          </h3>
          <div style={{marginTop: 20, minWidth: 270}}>
            <div style={profileItemStyle}>
              <div style={profileLabelStyle}>Username:</div>
              <div>{idTokenData.sub}</div>
            </div>
            <div style={profileItemStyle}>
              <div style={profileLabelStyle}>Email:</div>
              <div>{idTokenData.email || 'N/A'}</div>
            </div>
            <div style={profileItemStyle}>
              <div style={profileLabelStyle}>Last login:</div>
              <div>{lastLogin}</div>
            </div>
          </div>
          <button onClick={handleLogout} style={{marginTop: 20}}>
            Log out
          </button>
        </div>
      )}
    </div>
  );
};

export default Profile;

Now you should see your username, email (if your logged-in user has one configured), and last login time.