auth-server/tools/react/README.md

TokenProvider

The MERN-template utilizes React's useContext() hook to share the auth-server's access token, effectively globally. Here is a quick rundown of how it works.

Enabling TokenProvider

To enable the TokenProvider component, wrap your App component with it, like so:

import React from 'react';
import ReactDOM from 'react-dom';

import App from './pages/app';
import TokenProvider from './pages/utilities/token-provider';

ReactDOM.render(
	<TokenProvider>
		<App />
	</TokenProvider>,
	document.querySelector('#root')
);

Accessing The Access Token

To access the access token from your app, you simply use the useContext hook, like so:

import React, { useContext } from 'react';
import { TokenContext } from '../utilities/token-provider';

const Component = props => {
	//context
	const authTokens = useContext(TokenContext);

	//use the access token
	console.log(authTokens.accessToken);

	return <div />;
};

export default Component;

Most Useful Features Provided

The most useful features provided by TokenProvider are:

• tokenFetch(), which wraps the fetch() API to ensure that your access token is valid
• tokenCallback(), which passes the authTokens as a parameter to any function passed into it
• getPayload(), which returns the payload of the accessToken (including as "email", "username", "admin", and "mod")
• accessToken, this will be falsy if the user is not logged in