Typescript prepareHeaders and getState

[rsheppard-dev]

Hi, I have been trying to learn Redux and RTK Query to manage the state of my app.

I have really struggled to add the logic to persist the login state. I planned to use prepareHeaders in my apiSlice.ts to store the access token once the user logs in but I don't seem to connect to my server and the token stays as undefined. Without the prepareHeaders option, my app seems to get the response ok (although pointless).

I would really appreciate it if anyone could look over my code and offer advice.

store.ts

import { configureStore } from '@reduxjs/toolkit';
import { apiSlice } from './api/apiSlice';
import { setupListeners } from '@reduxjs/toolkit/query';
import authSlice from '../features/auth/authSlice';

export const store = configureStore({
	reducer: {
		[apiSlice.reducerPath]: apiSlice.reducer,
		auth: authSlice.reducer,
	},
	middleware: getDefaultMiddleware =>
		getDefaultMiddleware().concat(apiSlice.middleware),
	devTools: true,
});

setupListeners(store.dispatch);

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;
// Inferred type: {user: UserState, ticket: TicketState}
export type AppDispatch = typeof store.dispatch;

apiSlice.ts

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';
import { RootState } from '../store';

const baseUrl = 'http://localhost:3500';

const baseQuery = fetchBaseQuery({
	baseUrl,
	credentials: 'include',
	prepareHeaders: (headers, { getState }) => {
		const state = getState() as RootState;

		const token = state.auth.accessToken; // access the token property of the auth slice of your state object

		if (token) {
			headers.set('authorization', `Bearer ${token}`);
		}

		return headers;
	},
});

export const apiSlice = createApi({
	baseQuery,
	tagTypes: ['Ticket', 'User'],
	endpoints: builder => ({}),
});

authApiSlice.ts

import { apiSlice } from '../../app/api/apiSlice';
import { logOut } from './authSlice';

type Credentials = {
	email: string;
	password: string;
};

export const authApiSlice = apiSlice.injectEndpoints({
	endpoints: builder => ({
		login: builder.mutation({
			query: (credentials: Credentials) => ({
				url: '/auth',
				method: 'POST',
				body: { ...credentials },
			}),
		}),

		sendLogOut: builder.mutation({
			query: () => ({
				url: '/auth/logout',
				method: 'POST',
			}),
			async onQueryStarted(_arg, { dispatch, queryFulfilled }) {
				try {
					await queryFulfilled;
					dispatch(logOut());
					dispatch(apiSlice.util.resetApiState());
				} catch (error) {
					console.log(error);
				}
			},
		}),

		refresh: builder.mutation({
			query: () => ({
				url: '/auth/refresh',
				method: 'GET',
			}),
		}),
	}),
});

export const { useLoginMutation, useRefreshMutation, useSendLogOutMutation } =
	authApiSlice;

authSlice.ts

import { createSlice } from '@reduxjs/toolkit';

import type { RootState } from '../../app/store';

const authSlice = createSlice({
	name: 'auth',
	initialState: {
		accessToken: null,
	},
	reducers: {
		setCredentials: (state, action) => {
			const { accessToken } = action.payload;
			state.accessToken = accessToken;
		},
		logOut: state => {
			state.accessToken = null;
		},
	},
});

export const { setCredentials, logOut } = authSlice.actions;

export default authSlice;

export const selectCurrentToken = (state: RootState) => state.auth.accessToken;

[phryneas]

I assume you have a CORS configuration that does not allow for an authorization header. That should get apparent by some kind of error message in your console. This would have to be solved on the server side.

Also, you don't seem to be calling setCredentials anywhere.

Generally: have you looked at this authentication example?

[rsheppard-dev]

Hi phryneas.

My setCredentials is called in my Login function:

Login.ts

import { useId, useState } from 'react';

import { useNavigate } from 'react-router-dom';
import { z } from 'zod';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';

import { setCredentials } from './authSlice';
import { useAppDispatch } from '../../app/hooks';
import { useLoginMutation } from './authApiSlice';

