Custom Authentication
Custom authentication allows you to manage auth-related data (login details) while utilizing your own backend to authenticate users.
Concepts
Before diving into Custom Authentication, let's first clarify some key terms we'll encounter. These concepts are essential for understanding how secure access and user verification work.
Authentication Token
An Authentication Token acts as a digital key provided to client apps upon successful login. This key verifies the user's identity for subsequent actions within the app, eliminating the need for repeated login prompts. It ensures secure and streamlined access to the app's features.
Refresh Token
A Refresh Token functions as a secondary mechanism to renew the authentication token without requiring the user to re-enter login credentials. This is particularly useful for maintaining a user's session securely, even when the primary authentication token expires, enhancing both security and user experience.
Token Expiry Time
Token Expiry Time refers to the lifespan of an authentication token. It defines the period during which the token remains valid. This is a critical security measure to prevent unauthorized access, ensuring that tokens are regularly refreshed and authenticated.
Example of Auth using Tokens
For example, when a user logs into an API, the server verifies the submitted credentials and typically responds with both an authentication token (string) and a refresh token (string). The authentication token is short-lived, let's say it's valid for 1 hour. It's used to authenticate API requests. For instance, it might look something like eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9....
If you need to use the token, it will typically be included in an API request, such as accessing a blog post that is only available to logged-in users. In this case, the app makes a request to the API with a header that includes an Authorization header with the authentication token.
After an hour, as determined by the token's expiry time, the authentication token expires. Any attempt to access another post with the expired token will result in a 401 Unauthorized response.
To retrieve a new token, a common practice involves the client app making a request to a specific endpoint, submitting the saved refresh token in the request body. The server then validates the refresh token and responds with a new authentication token.
Thanks to the refresh token, the user can continue accessing the app without the need to log in again. This process enhances security by limiting the lifespan of each token while ensuring a seamless experience for the user.
User UID
User UID stands for User Unique Identifier, a distinct code assigned to each user. This identifier differentiates every user within the system, facilitating personalized and secure interactions with the app's services by linking data and actions to the specific individual.
Adding custom authentication
Let's see how to add custom authentication by building an example that looks like this:
The steps to add custom authentication are as follows:
1. Enabling custom authentication
To enable custom authentication in FlutterFlow:
Turn on the Enable Authentication toggle and set Authentication Type to Custom.
To ensure that your users are directed to the appropriate pages based on their login status, you must set the initial pages.
By default, the Persist Auth Sessions option is enabled, which means users remain logged in until they actively log out. With this option enabled, your app will automatically open to the homepage whenever it's restarted.
After successful authentication, your backend typically sends login details like an authentication token, a refresh token, and user details. To keep the user logged in within your app, you must store this data. You can achieve this by enabling Associate User Data Type and setting User Data Type to the custom Data Type. Note that the structure of your custom Data Type should closely resemble the structure of a successful authentication's JSON response. At the very least, it should include critical fields like the authentication token.
2. Building pages
Let's add a page that allows users to create accounts and log in. To speed up, you can add a page from the template. Here is the page added from the templates, and after some modification, it looks the below:
Also, see how to build a page layout in case you want to build a page from scratch.
3. Authenticate users
On each page, on click of a button, you can add appropriate authentication related API calls. For this example, we use this.
4. Save auth data
After successful authentication, you can save the auth related data using the 'Log in' action. Here's how you do it:
Inside the TRUE branch of the previous API call, add the Log in (under Backend/Database > Custom Authentication) action.
Under the User Auth Properties, you can set values for Authentication Token, Refresh Token, Token Expiry Time, and User UID. Note that for the 'Persist Auth Sessions' option to work, you must set the Authentication Token.
Set User Data to store the result of the previous API call (i.e., auth details) in a custom Data Type. See how to get the JSON into Data Type.
5. Access auth data
To access the auth data after a user logs in, open the set from variable menu > Authenticated User > choose from Auth Properties or User Data Fields.
6. Update auth data
You may want to update the auth data in situations like updating the access token with the new one after it has expired. You can do so using the Update Authenticated User action.
Here's exactly how you do it:
Once you get the 401 status code, i.e., unauthorized user error, ensure to make an API call to renew the access token.
On getting the new access token, add a new action named Update Authenticated User.
Under the User Auth Properties, you can update a value for the Authentication Token with a new access token.
7. Logout
You can logout a user by adding the Log out (under Backend/Database > Custom Authentication) action.
Last Updated Date: December 27, 2023
Last updated
