What happens when the access token expires

[mlmarius]

Hi!

Looking through the sources of the backend and frontend I can't figure out what happens when the JWT access token expires. Is there a strategy in place to extend the access token if the user is using it frequently?

[csmcallister]

When the access token expires, a user would need to login again, sending a request to the backend's /login/access-token route to get a new access token.

[emsi]

@csmcallister: Where in the code it is actually enforced?

[csmcallister]

@emsi Take a look here first:

https://github.com/tiangolo/full-stack-fastapi-postgresql/blob/490c554e23343eec0736b06e59b2108fdd057fdc/%7B%7Bcookiecutter.project_slug%7D%7D/backend/app/app/api/api_v1/endpoints/login.py#L36

Then follow the core.security import to here:

https://github.com/tiangolo/full-stack-fastapi-postgresql/blob/490c554e23343eec0736b06e59b2108fdd057fdc/%7B%7Bcookiecutter.project_slug%7D%7D/backend/app/app/core/security.py#L15

As you can see there, the expiration is either pulled in from the app settings or can be overridden with a custom value. The jwt library is responsible for taking in that expiration value. Their docs explain how expiration is determined and enforced: https://pyjwt.readthedocs.io/en/latest/usage.html

[maximiliancw]

@emsi stumbled upon this today. In addition to @csmcallister's hints, you can use the /login/test-token endpoint (or any other one for that matter) to check if you're current token is still working. It feels a bit hacky though...

[hollowdew]

Is there something planned to handle the expiration?
Like implement a refresh endpoint in the backend and call the endpoint in the frontend?

[danieldiamond]

Yeah I'm definitely experiencing and endless loop of 403 Forbidden requests to http://localhost/api/v1/users/me when attempting to access the dashboard with an expired access_token.

It seems that, it doesn't actually check if token is expired, only that it is present.

full-stack-fastapi-template/frontend/src/hooks/useAuth.ts

Lines 16 to 18 in 5005e5a

	const isLoggedIn = () => {
	return localStorage.getItem("access_token") !== null
	}

[abrichr]

Same issue here. If the user leaves the browser window open for a while then comes back, the app appears to be broken, i.e. the backend returns 403, but the frontend doesn't report this to the user, only hangs.

Suggestions:

1. Add a refresh token endpoint on the backend. The frontend should automatically request a new access token when the current one is about to expire or has expired, using the refresh token. This prevents 403 errors caused by expired tokens.

2. If a 403 error is returned for any other reason, the frontend should gracefully handle it by providing a clear message to the user and/or redirecting them to the login page.

Edit: here's a patch for the frontend (untested):

diff --git a/frontend/src/client/core/request.ts b/frontend/src/client/core/request.ts
index 080a6f4..f5700d9 100644
--- a/frontend/src/client/core/request.ts
+++ b/frontend/src/client/core/request.ts
@@ -7,6 +7,8 @@ import type { ApiResult } from './ApiResult';
 import { CancelablePromise } from './CancelablePromise';
 import type { OnCancel } from './CancelablePromise';
 import type { OpenAPIConfig } from './OpenAPI';
+import useAuth from '../../hooks/useAuth';
+import useCustomToast from '../../hooks/useCustomToast';
 
 export const isString = (value: unknown): value is string => {
 	return typeof value === 'string';
@@ -197,7 +199,22 @@ export const sendRequest = async <T>(
 	}
 
 	try {
-		return await axiosClient.request(requestConfig);
+		const response = await axiosClient.request(requestConfig);
+
+		// Handle 403 Forbidden error
+		if (response.status === 403) {
+			const auth = useAuth();
+			const showToast = useCustomToast();
+
+			// Logout and notify the user
+			auth.logout();
+			showToast("Session expired", "Your session has expired. Please log in again.", "error");
+
+			// Stop further processing
+			return response;
+		}
+
+		return response;
 	} catch (error) {
 		const axiosError = error as AxiosError<T>;
 		if (axiosError.response) {

frontend.patch

[storenth]

Similar issue found in case of start-stop the backend, so ah the same behaviour take into a place when token will expire. Spinner goes into an endless loop.

[storenth]

After some experiments with expired/Signature verification failed exceptions, faced with issue that the project need refresh token mechanism as @hollowdew and @abrichr says above, I'm also will looking to see this stuff here guys, can anyone share some sketches?