Most of the applications we had the chance to work on required some sort of authentication, and having a bad approach to do it can lead to a lot of problems. The starter kit comes with the basics and mostly what you need to start with authentication in your application.
As Authentication is global to the application, we end up using Zustand to manage the authentication state of the application.
Zustand is a state management library that is very simple to use and highly performant. It is also easy to integrate with React and works better than a simple context API, as it offers additional features such as selectors to prevent unnecessary re-renders.
Zustand works very well with TypeScript and can be easily used outside React Three, which means more flexibility.
As mentioned earlier, we use Zustand to manage the authentication state of the application. The authentication store is located in
src/store/auth and is utilized for managing the authentication state of the application.
The store is composed of 2 states and 3 actions:
status: The status of the authentication. It can be
idle: Still not sure if the user is authenticated or not (when we are fetching tokens from the storage)
signOut: The user is not authenticated
signIn: The user is authenticated
useToken: The token of the user. It is used to authenticate the user to the API. It is stored in the storage of the device and we use it to hydrate the authentication status state when the application is started.
For the Demo app
useTokenis a simple object that contains the
refreshToken. You can add more fields if you update the
signIn: TThe function performs user sign-in. It accepts a token as a parameter, sets the token state, stores it locally, and updates the status to
signOut: The action to sign out the user. It sets the token state to
nulland removes it from the storage as well as setting the status to
hydrate: The action to hydrate the authentication status state. We call this action when the application is started to check if the user is authenticated or not. It fetches the token from the storage and sets the status to
signInif the token is not
signOutif the token is
Use Authentication store
You guessed it, you only need to import the store from
@/core and use it in your component or even call store actions from outside React.
Let’s imagine we have a simple application that has a login navigator and a home navigator. The home navigator is only accessible if the user is authenticated, while the login navigator is accessible if the user is not authenticated.
In this case, you only need to retrieve the status from the authentication store and display the appropriate navigation based on the status.