CODEWITHSUNDEEP
javascriptreactjstypescript
Julia Schafer
Julia Schafer

Reputation: 427

How can I use refresh token in react

I have a get refresh token url like this client.com/api//auth/refresh-token. but I have a hard time using this. I think it should save a refresh token in the local storage after the login. but how can I use it?

login.tsx

export const useLogin = () => {

    const LoginAuth = async (data: AuthenticationProps) => {
        await axios.post(baseURL + `client/auth/login`,
        {
            email: data.email,
            password: data.password,
        },
        {
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
            }
        }
        )
        .then((res) => {
            if(res.status === 200) {
                console.log("success")
            }
        }, (err) => {
            console.log(err);
        })
        
    }
    return {
        LoginAuth,
    }
}

Upvotes: 4

Views: 23855

Answers (6)

Ghazi
Ghazi

Reputation: 804

You should not set the refresh token in local storage, it would cause a security vulnerability, since local storage is accessible by javascript, and since refresh token is long term token (live longer than access token), what you would do is, to store access token in local storage, since access token is short termed token, storing in local storage or cookies is totally fine, and then you should make an useEffect() call in react, that check whenever the token is expired and then make the call, a small example:

import Cookies from 'js-cookie';
axios.get("ur_url_here/",data,{withCredentials:true}).then((res)=>{
                Cookies.set(res.data.access) // assuming the response has the access token
        
}))

// now we check the expiration of access token

useEffect(()=>{
   if(!(Cookies.get("access"))){
      axios.get("refresh_url_here/",{withCredentials:true}).then((res)=>{
        Cookies.set(res.data.access)
})
/*what you do here, is try to have a 
resource/view in your backend that has 
the refresh token and make request to it 
so that it gives you a new access token, 
because refresh token should be in cookies tagged with `httponly', 
then you can send the access token to client side 
as a response and set it somewhere.
*/
}
   else{
      //do something else
}
},[])

this is a simplified code, but should explain well the idea of refreshing a token safely.

also note, i stored access in cookies, but you can do the same and store it in local storage.

Upvotes: 8

Shahid Roofi Khan
Shahid Roofi Khan

Reputation: 1037

All the measures of security of web application logic process conclude by giving you access token and refresh token, then and its your responsibility to keep them safe. As long as these tokens are valid, they are only artifacts required to make an access. In fact if you look at OIDC flows the access token is not even handed to browsers in most of them because of so many known weaknesses of browsers in terms in security.

The best way to keep or store either of these tokens is to deal with them in back channel and if not then in browsers encrypt them with custom logic and store in local storage so that only your app knows how to use these tokens.

Better even to have the backend code does this part for you as you know javascript is always exposed and retrievable.

Hope this helps.

Upvotes: 0

Sujith Sandeep
Sujith Sandeep

Reputation: 1249

The best way to store the refresh token is in localstorage.

Setting token in localstorage,

localStorage.setItem("token", token);

Getting token from localstorage

let token = localStorage.getItem("token");

You can also view the stored token in browser like below,

enter image description here

Upvotes: 1

Satel
Satel

Reputation: 187

You can use LocalStorage, or SessionStorage.

export const useLogin = () => {

    const LoginAuth = async (data: AuthenticationProps) => {
        await axios.post(baseURL + `client/auth/login`,
        {
            email: data.email,
            password: data.password,
        },
        {
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json",
            }
        }
        )
        .then((res) => {
            if(res.status === 200) {
                console.log("success")
                window.localstorage.setItem('authToken', res.data.token);
                // Same as session storage
                // window.localstorage.setItem('authToken', res.data.token);
            }
        }, (err) => {
            console.log(err);
        })
        
    }
    
    return {
        LoginAuth,
    }
}

You can check here for the difference

Upvotes: 1

kennarddh
kennarddh

Reputation: 2665

Save in web storage

Only strings can be stored in web storage

LocalStorage

Persists even when the browser is closed and reopened.

Get

const token = localStorage.getItem('token');

Set

localStorage.setItem('token', 'value')

SessionStorage

Data removed when browser closed

Get

sessionStorage.getItem('token', 'value')

Set

sessionStorage.setItem('token', 'value')

Upvotes: 1

user3133
user3133

Reputation: 612

Save it in local storage

export const storeToken = async (token: string) => {
  await AsyncStorage.setItem('@token', token);
};

And fetch from storage when needed

export const getToken = async () => {
  return await AsyncStorage.getItem('@token');
};

You should probably fetch the token from storage when application starts or when fetching from the API and store it in state or such while using the application.

Upvotes: 2

Related Questions