React Application setup
We’re going to build a very bare bones application for this tutorial. We’ll start by creating an application using the yarn
react-app generator: In your terminal, execute the following command:
yarn create react-app aserto-react-demo
You can now cd
into the newly created folder and start the app:
cd aserto-react-demoyarn start
The familiar React logo should appear, indicating that the app is ready to go.
#
Adding OIDC dependenciesNow that we have a running React application, we'll continue by installing and then importing the required dependency - oidc-react
In your terminal, execute the following command:
yarn add oidc-react
The following environment variables are used to point your application to Aserto’s demo IDP, so that you don’t have to set one yourself. Create a file called .env
and add the following:
REACT_APP_OIDC_DOMAIN=acmecorp.demo.aserto.comREACT_APP_OIDC_CLIENT_ID=acmecorp-appREACT_APP_OIDC_AUDIENCE=acmecorp-appREACT_APP_API_ORIGIN=http://localhost:8080
note
Make sure the .env
file is added to the .gitignore
file so that it is not checked in.
Open the file src/index.js
and add the dependency:
import { AuthProvider } from 'oidc-react'
Add the following configuration object:
const configuration = { authority: `https://${process.env.REACT_APP_OIDC_DOMAIN}/dex`, clientId: process.env.REACT_APP_OIDC_CLIENT_ID, autoSignIn: true, responseType: 'id_token', scope: 'openid profile email', redirectUri: window.location.origin, audience: process.env.REACT_APP_OIDC_AUDIENCE, onSignIn: () => { window.location.replace(window.location.origin) },}
Next, we'll wrap the top level React Application component with the AuthProvider, and pass it the required configuration we created.
ReactDOM.render( <React.StrictMode> <AuthProvider {...configuration}> <App /> </AuthProvider> </React.StrictMode>, document.getElementById('root'))
note
When developing locally, make sure your application is running on port 3000 - other ports are not registered with the identify provider and will not work.
If your application is still running, you should see the following login window:
Use the following user credentials to log in:
Email address: euang@acmecorp.com
Password: V@erySecre#t123!
After logging in, you should see the React logo again.
#
Add a stylesheetWe've created a stylesheet for this app that you can reference in your index.html
file in the public
folder. in the <head>
section, add the following:
<link rel="stylesheet" href="https://aserto-remote-css.netlify.app/react-and-node-quickstart.css"/>
Next, we’ll build the app itself. Open the App.js
file, and replace it’s contents with:
import React, { useEffect } from 'react'import { useAuth } from 'oidc-react'
function App() { const auth = useAuth() const isAuthenticated = auth.userData?.id_token ? true : false
//If the user logs out, redirect them to the login page useEffect(() => { if (!auth.isLoading && !isAuthenticated) { auth.signIn() } })
return ( <div className="container"> <div className="header"> <div className="logo-container"> <div className="logo"></div> <div className="brand-name"></div> </div> </div>
<div className="user-controls"> {isAuthenticated && ( <> <div className="user-info">{auth.userData?.profile?.email}</div> <div className="seperator"></div> <div className="auth-button"> <div onClick={() => auth.signOut('/')}>Log Out</div> </div> </> )} {!isAuthenticated && ( <div className="auth-button"> <div onClick={() => auth.signIn('/')}>Login</div> </div> )} </div>
<div className="main"> {isAuthenticated && ( <> <div className="top-main"> <div className="welcome-message"> Welcome {auth.userData?.profile?.email}! </div> </div> </> )} </div> </div> )}
export default App
#
Test the applicationLet's test our application by logging in. If it's not already running, start your application by executing:
yarn start
If you haven't already, log in, using the following credentials:
Email address: euang@acmecorp.com
Password: V@erySecre#t123!
If everything works as expected, the following should be displayed.
We can make sure that the application's authentication flow works by logging out and then logging back in.
Great! Our application authenticates with the Acmecorp IDP, and so we have our user's identity in hand. Next, we'll create the Express.js service which will host our protected resource and will communicate with the Aserto hosted authorizer to determine whether or not a logged in user has the permissions to access the protected resource based on the user's identity.