JWT Token

​JWT token sign-in allows you to log in and use the Firebase services such as Firebase Database and Push notifications using the account created on your own server/backend.
JWT login flow
In JWT token authentication, you must send the login credentials —such as an email and password to your server via API endpoint; your server creates a user account, generates a custom JWT token, and returns it to your app. You use this JWT token to login into the Firebase and use its services.
You can learn more about Firebase and JWT tokens here.
Adding JWT token authentication
Let's build a sample example that uses a JWT token to login and looks like the below:
JWT token authentication
Prerequisites
Before getting started with this section, ensure you have:
Completed all steps in the Firebase Setup section for your project.
Completed Initial setup required for authentication. (Please note: Skip if you have already enabled authentication and created user collection while creating your project with Firebase Setup.)
Adding JWT token authentication comprises of following steps:
1.​Add login API​
2.​Adding login page​
3.​Add login action​
4.​Adding logout action​
5.​Testing authentication​
1. Add login API
You must create an endpoint on your server that accepts email/username and password. If the credentials are valid, it generates the JWT token and passes it back in response. You can generate the JWT token either using the Firebase Admin SDK or a third-party JWT library. You can find the detailed instructions here.
Once you have the login API ready, you can add it to the FlutterFlow by following the instructions here.
It should look similar to the following:
post
/login
Login API to be created on your server
In most cases, you would make the app content available right after creating a new account. Hence, you should also generate and return the JWT token on the success of create account API and use it to login into the Firebase.
If you want to try the JWT token authentication without creating an API endpoint right now, you can generate the JWT token locally for testing.
2. Adding login page
Let's add a sign-in page from the templates and choose the Authenticate Solo Alt from under the Auth tab.
Sign-in page
3. Add login action
The login action includes two actions. First, you'll make an API call to your server. If the Call succeeds, you'll pass the JWT token (returned in API call) inside the JWT Token action.
To add login action, please follow the instructions on how to add JWT token login action.
4. Adding logout action
To log out a user, you can place a button on your home page and add the Logout action.
​Here are the instructions for adding a button with the Logout action.
5. Testing authentication
You can test the Email/Password authentication on a device/emulator and in Run Mode. To use Run Mode, make sure you have completed the Firebase setup.
If you want to test the JWT token but don't have API created yet, you can generate the JWT token locally for testing purposes.
To verify the creation of a new user in Firebase, open the Firebase console, select the Authentication menu and notice the 'userid' (originally created by your server) is added inside the User UID column.
User id added in Firebase
Create a JWT token locally
Sometimes you might want to build and test the JWT authentication before the login or create account API is ready. You can achieve this by creating the JWT token locally and passing it inside the JWT token action.
Use this method only for testing purposes. Ideally, you should be doing this on the server side.
Below are steps to create a JWT token locally using Node.js:
In the Firebase dashboard of your project, navigate to the far left menu. Select Project Settings(
 ) --> Service accounts.
Select Generate new private key. This will open a new popup. Again click Generate key and save the .json file in some folder. You will need it while generating the token.
Now, download and Install node.js.
Open a terminal at the folder where you have saved the .json file and enter this command: npm install firebase-admin. This will install Firebase Admin SDK inside the folder.
In the same folder, create an index.js file and add the below content.
const admin = require('firebase-admin');
const ServiceAccount = require('./[YOUR_SERVICE_ACCOUNT_JSON_FILE_NAME].json');
admin.initializeApp({
	credential: admin.credential.cert(ServiceAccount)
});
​
const uid= 'userid1'; // This user id will be stored in Firebase.
​
admin.auth().createCustomToken(uid)
  .then((customToken) => {
    console.log(customToken);
  })
  .catch((error) => {
    console.log('Error creating custom token:', error);
  });
To run this index.js file inside the terminal (at the same location where this file is located), hit this command: node index.js. This will print the JWT token in the console.
Copy this JWT token, return to FlutterFlow, and save it in the local state variable (String Datatype).
Open the JWT token action, click on UNSET (or a variable if you have already set it) and select the Local State -> variableName (that holds the JWT token).
Passing JWT token from local state
Accessing Firebase Database
Once you log in via the JWT token, the Authenticated User object is available. This object contains the fields (i.e., logged-in user's data), especially User Reference (users ref), that you may need to provide while adding or retrieving Firestore documents. 
Here's an example of how you can use the Authenticated User object to filter the to-do items based on the user who created it.
Accessing Firebase Database
Sending push notifications
Once you log in via the JWT token, the Authenticated User object is available. This object contains the fields (i.e., logged-in user's data), especially User Reference (users ref), that you may need to provide while adding or retrieving Firestore documents. 
When such user reference is stored inside the Firestore documents, you can use them inside the Single or Multiple Recipient while defining the Audience inside the Trigger Push Notification action, as shown in the image below:
Sending push notifications to users created via the JWT token
To learn more about how to use user references for sending push notifications, please check the push notification section.
Anonymous Sign-In
Firestore Database
Last modified 6mo ago