conscious-sapphire•2y ago

Authentication

can refine auth hooks can automatic pass token to other hook when user logged in or i will have to get it from localStorage then pass it manually

2 Replies

kapa.ai•2y ago

Hi @tuanna_. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Refine's authentication system is designed to be flexible and customizable. When a user logs in, the authentication token can be stored in the browser's localStorage or sessionStorage. This token can then be included in API calls by configuring the dataProvider. Here's an example of how you can use axios and localStorage to automatically add a token acquired from the login method to the Authorization header of API calls:

import { AuthBindings } from "@refinedev/core";  
import axios, { AxiosRequestConfig } from "axios";  
  
const axiosInstance = axios.create();  
  
axiosInstance.interceptors.request.use((request: AxiosRequestConfig) => {  
 // Retrieve the token from local storage  
 const token = JSON.parse(localStorage.getItem("auth"));  
 // Check if the header property exists  
 if (request.headers) {  
 // Set the Authorization header if it exists  
 request.headers["Authorization"] = `Bearer ${token}`;  
 } else {  
 // Create the headers property if it does not exist  
 request.headers = {  
 Authorization: `Bearer ${token}`,  
 };  
 }  
  
 return request;  
});

import { AuthBindings } from "@refinedev/core";  
import axios, { AxiosRequestConfig } from "axios";  
  
const axiosInstance = axios.create();  
  
axiosInstance.interceptors.request.use((request: AxiosRequestConfig) => {  
 // Retrieve the token from local storage  
 const token = JSON.parse(localStorage.getItem("auth"));  
 // Check if the header property exists  
 if (request.headers) {  
 // Set the Authorization header if it exists  
 request.headers["Authorization"] = `Bearer ${token}`;  
 } else {  
 // Create the headers property if it does not exist  
 request.headers = {  
 Authorization: `Bearer ${token}`,  
 };  
 }  
  
 return request;  
});

(Source: refine.dev docs (https://refine.dev/docs/tutorial/understanding-authprovider/create-authprovider)) In this example, the token is automatically retrieved from localStorage and added to the Authorization header of every request made by axios. This means you don't have to manually pass the token to each API call. However, please note that this approach requires you to manually save the token to localStorage after a successful login. For example, after getting the access token from Auth0, you can store it in the local storage using localStorage.setItem("auth", JSON.stringify(token)), where token is the access token you received. Remember to be mindful of potential security risks when storing sensitive data like authentication tokens in localStorage, as it is accessible by any JavaScript code running on the same domain. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2y ago

<@353701348463738885> kapa.ai is still learning and improving, please let us know how it did by reacting below

Authentication

Did you find this page helpful?