Initializing component with parameter from local storage in react/nextjs

Question

I have a component provided by an external library which I need to provide an access token to. This access token is saved in localStorage at this point and I would like to read it and pass it to the component. This is my attempt using useEffect but this fails with the error {code: "initialization-error", error: "Access token required"}

const test: NextPage = () => {
  const router = useRouter()
  let accessToken = ''
  useEffect(() => {
    const at = localStorage.getItem('accessToken')
    console.log(at) // prints out the correct access token
    if (at !== null) {
      accessToken = at
    }
  }, [])

  return (
      <WebSdk
        accessToken={accessToken}
        expirationHandler={() => Promise.resolve(accessToken)}
        onError={(error) => {
          console.log(error)
        }}
      />
  )
}

export default test

I'm guessing the useEffect hook runs after the component renderes - how can I read from local storage before or as the component renders?

I am L · Accepted Answer · 2022-07-05 12:26:06Z

2

Since you are using nextjs you can't call the localStorage directly, so you have to check if the bowser has "initialized", something like this:

const test: NextPage = () => {
  const router = useRouter()
  const [initialized, setInitialized] = useState(false);
  const [accessToken, setAccessToken] = useState('');

  useEffect(() => {
    const at = localStorage.getItem('accessToken') || '';
    
    setInitialized(true);
    setAccessToken(at);
  }, [])
 
  if (!initialized) {
    return null;
  }  

  return (
      <WebSdk
        accessToken={accessToken}
        expirationHandler={() => Promise.resolve(accessToken)}
        onError={(error) => {
          console.log(error)
        }}
      />
  )
}

export default test

I'm guessing the useEffect hook runs after the component renderes

Yes the component will render first before the hooks can be triggered, this is the equivalent of "componentDidMount" (if the hook's second parameter is empty) in early verions of react.

edited Jul 5, 2022 at 12:26

answered Jul 5, 2022 at 12:02

I am L

4,6806 gold badges38 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

sev Over a year ago

I get Type 'Promise<string | null>' is not assignable to type 'Promise<string>'. for the expiration handler - tbh. I don't really understand what that expirationHandler is for so not sure what the best way to fix this is.

I am L Over a year ago

@sev oh you're in typescript, I have updated my answer. because localstorage tends to return a null if it doesnt exist, so just make sure to fallback to empty string if null/undefined

sev Over a year ago

If I try this as you have now it fails and I think its because that part of the code is being executed on the server ( I ran with if (typeof window === 'undefined') { console.log('You are on the server'}) How can I make this run on the browser in nextjs?

I am L Over a year ago

@sev I have updated my answer, can you try that one?

Collectives™ on Stack Overflow

Initializing component with parameter from local storage in react/nextjs

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related