There are a lot of Flutter authentication examples using BloC and Go_Router with Firebase or Google IAM. In this article we will write a Flutter web application using Auth0 for authentication, BLoC for state management and Go_Router for navigation.
The Auth0 Identity Access Management provides SSO, IAM, MFA and Universal Login for a wide range of languages and frameworks. Our Flutter web application here will use the auth0_flutter package to enable authentication.
Let’s get started.
Auth0 Account Setup
If you don’t have an Auth0 account, it’s easy to sign up for a free plan with just an email address (Sign Up — Auth0).
After logging in with your new account, you will be presented with the Auth0 dashboard:
From the side menu, click Applications. The dashboard will list two applications already created for you:
- Auth0 Account Management API Management Client
- Default App
We will use the Default App instead of creating a new one to get us up and running quickly.
The Default App is pre-configured with some default values but we will customize the following entries:
You might be wondering about the localhost references above. These are necessary because Flutter will launch Chrome on the desktop when we run the application later. It will open the browser using the http://localhost:3000 url.
We will also need the Domain and Client ID in the Basic Information section when we create the .env file. The information will be used to instantiate Auth0 in the application.
Create a User
In the Auth0 dashboard, go to Users in User Management and create a new user. Choose Username-Password-Authentication for the Connection.
That’s the minimum that we need to do for the Auth0 setup. Time to build the app!
If you prefer, you can download the complete source here and follow along.
Create the Web Application
Let’s go ahead and create the Flutter starter app with web as the target platform:
>flutter create — platforms=web flutter_web_auth0
Create the .env file
Open the project with your IDE and create a hidden file called .env in the root folder. Enter the following variables:
AUTH0_DOMAIN=<Domain of Default App>
AUTH0_CLIENT_ID=<Client ID of Default App>
Copy the values from the Default App settings in the Auth0 dashboard.
Modify the pubspec.yaml file
Add the dependencies in the pubspec.yaml file. Include an entry for the .env file at the bottom.
Create the BloC
If you’re using the VSCode IDE, right-click on the lib folder and choose Bloc: New Bloc to create the Bloc folder. When prompted for the name, type authentication and the Bloc files will be created using this name as the filename prefix.
BloC Authentication Events
There will be three authentication events in our application:
- When the app starts
- When the user logs in
- When the user logs out
These events will be represented in the authentication_event.dart file.
BloC Authentication States
During the course of the user’s login/logout process, the authentication flow will go through several states. We will define these states in the authentication_state.dart file.
BloC Authentication Bloc
The authentication_bloc.dart file will contain the handlers for all the events and logic for the state changes.
When the application starts, it will throw an AuthInit event. The on<AuthInit> handler will instantiate the Auth0Web object and register an Auth0-required callback.
When the user logs in, a LogIn event occurs. The on<Login> handler will call auth0Web.loginWithPopup() to show the Auth0 Universal Login as a popup screen. If the login is successful, a transition to a LoggedIn state takes place and the user’s profile is passed along. Otherwise, the error is logged and a LogIn event is thrown in order to restart the login process.
NOTE: As an alternative, the Auth0 authentication package provides loginWithRedirect() method that redirects to the Universal Login screen instead of showing a popup.
Let’s wrap it up by writing a handler for the LogOut event. Inside the on<LogOut> handler, we will simply call auth0Web.logout().
The BloC logic is now complete and we can move on to build the UI.
Add BloC to the App Widget
We will add BlocProvider and BlocListener inside the build method of the App class. This will allow the login and user profile pages to access the AuthenticationBloc enabling them to generate events and react to state changes during the authentication process.
We will tackle navigation using GoRouter shortly after we write the login and user profile pages first.
Create the Login Page
The login page will be a simple StatelessWidget with just a button that will generate the LogIn event. We will not create our own login form since the Auth0 Universal Login Screen will handle the user interaction.
Create the User Profile Page
After the user logs in successfully, AuthenticationBloc includes the user’s profile in the LoggedIn state object. We will show the user’s properties in the User Profile page.
Add navigation using GoRouter
Let’s now bring the UI together by defining the routes for LoginPage and UserProfilePage. We will encapsulate a GoRouter singleton inside the AppRouter class. To secure the UserProfilePage, let’s define a route guard that checks if the user has logged in successfully.
Modify index.html
Finally, we need to modify index.html in the web folder in order for Auth0 to work. We will add an Auth0-provided javascript code right after the flutter.js script entry.
Run the app
In VSCode, let’s create a launch.json file. It is critical that we set — web-port=3000 to sync with the Auth0 Default App’s settings. We also need to set –web-renderer=html so that the user’s avatar image will show properly on the browser.
Pick a configuration from the dropdown and launch the app or run it from the command line:
>flutter run -d chrome –web-port=3000 –web-renderer=html
If all goes well, you should see the following screens:
Congrats! We’ve created a skeletal Flutter web application using Auth0, BloC and GoRouter and used the user-password-authentication feature of Auth0. Try Auth0’s other authentication mechanisms like social login, OTP, passwordless via SMS and email and multi-factor authentication (MFA). You will be happy to discover how easy it is to configure these options from the Auth0 dashboard.
Download the complete source code here.
Clean Architecture and Multi-platform
I have also created a version of this code according to clean architecture principles. There are nuances in the Auth0 package that need to be addressed when running a single code base for multiple platforms. Check out the code in Github: Flutter Web Authentication Using Clean Architecture and IOS, Android and Web builds.
References:
