SolidJS•4w ago•

3 replies

Is this pattern okay for jwt auth handling?

💙Beginner

Hi! For a university course I'm creating an spa frontend for a rest api that we had to build. For the api we were asked to handle authorization through jwt, with an access and refresh token (and login is handled with

Authorization: basic <username>:<password>

Authorization: basic <username>:<password>

).

I decided to store the tokens in my app state. The state is a store provided through a context to the rest of the app. It follows this interface:

export type Theme = "dark" | "light";

export type AuthSession = {
  authToken: string;
  refreshToken: string;
};

export interface AppState {
  session: AuthSession | null;
  user: UserState | null;
  preferences: {
    theme: Theme;
    locale: Locale;
  };
}

export type Theme = "dark" | "light";

export type AuthSession = {
  authToken: string;
  refreshToken: string;
};

export interface AppState {
  session: AuthSession | null;
  user: UserState | null;
  preferences: {
    theme: Theme;
    locale: Locale;
  };
}

In every request I will need to send the

Authorization

Authorization

header with the access token and

vango-refresh-token

vango-refresh-token

custom header with the refresh token. And then depending on the server's response I may need to update the state, for example if both tokens are expired then the server returns

401 Unauthorized

401 Unauthorized

and I need to clear the state session. Or if the access token is expired but the refresh token is valid, then the server returns new tokens and I need to update them in the state.
My idea was to make a wrapper over

fetch

fetch

that will handle this logic in every request. I tried a couple of patterns which didn't work due to not having access to the app state context outside components (I'm new to solid and frontend dev in general so reactivity is mostly a new concept to me).
Then I landed on a different pattern which seems to work fine, but I'm not sure if it will bring problems later. I added a new

ApiContext

ApiContext

which is initialized with the getter and setter for the app state store, and it provides the

fetch

fetch

wrapper to its users (alongside other helper functions).

(code in comments)

I haven't implemented any other page yet, but my idea is to use

query

query

s and

action

action

s. Will this api context cause issues with that?

Thanks in advance!

Is this pattern okay for jwt auth handling?

💙Beginner

Authorization: basic <username>:<password>

Authorization: basic <username>:<password>

).

I decided to store the tokens in my app state. The state is a store provided through a context to the rest of the app. It follows this interface:

export type Theme = "dark" | "light";

export type AuthSession = {
  authToken: string;
  refreshToken: string;
};

export interface AppState {
  session: AuthSession | null;
  user: UserState | null;
  preferences: {
    theme: Theme;
    locale: Locale;
  };
}

export type Theme = "dark" | "light";

export type AuthSession = {
  authToken: string;
  refreshToken: string;
};

export interface AppState {
  session: AuthSession | null;
  user: UserState | null;
  preferences: {
    theme: Theme;
    locale: Locale;
  };
}

In every request I will need to send the

Authorization

Authorization

header with the access token and

vango-refresh-token

vango-refresh-token

custom header with the refresh token. And then depending on the server's response I may need to update the state, for example if both tokens are expired then the server returns

401 Unauthorized

401 Unauthorized

fetch

fetch

ApiContext

ApiContext

which is initialized with the getter and setter for the app state store, and it provides the

fetch

fetch

wrapper to its users (alongside other helper functions).

(code in comments)

I haven't implemented any other page yet, but my idea is to use

query

query

s and

action

action

s. Will this api context cause issues with that?

Thanks in advance!

Is this pattern okay for jwt auth handling?

Is this pattern okay for jwt auth handling?

Similar Threads

Similar Threads

Similar Threads