function Login() {
	const [errorMessage, setErrorMessage] = useState<string | null>();
	const id = useId();
	const navigate = useNavigate();
	const dispatch = useAppDispatch();

	const [login, { isLoading }] = useLoginMutation();

	// create validation schema
	const formSchema = z.object({
		email: z
			.string()
			.email({ message: 'You must supply a valid email address.' }),
		password: z.string(),
	});

	// infer typescript type from schema
	type FormData = z.infer<typeof formSchema>;

	// setup form validation with zod schema
	const {
		register,
		handleSubmit,
		formState: { errors },
	} = useForm<FormData>({
		resolver: zodResolver(formSchema),
	});

	// function to run when form successfully submitted
	async function onSubmit(values: FormData) {
		try {
			const { accessToken } = await login({
				...values,
			}).unwrap();
			dispatch(setCredentials({ accessToken }));
			navigate('/dash');
		} catch (error: any) {
			console.log(error);
			if (!error?.status) {
				setErrorMessage('No server response.');
			} else if (error.status === 400) {
				setErrorMessage('Missing email or password.');
			} else if (error.status === 401) {
				setErrorMessage('Unauthorised.');
			} else {
				setErrorMessage(error.data?.message);
			}
		}
	}

	if (isLoading) return <p>Loading...</p>;
	return (
		<form onSubmit={handleSubmit(onSubmit)} className='space-y-2 max-w-md'>
			<div aria-live='assertive' role='alert' className='bg-red-300 rounded'>
				{errorMessage}
			</div>
			<div className='flex flex-col gap-2'>
				<label htmlFor='email'>Email:</label>
				<input
					{...register('email')}
					type='email'
					name='email'
					id={`${id}-email`}
				/>
				{errors.email && (
					<span className='text-red-600' aria-live='assertive' role='alert'>
						{errors.email.message}
					</span>
				)}
			</div>
			<div className='flex flex-col gap-2'>
				<label htmlFor='password'>Password:</label>
				<input
					{...register('password')}
					type='password'
					name='password'
					id={`${id}-password`}
				/>
				{errors.password && (
					<span className='text-red-600' aria-live='assertive' role='alert'>
						{errors.password.message}
					</span>
				)}
			</div>
			<div className='flex justify-end'>
				<button
					type='submit'
					title='Login'
					className='bg-amber-400 enabled:hover:bg-amber-500 disabled:opacity-50 px-2 py-1 rounded'
				>
					Login
				</button>
			</div>
		</form>
	);
}

export default Login;

The error I'm getting is below. Doesn't mention CORS, I have allowed origins from my server so shouldn't be an issue:

react_devtools_backend.js:2655 TypeError: Cannot read properties of undefined (reading 'accessToken')
    at prepareHeaders (apiSlice.ts:12:28)
    at fetchBaseQuery.ts:234:14
    at step (module.ts:51:1)
    at Object.next (module.ts:51:1)
    at module.ts:51:1
    at new Promise (<anonymous>)
    at __async (module.ts:51:1)
    at fetchBaseQuery.ts:214:30
    at buildThunks.ts:349:24
    at step (module.ts:51:1)
Login.tsx:49 
{name: 'TypeError', message: "Cannot read properties of undefined (reading 'accessToken')", stack: 'TypeError: Cannot read properties of undefined (re…/.vite/deps/chunk-OXDDZZE7.js?v=ed70da4f:1553:23)'}
message
: 
"Cannot read properties of undefined (reading 'accessToken')"
name
: 
"TypeError"
stack
: 
"TypeError: Cannot read properties of undefined (reading 'accessToken')\n    at prepareHeaders (http://localhost:5173/src/app/api/apiSlice.ts:8:34)\n    at http://localhost:5173/node_modules/.vite/deps/chunk-OXDDZZE7.js?v=ed70da4f:154:24\n    at step (http://localhost:5173/node_modules/.vite/deps/chunk-OXDDZZE7.js?v=ed70da4f:1553:23)\n    at Object.next (http://localhost:5173/node_modules/.vite/deps/chunk-OXDDZZE7.js?v=ed70da4f:1500:18)\n    at http://localhost:5173/node_modules/.vite/deps/chunk-OXDDZZE7.js?v=ed70da4f:1626:65\n    at new Promise (<anonymous>)\n    at __async (http://localhost:5173/node_modules/.vite/deps/chunk-OXDDZZE7.js?v=ed70da4f:1608:14)\n    at http://localhost:5173/node_modules/.vite/deps/chunk-OXDDZZE7.js?v=ed70da4f:135:12\n    at http://localhost:5173/node_modules/.vite/deps/chunk-OXDDZZE7.js?v=ed70da4f:694:24\n    at step (http://localhost:5173/node_modules/.vite/deps/chunk-OXDDZZE7.js?v=ed70da4f:1553:23)"
[[Prototype]]
: 
Object

[phryneas]

That error means that state.auth is undefined, so you cannot access state.auth.accessToken. Did you really configure your auth reducer to be at state.auth?

[rsheppard-dev]

I believe so but am still quite new to redux

…

On Sat, 1 Apr 2023 at 12:54, Lenz Weber-Tronic ***@***.***> wrote: That error means that state.auth is undefined, so you cannot access state.auth.accessToken. Did you really configure your auth reducer to be at state.auth? — Reply to this email directly, view it on GitHub <#3315 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AQ37KPDO7V6LQRLSBFAEPGTW7AJQRANCNFSM6AAAAAAWPQ654U> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[phryneas]

Then maybe show your configureStore call?

[rsheppard-dev]

It's in the store.ts file above

[phryneas]

Ah, missed that one, sorry. That looks correct, tbh. I'm not sure what's wrong here.

[Stephnn0]

did you solve it? I have a similar issue in my code

[raymartbediaformalejo]

same problem, did you solve it?

[jefponte]

Try to remove this credentials: 'include' from your apiSlice.ts

[jefponte]

My code is similar, I removed the line "credentials: 'include'" from apiSlice.ts, and it works. You can see my code here:

https://github.com/jefponte/3s-web
https://github.com/jefponte/3s-web/tree/main/src/features/auth

In fact, I use your code as a model to make my own.

[chump11]

I had this issue but it was caused by an erroneous ApiProvider element in the App.tsx which overwrote the store and removed all the slices.