54 lines
1.4 KiB
Markdown
54 lines
1.4 KiB
Markdown
# 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:
|
|
|
|
```jsx
|
|
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:
|
|
|
|
```jsx
|
|
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 accessToken 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
|
|
|