Authentication

Overview

This Nuxt plugin is designed to handle authentication logic by managing JWT tokens and user authentication state. It checks for a JWT token in the cookie and, if present, retrieves the associated user data. The plugin integrates with a store to manage user authentication, and it ensures that the authentication state is synchronized across the application.

Setup

1. JWT Token Handling

The plugin looks for a JWT token stored in a cookie (specified by AppCookieNames.CustomerJWT). If a token exists, it attempts to retrieve the user associated with the token.

const auth_token = useCookie(AppCookieNames.CustomerJWT);
if (!auth_token.value || !auth_token.value.value) {
  authStore.user = null;
  return false;
}

If the JWT token is valid, the plugin sets the jwtData state to store the token value and attempts to retrieve the user data by calling authStore.setAuthUserByToken.

2. Fetching Authenticated User

Once the JWT token is found, the plugin sends the token to authStore.setAuthUserByToken to retrieve the authenticated user’s data. If successful, it stores the user data in both authStore.user and authData, ensuring the authentication state is consistent.

const response = await authStore.setAuthUserByToken(auth_token.value.value);

authData.value = null;
if (response && response.id) {
  authStore.user = rootStore.clone(response);
  authData.value = rootStore.clone(response);
}

3. Storing Authentication State

The plugin uses two states (jwtData and authData) to manage the user’s authentication state. jwtData holds the JWT token, while authData holds the user data once retrieved.

const jwtData = useState(AppCookieNames.CustomerJWT);
const authData = useState("authUser");

The plugin checks if jwtData and authData are already populated before attempting to retrieve user data. If both are present, it skips the process.

4. Nullifying Authentication State on Failure

If the token is not found or if the authentication fails (i.e., response.id is not returned), the plugin sets authStore.user to null, effectively logging the user out.

authStore.user = null;

5. Root Store Integration

The plugin uses the rootStore to clone the data (JWT and user data). This ensures that any changes to the data in the store do not affect the original state.

jwtData.value = rootStore.clone(auth_token.value);
authData.value = rootStore.clone(response);

Example Usage

You don’t need to call this plugin explicitly. Once included in your Nuxt app, it will automatically run at the application’s start. The authentication state will be managed and synchronized across the app as needed.

Notes

• JWT Cookie: The plugin relies on the JWT token stored in a cookie named by AppCookieNames.CustomerJWT.
• User Authentication State: The plugin integrates with the authStore to manage and update the authentication state.
• State Synchronization: The rootStore.clone method is used to ensure that the authentication state is safely stored without affecting the original state.
• Asynchronous Call: The plugin performs an asynchronous call to fetch the user data associated with the JWT token.