FlutterFlow Docs
Troubleshooting GuidesDocs Feedback
Search
⌃K
Links

Login

This action provides users with multiple login options to access their accounts. Users can choose to log in with their email and password, connect their social media accounts for easy access, log in as an anonymous user for a limited experience, or use a JSON Web Token (JWT) for secure authentication.
This flexibility in login options ensures that users can access their accounts using their preferred method, leading to a better user experience overall.

Types of login

You can add the following login options to your app:

Email login

Ensure you have enabled the 'Authentication' in your Firebase project. See detailed instructions here.
Follow the steps below to add email login action:
  1. 1.
    Select the widget (e.g., Button) on which you want to add the action.
  2. 2.
    Select Actions from the properties panel (the right menu), If it's the first action, click + Add Action button. Otherwise, click the "+" button below the previous action tile (inside Action Flow Editor) and select Add Action.
  3. 3.
    Search and select the Login (under Backend/Database > Firebase Authentication) action.
  4. 4.
    Set Auth Provider to Email.
  5. 5.
    Set the Email Field dropdown to the widget name that accepts email (e.g., TextFieldEmail).
  6. 6.
    Set the Password Field dropdown to the widget name that accepts a password (e.g., TextFieldPassword).
Adding Email login
Adding Email login

Defining JWT Token login action

JWT token authentication demo

Prerequisites

Before you add this action, you need to have an API that accepts user credentials and returns a JWT token. Check the detailed guide on adding the JWT token authentication.
Go to your project page on FlutterFlow and follow the steps below to define the Action to any widget.
  • Select the Widget (e.g., Sign In) on which you want to define the action.
  • Select Actions from the Properties panel (the right menu), and click Open. This will open an Action flow Editor in a new popup window.
    • Click on the + Add Action.
    • On the right side, search and select the API Call (under Backend/Database) action.
    • Select the API Call Name.
    • Click on the + Parameter button.
      • Select the Parameter Name (e.g., email or username) and set its Value Source to From Variable.
      • Click on UNSET and set it to Widget State -> TextField (that accepts email or username).
    • Similarly, set the parameter for the password.
    • Provide the Action Output Variable Name. This will be used to check if the call succeeds and retrieve the token.
    • Move to the left side, click on the + button, and select Add Conditional.
    • Inside the Set Condition for Action, select the Action Outputs -> Action Output Variable Name (that you specified in the API call section).
    • Set the API Response Options to Succeeded and click Confirm.
    • Inside the TRUE section, click on the + button and select Add Action.
    • On the right side, search and select the Log in (under Firebase Authentication) action.
    • Set the Auth Provider to JWT token.
    • Click on the UNSET and select the Action Outputs -> Action Output Variable Name (that you specified in the API call section).
    • Set the API Response Options to JSON Body and Available Options to JSON Path.
    • Enter the JSON Path to locate the token in API response; such as $.token and click Confirm.
    • (Optional) add the snackbar action to display the success message.
    • (Optional) Inside the False section, add the snackbar action to display the failure message.
Adding JWT token authentication
Previous
Firebase Authentication
Next
Create Account
Last modified 2mo ago