@meniga/auth

@meniga/auth

This package is used to authenticate with an oidc/oauth provider.

It is built as an ESM module and is geared towards apps using functional components and react hooks. It does not add a user to the redux state like @meniga/identity does.

It uses react-oidc-context and oidc-client-ts under the hood and only supports Authorization Code flow or Refresh Token flow. Implicit Grant flow is not supported. If you need Implicit Grant support, use @meniga/identity instead.

Getting started

Install the package in your app like so:

yarn add @meniga/auth

Config

For more information about the configuration and required and optional properties go to: https://authts.github.io/oidc-client-ts/interfaces/UserManagerSettings.html

Easiest way to provide this config - if you are using @meniga/config in your app - is to create an identity.js config file with the following config, using the values set in your oidc provider.

export default {
    /**
     * URL to the oidc server
     */
    authority: 'https://sts.dev.meniga.cloud/identity',
    /**
     * The client ID as configured in the oidc server
     */
    client_id: 'Demo_user_api_gateway_authorization_code',
    redirect_uri: '/callback',
    post_logout_redirect_uri: '/',
    /**
     * Only used if your app supports a 'Forgot password' flow and you are using Meniga's STS server.
     * This specifies the path to the page the STS server should redirect to when user clicks on 'Forgot password'
     */
    forgot_password_uri: '/login/forgot',
    /**
     * Specifies the type of grant you want to use
     * The .well-known configuration of the server has a list of supported response types.
     */
    response_type: 'code',
    scope: 'openid profile meniga_user_api',
    loadUserInfo: true,
    /**
     * Whether or not there should be an automatic attempt to renew the access token prior to its expiration
     */
    automaticSilentRenew: true,
    /**
     * Whether or not the token should be saved in browser storage
     */
    storeToken: true,
    /**
     * The names used to store the access_token and token_type in browser storage.
     * Should not be changed if your app is using @meniga/core for api requests.
     */
    tokenName: 'accessToken',
    tokenTypeName: 'accessTokenType'
};

Note: client_id, scope, response_type and callback_uri should match the configuration made on the identity server.

App

Import the MenigaAuthProvider in your App/entry file and add the OIDC config to it.

import { globalConfig } from '@meniga/config';
import { MenigaAuthProvider } from '@meniga/auth';

const _configBasename = globalConfig('routing.prefix', '');
const _configIdentity = globalConfig('identity', {});

const App = () => {
    return (
        <Fragment>
            <MenigaAuthProvider oidcConfig={_configIdentity} basename={_configBasename}>
                <RouterProvider router={browserRouter} />
            </MenigaAuthProvider>
        </Fragment>
    );
};

export default App;

Router

This setup is based on using @meniga/router but works for anyone using react-router or similar library.

In your apps router you will have to add the following components to authenticate

• AuthProtected is to restrict access to only authenticated users and must be placed under the MenigaAuthProvider in the react dom tree.
• AuthCallback is a component that handles the callback from the oidc provider and saves it to storage.
  • It will redirect to the previous url the user was located after it has done all its work.
• AuthLogin is a component that handles redirect to the login page of the oidc provider.
• AuthLogout is similar to the AuthLogin that it handles the redirect to the oidc provider but this one redirects to a logout page

None of these components are required but they save a lot of time.

import { createBrowserRouter } from '@meniga/router';
import { AuthCallback, AuthProtected, AuthLogin, AuthLogout } from '@meniga/auth';

const routes = [
    {
        key: 'callbackRoute',
        path: '/callback',
        element: <AuthCallback callbackUrl={'/'} onError={() => {}} />
    },
    {
        key: 'loginRoute',
        path: '/login',
        element: <AuthLogin />
    },
    {
        key: 'logoutRoute',
        path: '/logout',
        element: <AuthLogout />
    },
    {
        key: 'protectedRoute',
        path: '/dashboard',
        element: (
            <AuthProtected>
                <Dashboard />
            </AuthProtected>
        )
    }
];

const browserRouter = createBrowserRouter(routes, { basename: _configBasename });

Get user info

You can access basic user info using the useAuth hook as long as MenigaAuthProvider is being used further up the tree.

import { useAuth } from '@meniga/auth'

const someFunctionalCompenent = () => {
	const auth = useAuth()

	const user = auth?.user

	...
}

Silent renew token

@meniga/auth supports renewing the bearer token periodically.

In order to use this feature, set 'automaticSilentRenew' to true in the config.