How to security save Facebook response token to React app?

Viewed 304

I'm developing an React app using facebook login, after login success, facbook return a list of pages that user current manager, includes tokens. These tokens I will use in future in my app. This is response I want to save:

[
 {
   // page 1
   access_token: "this_is_token",
   category: "Community",
   id: "461787374317076",
   name: "page_name",
   ......
 },
 {
   // page 2
 },
 ....// other pages
]

But I don't know how to save this response in my app for security. which is best secure to save? Redux state (not secure), Redux store? Cookies? localstorage? or inmemory?

In my app, I'll use these tokens many times, so I think should dispatch them to Redux store, but does it secure?

Thanks you very much!

1 Answers

Token that you receive do not have password inside.
You are saying if you can store it any where?
The website we are on now (stackoverflow) also store that token in local-storage enter image description here

You can see in this pic they are storing token in localstorage.


is it safe ?
Yes as it do not have any important data like password or credit card number. More over if you as user have this token on your computer then you will not give this string to some other people to access your account (it is like you are giving somebody your password which is not developers fault) and this string is too large that no other can create acceptable string by own.
redux / cookies / localstorage ? The way I use it is . On signIn/signUp I will set it in localstorage and request headers and after refresh i will check first if token is present in localstorage or not if yes then will need to set headers again as on refresh they will lost.



By axios you can easily set headers like this. Then on server you need to get headers from request and verify your token.

import axios from 'axios'

export default function setAuthToken(token){

    if(token){
        axios.defaults.headers.common['autherization'] = `Bearer ${token}`
    }
    else{
        delete axios.defaults.headers.common['autherization']
    }
}
Related