Invoice Portal User Authentication with Auth0

 

Auth 0 Setup

Application > Create Application > Single Page Application

Updated following Details

Name: Invoice Portal App

Application logo: An URL of logo stored in S3 bucket

Allowed callback URL: http://localhost:3000

Allowed Logout URL: http://localhost:3000

Allowed Web Origins : http://localhost:3000

Allow Cross Origin Authentication : Enabled

React App

Update the files

//Index.js file

import { Auth0Provider } from "@auth0/auth0-react";

const onRedirectCallback = (appState) => {

  history.push(

    appState && appState.returnTo ? appState.returnTo : window.location.pathname

  );

};

const config = getConfig();

const providerConfig = {

  domain: config.domain,

  clientId: config.clientId,

  onRedirectCallback,

  authorizationParams: {

    redirect_uri: window.location.origin,

    ...(config.audience ? { audience: config.audience } : null),

  },

};

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(

<React.StrictMode>

  <Auth0Provider  {...providerConfig}>

    <App />

  </Auth0Provider>

</React.StrictMode>

);

Auth0Provider : Auth0Provider stores the authentication state of your users and the state of the SDK — whether Auth0 is ready to use or not. It also exposes helper methods to log in and log out your users, which you can access using the useAuth0() hook.Wrap your root component, such as App, with Auth0Provider to integrate Auth0 with your React app.

The Auth0Provider component takes the following props:

domain and clientId: The values of these properties correspond to the "Domain" and "Client ID" values present under the "Settings" of the single-page application that you registered with Auth0.

onRedirectCallback() : Method to handle the event where Auth0 redirects your users from the Auth0 Universal Login page to your React application. You use the useHistory() hook to get the history object from React Router. You use the history.push() method to take users back to the route they intended to access before authentication.

authorizationParams.redirect_uri: The URL to where you'd like to redirect your users after they authenticate with Auth0.

//App.js

import { useAuth0 } from "@auth0/auth0-react";

const { isAuthenticated, isLoading } = useAuth0();

......

return (

         <Router>

            <NavigationBar />

            {/* if Authenticated load the Application pages */}

            {isAuthenticated && (

            <Routes>

              <Route exact path="/" element={<DashboardApp />} />

              <Route path="viewInvoices" element={<ListAllInvoices />} />

              <Route path="createInvoice" element={<CreateInvoice />} />

              <Route path="viewSingleInvoice" element={<ViewSingleInvoice />} />

              <Route path="userProfile" element={<Profile />} />

            </Routes>

          )} 

            {/* if not Authenticated load the Landing Page for Login or SignUp */}   

          {!isAuthenticated && (

              <Routes>

                <Route exact path="/" element={<LandingPage />} />

              </Routes>

            )

          }

          </Router>

//LoginButton.js Component

import React from 'react';

import { useAuth0 } from '@auth0/auth0-react';

import { Button } from '@mui/material';

const LoginButton = () => {

  const { loginWithRedirect } = useAuth0();

  return (

    <Button variant="contained" onClick={() => loginWithRedirect()}>Login</Button>

   

  );

};

export default LoginButton;

//Logout.js component

import React from 'react';

import { useAuth0 } from '@auth0/auth0-react';

const LogoutButton = () => {

  const { logout } = useAuth0();

  return (

    <button

      className="btn btn-danger btn-block"

      onClick={() =>

        logout({

          returnTo: window.location.origin,

        })

      }

    >

      Log Out

    </button>

  );

};

export default LogoutButton;

//Signup.js component

import React from 'react';

import { useAuth0 } from '@auth0/auth0-react';

import { Button } from '@mui/material';

const SignupButton = () => {

  const { loginWithRedirect } = useAuth0();

  return (

    <Button variant="outlined"

      onClick={() =>

        loginWithRedirect({

          screen_hint: 'signup',

        })

      }

    >

      Sign Up

    </Button>

  );

};

export default SignupButton;

Integrated the above components in invoice portal App.