CODEWITHSUNDEEP
authenticationreactjspromisereduxfetch-api
Dima Gimburg
Dima Gimburg

Reputation: 1466

Initial authentication check in ReactJS and Redux

Background: I have an app that is showing a list of movies, but what I want to do is to show the list only for users who are authorized (by checking token stored on the local-storage).

so the flow I want to achieve is:

  1. user enters the app main page
  2. check if has token in local storage
  3. if yes check if it is authorized
  4. if authorized = show list, else don't show

so what I do right now is in my main (wrapper) component right after I create my store:

const store = configureStore();
var token = localStorage.get(authConstants.LOCAL_STORAGE_TOKEN_KEY);
if(token){
    store.dispatch(actions.checkInitialAuth(token));
}

checkInitialAuth actions is:

export function checkInitialAuth(token){
    return dispatch => {
        dispatch(requestLogin());
        return fetch(authConstants.API_USER_DETAILS, {headers: { 'Authorization' : `Bearer ${token}`}})
            .then(function(response){
                if(!response.ok){
                    throw Error(response.statusText);
                }
                return response.json();
            })
            .then(function(user){
                localStorage.set(authConstants.LOCAL_STORAGE_TOKEN_KEY, token);
                dispatch(receiveLogin(user)); // <==========
                dispatch(setTopMovies()); // <==========
            })
            .catch(function(err){
                // TODO: handle errors
                console.log(err);
            });
    }
}

so the question is, is it the right place to invoke the initial auth check right after the creating store and right before the element creation?

and now if I have to invoke more actions only if the user is authorized do I have to invoke them in the then inside the checkInitialAuth action? is it the right place to make all the action dispatch calls?

and last one, when the auth is wrong (I changed manually the token to be wrong on the local storage) the console.log(err) is logging as expected but I have also this annoying 401 error in the console, can I somehow avoid it?

thanks a lot!

Upvotes: 0

Views: 343

Answers (1)

xiaofan2406
xiaofan2406

Reputation: 3310

is it the right place to invoke the initial auth check right after the creating store and right before the element creation?

Yes. Usually this is where all the initialization happens before store is passed to Provider.

is it the right place to make all the action dispatch calls?

This depends a lot on your application logic. You component can check if a user is authenticated itself to display the correct content for 'topMovies'. But nothing stops you from dispatch more actions here.

but I have also this annoying 401 error in the console, can I somehow avoid it?

It is the network request error. It is the response from the server your fecth is contacting. You can hide the error by change your Chrome Dev console filter if you really want to hide them (but why?).

Upvotes: 1

Related Questions