Rajiv ChaulagainAuthentication in react js with api is a most common for any front end developers.
So at first create an context so that we could save token and use user data all across the application
import { createContext, useState } from "react";
export const AuthContext = createContext();
export const ProvideAuth = ({ children }) => {
export const getSession = () => {
return JSON.parse(localStorage.getItem('session'));
};
/**
* setToken from localstorage
*/
export const setSessionInLocalStorage = (token) => {
localStorage.setItem('session', JSON.stringify(token))
return true
};
const auth = getSession();
const [session, setSession] = useState(auth || '');
const setAuth = (token) => {
setSession(token);
setSessionInLocalStorage(token);
};
const { user, token } = session;
return (
<AuthContext.Provider value={{ user, token, setAuth }}>
{children}
</AuthContext.Provider>
)
};
Now create a custom hook with useAuth.
import { useContext } from "react";
import { AuthContext } from "../context/ProvideAuth";
export const useAuth = () => {
return useContext(AuthContext);
};
Now create a login page and set token while user login.
import React from "react";
import { Link, useHistory } from "react-router-dom";
import { toast } from 'react-toastify';
import { authenticationService } from '../../../services/api/authentication';
import { useAuth } from '../../../hooks/useAuth'
const UserLogin = () => {
const { setAuth } = useAuth();
return (
<button onClick={() => setAuth(token)}>Login</button>
);
};
export default UserLogin;
Conclusion
This is a simple trick and more code and logic will be provided in github.
