atomWithStorage returns null after app reload despite being saved in local storage in my Vite React app

[nivethan-me]

The problem is i'm using axios to send api request in my Vite app. and i need to add a jwt accesstoken to the header. it works fine until i reload the browser. i checked the localstorage both payload and accesstokens atoms are stored there. but api request sent without the token. it got logged as null

auth-atom.ts

import { atomWithStorage } from 'jotai/utils';
import { JwtPayload } from 'jwt-decode';

export interface TokenPayload extends JwtPayload {
  firstName: string;
  lastName: string;
  userId: string;
  roleId: string;
  scopes: string[];
}

export const accessTokenAtom = atomWithStorage<string | null>(
  'accessToken',
  null
);

export const tokenPayloadAtom = atomWithStorage<TokenPayload | null>(
  'payload',
  null
);

axios.ts

import axios, { InternalAxiosRequestConfig } from 'axios';
import { store } from '../atoms/store';
import { accessTokenAtom } from '../atoms/auth';

export const API = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
});

API.interceptors.request.use(
  async (config: InternalAxiosRequestConfig) => {
    const accessToken = store.get(accessTokenAtom);
    console.log('token => ',accessToken); // returns null after reload

    if (accessToken) {
      config.headers.Authorization = `Bearer ${accessToken}`;
    }

    return config;
  },
  (error) => Promise.reject(error)
);

[dai-shi]

Does getOnInit option help?

[nivethan-me]

yes but i'm not sure how to pass that one without Typescript error!

export const accessTokenAtom = atomWithStorage<string | null>(
  'accessToken',
  null,
  localStorage,
  {getOnInit:true}

);

Argument of type 'null' is not assignable to parameter of type 'SyncStorage<string | null> | undefined'.

[dai-shi]

export const accessTokenAtom = atomWithStorage<string | null>(
  'accessToken',
  null,
  undefined,
  { getOnInit: true },
);

[nivethan-me]

export const accessTokenAtom = atomWithStorage<string | null>(
  'accessToken',
  null,
  undefined,
  { getOnInit: true },
);

It worked thank you so much ❤️