Tokyo React Javascript Admin Dashboard includes four separate authentication methods, that are basic examples to give you a starting point. The included auth methotds are: JWT Web Tokens, Firebase, Auth0 and AWS Amplify
Switching to a different auth method is easy. You just have to change an import to point to your designed auth method. By default, Tokyo React Javascript Admin Dashboard comes with JWT Web Tokens enabled.
To switch to a different auth method you need to open \src\hooks\useAuth.js and import the AuthContext from a different provider, like in the example below.
1// use this for JWT Web Tokens
2
3import AuthContext from 'src/contexts/JWTAuthContext';
4
5// use this for Firebase
6
7import AuthContext from 'src/contexts/FirebaseAuthContext';
8
9// use this for Amplify
10
11import AuthContext from 'src/contexts/AmplifyAuthContext';
12
13// use this for Auth0
14
15import AuthContext from 'src/contexts/Auth0Context';Based on the auth method chosen above, you need to also modify src\App.js to point to the new auth method. You need to import the chosen auth provider just like in the example below.
1// use this for JWT Web Tokens
2
3import { AuthProvider } from './contexts/JWTAuthContext';
4
5// use this for Firebase
6
7import { AuthProvider } from './contexts/FirebaseAuthContext';
8
9// use this for Amplify
10
11import { AuthProvider } from './contexts/AmplifyAuthContext';
12
13// use this for Auth0
14
15import { AuthProvider } from './contexts/Auth0Context';Inspect the following file to see how you can retrieve user data based on auth method: src\layouts\ExtendedSidebarLayout\Header\Userbox\index.js.
We extracted, in the example below, only the auth related part from the Userbox\index.js file:
1import useAuth from 'src/hooks/useAuth';
2import { useNavigate } from 'react-router-dom';
3
4function HeaderUserbox() {
5 const { user, logout } = useAuth();
6 const navigate = useNavigate();
7
8 const handleLogout = async () => {
9 try {
10 await logout();
11 navigate('/');
12 } catch (error) {
13 console.error(error);
14 }
15 };
16
17 return (
18 <>
19 My name is: {user.name}
20
21 My avatar is: <img src={user.avatar} alt={user.name} />
22
23 <Button color="primary" onClick={handleLogout}>
24 Sign out
25 </Button>
26 </>
27 )
28}Firebase Authentication aims to make building secure authentication systems easy, while improving the sign-in and onboarding experience for end users. It provides an end-to-end identity solution, supporting email and password accounts, phone auth, and Google, Twitter, Facebook, and GitHub login, and more.
In order to use the Firebase auth method you will need a Firebase account and configuration. You can edit the configuration inside src\config.js which pulls it's variables from /.env. There is a sample .env file available at /env.example. You'll need to populate it with your account settings and rename it to .env
AWS Amplify is a set of purpose-built tools and services that helps front-end web and mobile developers build full-stack applications on AWS faster, with the flexibility to leverage the breadth of AWS services to further customize an app.
In order to use the Amplify auth method you will need a Amplify account and configuration. You can edit the configuration inside src\config.js which pulls it's variables from /.env. There is a sample .env file available at /env.example. You'll need to populate it with your account settings and rename it to .env
Auth0 is an easy to implement, adaptable authentication and authorization platform.
In order to use the Auth0 auth method you will need a Auth0 account and configuration. You can edit the configuration inside src\config.js which pulls it's variables from /.env. There is a sample .env file available at /env.example. You'll need to populate it with your account settings and rename it to .env
JSON Web Tokens are an open, industry standard RFC 7519 method for representing claims securely between two parties. JWT.IO allows you to decode, verify and generate JWT.
Please note that you will need to integrate a backend service in order to use these auth methods in a live production application, as encoding/decoding the auth tokens needs to happen on server side.