If you didn't do it previously, you have to generate private keys for the Frontend API.
php phing frontend-generate-new-keys
Authentication is performed via @urql/auth-exchange.
Proper options for authExchange can be obtained with
urql/authExchange.ts and it can be used for server-side rendering and client-side requests.
The following options are created for
Responsible for adding access token as
Authorization: Bearer xxx header to each request made with URQL.
The authorization header is not added when no
authState exists (no previously authenticated user) or when the
RefreshTokens mutation is performed.
RefreshToken mutation is performed, the access token can be already invalid, and FE API blocks every request with an invalid access token.
Check whether an error returned from the API is an authentication error (e.g. HTTP response status code is 401).
This function parses the refresh token from the token cookie and tries to refresh the access token. It uses
setTokensToCookies to both refresh them and store them in a cookie. In the case of a successful refresh, tokens are immediately available for subsequent requests.
While the URQL is refreshing tokens, all other calls are paused. After a successful refresh, previously forbidden requests are re-executed with the new access token.
For logging the user in/out, we can use the
const [[loginResult, login]] = useAuth(); login(email: string, password: string);
This function calls the API mutation with the provided email and password.
If everything is OK, the user is logged in.
refreshToken are then stored in the cookie, and the Zustand state is updated with information that the user is logged in.
const [, [, logout]] = useAuth(); logout();
Zustand state is updated with information that the user is no longer authenticated, and tokens are deleted from the cookie.