@meniga/auth

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

It is build 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 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 LoginPage 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 { Route, Router } from 'cosmic-core'
import { AuthCallback, AuthProtected, AuthLogin, AuthLogout } from '@meniga/auth'

const routes = [
	{
		key: 'callbackRoute',
		path: '/callback',
		element: <AuthCallback callbackUrl={ '/' } onError={ () => { }} />,
	},
	{
		key: 'loginRoute',
		path: '/login',
		element: <LoginPage />
	},
	{
		key: 'logoutRoute',
		path: '/logout',
		element: <LogoutPage />
	},
	{
		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.