0

I'm using React 16. I have a hook where I determine if a session token has been stored in session storage ...

import { useEffect } from 'react';
import { useAuthenticationState, useAuthenticationDispatch } from '../context';

const useAuthentication = () => {
  const authenticationState = useAuthenticationState();
  const updateAuthenticationState = useAuthenticationDispatch();

  useEffect(() => {
    const auth_token = sessionStorage.getItem('token');
    console.log("auth token: " + auth_token);
    updateAuthenticationState({
      type: 'field',
      fieldName: 'isAuthenticated',
      payload: !!auth_token,
    });
  }, [updateAuthenticationState]);

  const isAuthenticated = authenticationState.isAuthenticated;

  return {
    isAuthenticated,
  };
};

export default useAuthentication;

I would like to pass the value of what is stored in session storage to a component that will either render another component or redirect based on the value of the my hook ...

const DirectoryApp = () => {
  console.log("starting get hook value ...");
  const { isAuthenticated } = useAuthentication();
  console.log("is auth:" + isAuthenticated);

  return (
      <Router>
        ...
                  <PrivateRoute
                  authed={isAuthenticated} path="/unapproved-list/"
                  component={UnapprovedList}
                  />

But this line

const { isAuthenticated } = useAuthentication();

isn't properly getting the value of what is in sessionStorage -- it is always initialy returning false. I think this is because I'm not awaiting the result of what the hook returns, but if I do this

const { isAuthenticated } = await useAuthentication();

I get the error

Syntax error: Unexpected reserved word 'await'. (24:31)

How do I properly await the value of what the hook returns?

skyboyer
  • 22,209
  • 7
  • 57
  • 64
Dave
  • 15,639
  • 133
  • 442
  • 830
  • You can't use `await` in a non-`async` function (and a React component _cannot_ be an asynchronous function). Beyond that you'd need to give a [mre], your hook uses two other custom hooks we can't see. – jonrsharpe Jan 01 '22 at 17:36

1 Answers1

0

Effect is being called after the initial render of the DirectoryApp component. It means your useAuthentication hooks gets whatever is stored in the authenticationState and returns it without any dependency on the code inside of the useEffect hook at that point ant returns the the DirectoryApp component, DirectoryApp renders with this initial value and only after that the effect is being executed.

There's nothing to await as there's no async code in the code you provided.

Based on your imports and code structure I assume you are trying to use React.Context with reducer inside to manage authentication state. In this case you have your AuthenticationProvider component of some sort sowhere wrapping the DirectoryApp so you can solve the issue there by moving the session storage read to the reducer's third initializer parameter:

const reducer = (state, action) => {
    // reducer logic
};

const StateContext = createContext();
const DispatchContext = createContext();
const useAuthenticationState = () => useContext(StateContext);
const useAuthenticationDispatch = () => useContext(DispatchContext);

const AuthenticationProvider = ({ children }) => {
    const [state, dispatch] = useReducer(reducer, { isAuthenticated: false }, (arg) => {
        const auth_token = sessionStorage.getItem('token');
        
        return { ...arg, isAuthenticated: !!auth_token };
    });
    
    return (
        <DispatchContext.Provider value={dispatch}>
            <StateContext.Provider value={state}>
                {children}
            </StateContext.Provider>
        </DispatchContext.Provider>
    );
};

const App = () => (
    <AuthenticationProvider>
      <DirectoryApp />
    </AuthenticationProvider>
);

sessionStorage.getItem is a synchronous function so you will get properly initialized state before the first render of the DirectoryApp.

eugenezinovyev
  • 161
  • 4
  • Thanks! I think this is working well although now I'm getting some errors in my PrivateRoute when authentication is true, although I think unrelated to your solution. More details are here if you're interested -- https://stackoverflow.com/questions/70551327/in-react-how-do-i-render-a-stateless-component-that-is-passed-in-as-a-prop – Dave Jan 01 '22 at 19:32
  • Oh, that is great! Just to clarify: are you using react-router 5 or 6 in your setup? Please note they have changed the redirection a bit in the 6th version and have a great [example](https://stackblitz.com/github/remix-run/react-router/tree/main/examples/auth?file=src/App.tsx) on authentication. – eugenezinovyev Jan 01 '22 at 19:51
  • I'm using react-router-dom 5.1.2 but happy to upgrade to a later version if that will make this easier to implement. – Dave Jan 01 '22 at 20:11
  • I don't think 6th version will help with implementation much - the authentication feature with protected route is [available](https://v5.reactrouter.com/web/example/auth-workflow) for 5th version as well. But I guess you are already taking this documentation into account based on the code sameples you provide. – eugenezinovyev Jan 01 '22 at 20:22