Flutter Authentication By Example
Published on June 3, 2024This Dart guide will help you learn how to secure a Flutter mobile application using token-based authentication. You'll learn how to use Flutter to implement the following security features:
- Adding user login, signup, and logout to Flutter applications.
- Making API calls from a Flutter application to request data from a protected API.
- Getting user profile information to personalize a Flutter user interface.
This guide uses the Auth0 Flutter SDK, which provides developers with a high-level API to handle many authentication implementation details. You can now secure your Flutter applications following security best practices while writing less code.
How Does Auth0 Work?
With the help of Auth0, you don't need to be an expert on identity protocols, such as OAuth 2.0 or OpenID Connect, to understand how to secure your web application stack.
Quick Flutter Setup
You first integrate your Flutter application with Auth0. Your application will then redirect users to a customizable Auth0 login page when they need to log in. Once your users log in successfully, Auth0 redirects them back to your Flutter app, returning JSON Web Tokens (JWTs) containing their authentication and user information.
Get the Flutter Starter Application
We have created a starter project using the Flutter CLI to help you learn Flutter security concepts through hands-on practice. You can focus on building the components and services to secure your application.
Start by cloning the mobile_flutter_dart_hello-world
repository on its starter
branch:
Once you clone the repo, make mobile_flutter_dart_hello-world
your current directory:
cd mobile_flutter_dart_hello-world
Run the application on Android or iOS. Start by launching the Android emulator or iOS simulator or connecting an actual device to your machine.
Verify that Flutter detects any connected devices, emulators, or simulators by running the following command:
If you see the target device in the list of devices from the previous command, run the following command to launch the application on that device:
flutter run
You are ready to start implementing user authentication in this Flutter project. First, you'll need to configure the application to connect successfully to Auth0. Afterward, you'll use the Auth0 Flutter SDK to log in/log out, display user profile information, and request protected data from an external API server to hydrate some of the application pages.
Configure Flutter with Auth0
Follow these steps to get started with the Auth0 Identity Platform quickly:
Sign up and create an Auth0 Application
A free account also offers you:
- Auth0 Universal Login for Web, iOS & Android.
- Up to 2 social identity providers like Google, GitHub, and Twitter.
- Up to 3 Actions, Rules, & Hooks to customize and extend Auth0's capabilities.
During signup, you create an Auth0 Tenant representing the product or service you are adding authentication to.
Once you sign in, Auth0 takes you to the Dashboard. In the left sidebar menu, click on "Applications".
Then, click the "Create Application" button. A modal dialog box will appear, asking you to provide a name for the application and choose its type. Use the following values:
Auth0 Flutter Code Sample
Click the "Create" button to complete the process. Your Auth0 application page will load.
In the next step, you'll learn how to help Flutter and Auth0 communicate.
What's the relationship between Auth0 Tenants and Auth0 Applications?
Suppose you have a photo-sharing Flutter app called "FL-Gram". You then would create an Auth0 tenant called fl-gram
. From a customer perspective, FL-Gram is that customer's product or service.
Now, say that FL-Gram is available on three platforms: web as a single-page application and Android and iOS as a native mobile application. If each platform needs authentication, you need to create three Auth0 applications to provide the product with everything it needs to authenticate users through that platform.
FL-Gram users belong to the Auth0 FL-Gram tenant, which shares them across its Auth0 applications.
Create a communication bridge between Flutter and Auth0
When using the Auth0 Identity Platform, you don't have to build login forms. Auth0 offers a Universal Login Page to reduce the overhead of adding and managing authentication.
How does Universal Login work?
Your Flutter application will redirect users to Auth0 whenever they trigger an authentication request. Auth0 will present them with a login page. Once they log in, Auth0 will redirect them back to your Flutter application. For that redirecting to happen securely, you must specify in your Auth0 Application Settings the URLs to which Auth0 can redirect users once it authenticates them.
Get the Auth0 Domain and Auth0 Client ID
From the Auth0 Application Settings page, you need the Auth0 Domain and Client ID values to allow your Flutter application to use the communication bridge you created.
What exactly is an Auth0 Domain and an Auth0 Client ID?
Domain
When you created a new Auth0 account, Auth0 asked you to pick a name for your tenant. This name, appended with auth0.com
, is your Auth0 Domain. It's the base URL that you will use to access the Auth0 APIs and the URL where you'll redirect users to log in.
Client ID
Each application is assigned a Client ID upon creation, which is an alphanumeric string, and it's the unique identifier for your application (such as q8fij2iug0CmgPLfTfG1tZGdTQyGaTUA
). You cannot modify the Client ID. You will use the Client ID to identify the Auth0 Application to which the Auth0 Flutter SDK needs to connect.
Warning: Another critical piece of information present in the "Settings" is the Client Secret. This secret protects your resources by only granting tokens to requestors if they're authorized. Think of it as your application's password, which must be kept confidential at all times. If anyone gains access to your Client Secret, they can impersonate your application and access protected resources.
Head back to your Auth0 application page and click on the "Settings" tab.
Locate the "Basic Information" section and follow these steps to get the Auth0 Domain and Auth0 Client ID values:
When you enter a value in the input fields present on this page, any code snippet that uses such value updates to reflect it. Using the input fields makes it easy to copy and paste code as you follow along.
As such, enter the "Domain" and "Client ID" values in the following fields to set up your native application in the next section:
These variables let your Flutter application identify itself as an authorized party to interact with the Auth0 authentication server.
Create a env.json
file in the Flutter project's directory and add the following to it:
{"AUTH0_DOMAIN": "AUTH0-DOMAIN","AUTH0_CLIENT_ID": "AUTH0-CLIENT-ID"}
Next, create a lib/helpers/constants.dart
file to allow easy access to the environment variables setup in the previous setup from your Flutter application.
const auth0Domain = String.fromEnvironment('AUTH0_DOMAIN');const auth0ClientId = String.fromEnvironment('AUTH0_CLIENT_ID');
Once you reach the "Call a Protected API from Flutter" section of this guide, you'll learn how to use API_SERVER_URL
along with an Auth0 Audience value to request protected resources from an external API that is also protected by Auth0.
Do not close the Auth0 Application yet. You'll need some of its information in the next section.
Set Auth0 allowed URLs (running on Android and iOS)
Click on the "Settings" tab of your Auth0 Application page, locate the "Application URIs" section, and fill in the following values:
com.example.helloworld
is your application's package ID. The package ID will be used as the default bundle ID on iOS. On Android, this automatically setshelloworld
as the default scheme. This was configured when creating the Flutter application. You'll be using the following values for Auth0's callback and logout urls:
- Android:
<SCHEME>://<AUTH0_DOMAIN>/android/<PACKAGE_NAME>/callback
- iOS:
<BUNDLE_ID>://<AUTH0_DOMAIN>/ios/<BUNDLE_ID>/callback
helloworld://AUTH0-DOMAIN/android/com.example.helloworld/callback, com.example.helloworld://AUTH0-DOMAIN/ios/com.example.helloworld/callback
The above value is the URL that Auth0 can use to redirect your users after they successfully log in.
helloworld://AUTH0-DOMAIN/android/com.example.helloworld/callback, com.example.helloworld://AUTH0-DOMAIN/ios/com.example.helloworld/callback
The above value is the URL that Auth0 can use to redirect your users after they log out.
Click the "Save Changes" button near the lower right corner of the page.
Install and Set Up the Auth0 Flutter SDK
Execute the following command to install the Auth0 Flutter SDK:
flutter pub add auth0_flutter
The Auth0 Flutter SDK exposes several methods, variables, and types that help you integrate Auth0 with your Flutter application idiomatically.
Create lib/services/auth_service.dart
and add the following code:
import 'package:auth0_flutter/auth0_flutter.dart';import 'package:helloworld/helpers/constants.dart';class AuthService {static final AuthService instance = AuthService._internal();factory AuthService() => instance;Auth0 auth0 = Auth0(auth0Domain, auth0ClientId);UserProfile? profile;AuthService._internal();}
The authentication process won't happen within your Flutter application layer when using Auth0. Your Flutter application will redirect your users to the Auth0 Universal Login page, where Auth0 will ask them for credentials and redirect them back to your application with the result of the authentication process.
User authentication is a mechanism that controls who can access your application. You can integrate your Flutter application with Auth0 to prevent users who have not logged in from accessing a profile
or admin
page.
Setup iOS CFBundleURLTypes
iOS requires additional setup to enable the app to respond to callback and logout URL calls. Update the Info.plist
file (located in ios/Runner/
) to include the CFBundleURLTypes
property with the following configurations:
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd"><plist version="1.0"><dict><key>CFBundleDevelopmentRegion</key><string>$(DEVELOPMENT_LANGUAGE)</string><key>CFBundleDisplayName</key><string>Helloworld</string><key>CFBundleExecutable</key><string>$(EXECUTABLE_NAME)</string><key>CFBundleIdentifier</key><string>$(PRODUCT_BUNDLE_IDENTIFIER)</string><key>CFBundleInfoDictionaryVersion</key><string>6.0</string><key>CFBundleName</key><string>helloworld</string><key>CFBundlePackageType</key><string>APPL</string><key>CFBundleShortVersionString</key><string>$(FLUTTER_BUILD_NAME)</string><key>CFBundleSignature</key><string>????</string><key>CFBundleVersion</key><string>$(FLUTTER_BUILD_NUMBER)</string><key>LSRequiresIPhoneOS</key><true/><key>UILaunchStoryboardName</key><string>LaunchScreen</string><key>UIMainStoryboardFile</key><string>Main</string><key>UISupportedInterfaceOrientations</key><array><string>UIInterfaceOrientationPortrait</string><string>UIInterfaceOrientationLandscapeLeft</string><string>UIInterfaceOrientationLandscapeRight</string></array><key>UISupportedInterfaceOrientations~ipad</key><array><string>UIInterfaceOrientationPortrait</string><string>UIInterfaceOrientationPortraitUpsideDown</string><string>UIInterfaceOrientationLandscapeLeft</string><string>UIInterfaceOrientationLandscapeRight</string></array><key>UIViewControllerBasedStatusBarAppearance</key><false/><key>CADisableMinimumFrameDurationOnPhone</key><true/><key>UIApplicationSupportsIndirectInputEvents</key><true/><key>CFBundleURLTypes</key><array><dict><key>CFBundleTypeRole</key><string>Editor</string><key>CFBundleURLName</key><string>auth0</string><key>CFBundleURLSchemes</key><array><string>$(PRODUCT_BUNDLE_IDENTIFIER)</string></array></dict></array></dict></plist>
The Auth0 SDK requires a minimum iOS deployment version of 13.0. Open ios/Podfile
and set the platform:ios
property to 13.0 or higher.
# Uncomment this line to define a global platform for your projectplatform :ios, '13.0'# CocoaPods analytics sends network stats synchronously affecting flutter build latency.ENV['COCOAPODS_DISABLE_STATS'] = 'true'project 'Runner', {'Debug' => :debug,'Profile' => :release,'Release' => :release,}def flutter_rootgenerated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'Generated.xcconfig'), __FILE__)unless File.exist?(generated_xcode_build_settings_path)raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure flutter pub get is executed first"endFile.foreach(generated_xcode_build_settings_path) do |line|matches = line.match(/FLUTTER_ROOT\=(.*)/)return matches[1].strip if matchesendraise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Generated.xcconfig, then run flutter pub get"endrequire File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root)flutter_ios_podfile_setuptarget 'Runner' douse_frameworks!use_modular_headers!flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__))target 'RunnerTests' doinherit! :search_pathsendendpost_install do |installer|installer.pods_project.targets.each do |target|flutter_additional_ios_build_settings(target)# workaround for the following error# Swift Compiler Error (Xcode): Compiling for iOS 12.0, but module 'Auth0' has a minimum deployment target of iOS 13.0:target.build_configurations.each do |config|config.build_settings.delete 'IPHONEOS_DEPLOYMENT_TARGET'endendend
Setup Android string resources
Create a strings.xml
file in android/app/src/main/res/values
and replace the {SCHEME}
placeholder with the scheme of your Android application, for example, if you are using the same values as suggested in this guide, use: helloworld
.
<?xml version="1.0" encoding="utf-8"?><resources><string name="com_auth0_domain">AUTH0-DOMAIN</string><string name="com_auth0_scheme">{SCHEME}</string></resources>
The Auth0 SDK requires manifest placeholders to define an intent-filter
, which captures the authentication callback URL. You must set the Auth0 tenant domain and the callback URL scheme.
Update your android/app/build.gradle
to include the auth0Domain
and auth0Scheme
manifest placeholders.
def localProperties = new Properties()def localPropertiesFile = rootProject.file('local.properties')if (localPropertiesFile.exists()) {localPropertiesFile.withReader('UTF-8') { reader ->localProperties.load(reader)}}def flutterRoot = localProperties.getProperty('flutter.sdk')if (flutterRoot == null) {throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")}def flutterVersionCode = localProperties.getProperty('flutter.versionCode')if (flutterVersionCode == null) {flutterVersionCode = '1'}def flutterVersionName = localProperties.getProperty('flutter.versionName')if (flutterVersionName == null) {flutterVersionName = '1.0'}apply plugin: 'com.android.application'apply plugin: 'kotlin-android'apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"android {namespace "com.example.helloworld"compileSdkVersion flutter.compileSdkVersionndkVersion flutter.ndkVersioncompileOptions {sourceCompatibility JavaVersion.VERSION_1_8targetCompatibility JavaVersion.VERSION_1_8}kotlinOptions {jvmTarget = '1.8'}sourceSets {main.java.srcDirs += 'src/main/kotlin'}defaultConfig {// TODO: Specify your own unique Application IDapplicationId "com.example.helloworld"// You can update the following values to match your application needs.minSdkVersion flutter.minSdkVersiontargetSdkVersion flutter.targetSdkVersionversionCode flutterVersionCode.toInteger()versionName flutterVersionNamemanifestPlaceholders['auth0Domain'] = "@string/com_auth0_domain"manifestPlaceholders['auth0Scheme'] = "@string/com_auth0_scheme"}buildTypes {release {// TODO: Add your own signing config for the release build.// Signing with the debug keys for now, so `flutter run --release` works.signingConfig signingConfigs.debug}}}flutter {source '../..'}dependencies {implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"}
The Auth0 SDK also requires a minimum SDK version to be 21+. Update the minSdkVersion
property in the build.gradle
to 21
def localProperties = new Properties()def localPropertiesFile = rootProject.file('local.properties')if (localPropertiesFile.exists()) {localPropertiesFile.withReader('UTF-8') { reader ->localProperties.load(reader)}}def flutterRoot = localProperties.getProperty('flutter.sdk')if (flutterRoot == null) {throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.")}def flutterVersionCode = localProperties.getProperty('flutter.versionCode')if (flutterVersionCode == null) {flutterVersionCode = '1'}def flutterVersionName = localProperties.getProperty('flutter.versionName')if (flutterVersionName == null) {flutterVersionName = '1.0'}apply plugin: 'com.android.application'apply plugin: 'kotlin-android'apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"android {namespace "com.example.helloworld"compileSdkVersion flutter.compileSdkVersionndkVersion flutter.ndkVersioncompileOptions {sourceCompatibility JavaVersion.VERSION_1_8targetCompatibility JavaVersion.VERSION_1_8}kotlinOptions {jvmTarget = '1.8'}sourceSets {main.java.srcDirs += 'src/main/kotlin'}defaultConfig {// TODO: Specify your own unique Application IDapplicationId "com.example.helloworld"// You can update the following values to match your application needs.minSdkVersion 21targetSdkVersion flutter.targetSdkVersionversionCode flutterVersionCode.toInteger()versionName flutterVersionNamemanifestPlaceholders['auth0Domain'] = "@string/com_auth0_domain"manifestPlaceholders['auth0Scheme'] = "@string/com_auth0_scheme"}buildTypes {release {// TODO: Add your own signing config for the release build.// Signing with the debug keys for now, so `flutter run --release` works.signingConfig signingConfigs.debug}}}flutter {source '../..'}dependencies {implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"}
Auth0 and Flutter connection set
You have completed setting up an authentication module that your Flutter application can consume. All that is left is for you to continue building up the starter project throughout this guide by implementing Flutter components that trigger and manage the authentication flow.
Feel free to dive deeper into the Auth0 Documentation to learn more about how Auth0 helps you save time implementing and managing identity.
Add User Login to Flutter
The steps on how to build a Flutter login form or login page are complex. You can save development time by using a login page hosted by Auth0 that has a built-in login form that supports different types of user authentication: username and password, social login, and Multi-Factor Authentication (MFA). You just need to create a button that takes users from your Flutter application to the login page.
Start by adding a login
function in lib/services/auth_service.dart
import 'package:auth0_flutter/auth0_flutter.dart';import 'package:helloworld/helpers/constants.dart';class AuthService {static final AuthService instance = AuthService._internal();factory AuthService() => instance;Auth0 auth0 = Auth0(auth0Domain, auth0ClientId);UserProfile? profile;AuthService._internal();Future login() async {final credentials = await auth0.webAuthentication().login();profile = credentials.user;return profile;}}
Add a login button in lib/widgets/app_drawer.dart
and connect it to the login()
function set up in the previous step.
import 'package:flutter/material.dart';import 'package:flutter_svg/flutter_svg.dart';import 'package:helloworld/pages/admin.dart';import 'package:helloworld/pages/home.dart';import 'package:helloworld/pages/profile.dart';import 'package:helloworld/pages/protected.dart';import 'package:helloworld/pages/public.dart';import 'package:helloworld/services/auth_service.dart';class AppDrawer extends StatefulWidget {final String activePage;const AppDrawer(this.activePage, {super.key});@overrideState<AppDrawer> createState() => _AppDrawerState();}class _AppDrawerState extends State<AppDrawer> {@overridevoid initState() {super.initState();}@overrideWidget build(BuildContext context) {const auth0Logo ='https://cdn.auth0.com/blog/hub/code-samples/hello-world/auth0-logo.svg';void login() async {final navigator = Navigator.of(context);await AuthService.instance.login();navigator.pop();navigator.pushReplacement(MaterialPageRoute(builder: (context) => const ProfilePage()));}return Drawer(backgroundColor: Colors.black,width: double.infinity,child: ListView(padding: EdgeInsets.zero,children: ListTile.divideTiles(context: context, tiles: [Column(children: [const SizedBox(height: 60,),Padding(padding: const EdgeInsets.only(left: 10, bottom: 5),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [GestureDetector(child: SvgPicture.network(auth0Logo,fit: BoxFit.fitHeight,height: 24),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const HomePage()));}),const CloseButton(color: Colors.white,)]),)]),ListTile(title: Text('Profile',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'profile' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const ProfilePage()));},),ListTile(title: Text('Public',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'public' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const PublicPage()));},),ListTile(title: Text('Protected',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness:widget.activePage == 'protected' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const ProtectedPage()));},),ListTile(title: Text('Admin',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'admin' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),shape: const Border(bottom: BorderSide(color: Color(0xffB9B3BD), width: 1)),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const AdminPage()));},),Padding(padding: const EdgeInsets.all(20),child:Row(mainAxisAlignment: MainAxisAlignment.center, children: [ElevatedButton(onPressed: () {login();},style: ElevatedButton.styleFrom(// #635DFFbackgroundColor: const Color.fromRGBO(99, 93, 255, 1), // Background colorshape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5),),),child: const Text('Log In',style: TextStyle(color: Colors.white)),)]))]).toList(),));}}
In the next section, you'll add another button to the drawer that users can click to sign up for your application.
Add User Sign-Up to Flutter
You can make users land directly on a sign-up page instead of a login page by specifying the screen_hint=signup
property in the parameters
object of login()
:
authorizationParams: {screen_hint: "signup",}
To see this in practice, add a signup()
function to lib/services/auth_service.dart
with the following code:
import 'package:auth0_flutter/auth0_flutter.dart';import 'package:helloworld/helpers/constants.dart';class AuthService {static final AuthService instance = AuthService._internal();factory AuthService() => instance;Auth0 auth0 = Auth0(auth0Domain, auth0ClientId);UserProfile? profile;AuthService._internal();Future login() async {final credentials = await auth0.webAuthentication().login();profile = credentials.user;return profile;}Future signup() async {final credentials = await auth0.webAuthentication().login(parameters: {'screen_hint': 'signup',});profile = credentials.user;return profile;}}
Add a signup button to lib/widgets/app_drawer.dart
and connect the signup button to the signup()
function setup in the previous step.
import 'package:flutter/material.dart';import 'package:flutter_svg/flutter_svg.dart';import 'package:helloworld/pages/admin.dart';import 'package:helloworld/pages/home.dart';import 'package:helloworld/pages/profile.dart';import 'package:helloworld/pages/protected.dart';import 'package:helloworld/pages/public.dart';import 'package:helloworld/services/auth_service.dart';class AppDrawer extends StatefulWidget {final String activePage;const AppDrawer(this.activePage, {super.key});@overrideState<AppDrawer> createState() => _AppDrawerState();}class _AppDrawerState extends State<AppDrawer> {@overridevoid initState() {super.initState();}@overrideWidget build(BuildContext context) {const auth0Logo ='https://cdn.auth0.com/blog/hub/code-samples/hello-world/auth0-logo.svg';void login() async {final navigator = Navigator.of(context);await AuthService.instance.login();navigator.pop();navigator.pushReplacement(MaterialPageRoute(builder: (context) =>const ProfilePage()));}void signup() async {final navigator = Navigator.of(context);await AuthService.instance.signup();navigator.pop();navigator.pushReplacement(MaterialPageRoute(builder: (context) =>const ProfilePage()));}return Drawer(backgroundColor: Colors.black,width: double.infinity,child: ListView(padding: EdgeInsets.zero,children: ListTile.divideTiles(context: context, tiles: [Column(children: [const SizedBox(height: 60,),Padding(padding: const EdgeInsets.only(left: 10, bottom: 5),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [GestureDetector(child: SvgPicture.network(auth0Logo,fit: BoxFit.fitHeight,height: 24),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const HomePage()));}),const CloseButton(color: Colors.white,)]),)]),ListTile(title: Text('Profile',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'profile' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const ProfilePage()));},),ListTile(title: Text('Public',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'public' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const PublicPage()));},),ListTile(title: Text('Protected',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness:widget.activePage == 'protected' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const ProtectedPage()));},),ListTile(title: Text('Admin',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'admin' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),shape: const Border(bottom: BorderSide(color: Color(0xffB9B3BD), width: 1)),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const AdminPage()));},),Padding(padding: const EdgeInsets.all(20),child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [OutlinedButton(onPressed: () {signup();},style: OutlinedButton.styleFrom(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5),),),child: const Text('Sign Up',style: TextStyle(color: Colors.white)),),const SizedBox(width: 16,),ElevatedButton(onPressed: () {login();},style: ElevatedButton.styleFrom(// #635DFFbackgroundColor: const Color.fromRGBO(99, 93, 255, 1), // Background colorshape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5),),),child: const Text('Log In',style: TextStyle(color: Colors.white)),)]))]).toList(),));}}
Using the Auth0 Signup feature requires you to enable the Auth0 New Universal Login Experience in your tenant.
Open the Universal Login section of the Auth0 Dashboard and choose the "New" option under the "Experience" subsection.
Scroll down and click on the "Save Changes" button.
The difference between the login and sign-up user experience will be more evident once you integrate those components with your Flutter application and see them in action. You'll do that in the following sections.
Add User Logout to Flutter
You can log out users from your Flutter application by logging them out of their Auth0 sessions using the logout()
method from the Auth0 Flutter SDK.
To see this in practice, add a logout()
function in lib/services/auth_service.dart
with the following code:
import 'package:auth0_flutter/auth0_flutter.dart';import 'package:helloworld/helpers/constants.dart';class AuthService {static final AuthService instance = AuthService._internal();factory AuthService() => instance;Auth0 auth0 = Auth0(auth0Domain, auth0ClientId);UserProfile? profile;AuthService._internal();Future login() async {final credentials = await auth0.webAuthentication().login();profile = credentials.user;return profile;}Future signup() async {final credentials = await auth0.webAuthentication().login(parameters: {'screen_hint': 'signup',});profile = credentials.user;return profile;}Future logout() async {await auth0.webAuthentication().logout();profile = null;return;}}
When using the logout()
method, the Auth0 Flutter SDK clears the application session and redirects to the Auth0 /logout
endpoint to clear the Auth0 session under the hood. By default, the SDK's logout()
method opens up the default browser application on the user's device to perform a logout, like the login sequence.
Add a logout button to lib/widgets/app_drawer.dart
and connect the logout button to the logout()
function setup in the previous step.
import 'package:flutter/material.dart';import 'package:flutter_svg/flutter_svg.dart';import 'package:helloworld/pages/admin.dart';import 'package:helloworld/pages/home.dart';import 'package:helloworld/pages/profile.dart';import 'package:helloworld/pages/protected.dart';import 'package:helloworld/pages/public.dart';import 'package:helloworld/services/auth_service.dart';class AppDrawer extends StatefulWidget {final String activePage;const AppDrawer(this.activePage, {super.key});@overrideState<AppDrawer> createState() => _AppDrawerState();}class _AppDrawerState extends State<AppDrawer> {@overridevoid initState() {super.initState();}@overrideWidget build(BuildContext context) {const auth0Logo ='https://cdn.auth0.com/blog/hub/code-samples/hello-world/auth0-logo.svg';void login() async {final navigator = Navigator.of(context);await AuthService.instance.login();navigator.pop();navigator.pushReplacement(MaterialPageRoute(builder: (context) =>const ProfilePage()));}void signup() async {final navigator = Navigator.of(context);await AuthService.instance.signup();navigator.pop();navigator.pushReplacement(MaterialPageRoute(builder: (context) =>const ProfilePage()));}void logout() async {final navigator = Navigator.of(context);await AuthService.instance.logout();navigator.pop();navigator.pushReplacement(MaterialPageRoute(builder: (context) => const HomePage()));}return Drawer(backgroundColor: Colors.black,width: double.infinity,child: ListView(padding: EdgeInsets.zero,children: ListTile.divideTiles(context: context, tiles: [Column(children: [const SizedBox(height: 60,),Padding(padding: const EdgeInsets.only(left: 10, bottom: 5),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [GestureDetector(child: SvgPicture.network(auth0Logo,fit: BoxFit.fitHeight,height: 24),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const HomePage()));}),const CloseButton(color: Colors.white,)]),)]),ListTile(title: Text('Profile',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'profile' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const ProfilePage()));},),ListTile(title: Text('Public',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'public' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const PublicPage()));},),ListTile(title: Text('Protected',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness:widget.activePage == 'protected' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const ProtectedPage()));},),ListTile(title: Text('Admin',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'admin' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),shape: const Border(bottom: BorderSide(color: Color(0xffB9B3BD), width: 1)),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const AdminPage()));},),Padding(padding: const EdgeInsets.all(20),child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [OutlinedButton(onPressed: () {signup();},style: OutlinedButton.styleFrom(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5),),),child: const Text('Sign Up',style: TextStyle(color: Colors.white)),),const SizedBox(width: 16,),ElevatedButton(onPressed: () {login();},style: ElevatedButton.styleFrom(// #635DFFbackgroundColor: const Color.fromRGBO(99, 93, 255, 1), // Background colorshape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5),),),child: const Text('Log In',style: TextStyle(color: Colors.white)),),ElevatedButton(onPressed: () {logout();},style: ElevatedButton.styleFrom(// #635DFFbackgroundColor: const Color.fromRGBO(99, 93, 255, 1), // Background colorshape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5),),),child: const Text('Log Out',style: TextStyle(color: Colors.white)),)]))]).toList(),));}}
Check for stored credentials
Auth0 includes a Credentials Manager utility that allows you to securely store and retrieve the user's credentials. The credentials will be stored encrypted in Shared Preferences on Android, and in the Keychain on iOS.
You can use the credentials manager to check for valid credentials when the users open your app. If they exist, you can retrieve them and automatically display the app's logged-in state without any additional login steps.
Add an init
function in the AuthService to check if the user has any valid credentials or not using Auth0's credential manager's hasValidCredentials()
function. If a user has a valid credential, call credentials()
function and set it to the profile
variable so it can be easily accessed from other parts of the application.
import 'package:auth0_flutter/auth0_flutter.dart';import 'package:helloworld/helpers/constants.dart';class AuthService {static final AuthService instance = AuthService._internal();factory AuthService() => instance;Auth0 auth0 = Auth0(auth0Domain, auth0ClientId);UserProfile? profile;AuthService._internal();Future init() async {final isLoggedIn = await auth0.credentialsManager.hasValidCredentials();if (isLoggedIn) {final credentials = await auth0.credentialsManager.credentials();profile = credentials.user;}return profile;}Future login() async {final credentials = await auth0.webAuthentication().login();profile = credentials.user;return profile;}Future signup() async {final credentials = await auth0.webAuthentication().login(parameters: {'screen_hint': 'signup',});profile = credentials.user;return profile;}Future logout() async {await auth0.webAuthentication().logout();profile = null;return;}}
Update AppDrawer
to call AuthService.instance.init()
and set the profile
variable when the widget initializes.
import 'package:auth0_flutter/auth0_flutter.dart';import 'package:flutter/material.dart';import 'package:flutter_svg/flutter_svg.dart';import 'package:helloworld/pages/admin.dart';import 'package:helloworld/pages/home.dart';import 'package:helloworld/pages/profile.dart';import 'package:helloworld/pages/protected.dart';import 'package:helloworld/pages/public.dart';import 'package:helloworld/services/auth_service.dart';class AppDrawer extends StatefulWidget {final String activePage;const AppDrawer(this.activePage, {super.key});@overrideState<AppDrawer> createState() => _AppDrawerState();}class _AppDrawerState extends State<AppDrawer> {UserProfile? profile;@overridevoid initState() {super.initState();initAuth();}void initAuth() async {await AuthService.instance.init();setState(() => profile = AuthService.instance.profile);}@overrideWidget build(BuildContext context) {const auth0Logo ='https://cdn.auth0.com/blog/hub/code-samples/hello-world/auth0-logo.svg';void login() async {final navigator = Navigator.of(context);await AuthService.instance.login();navigator.pop();navigator.pushReplacement(MaterialPageRoute(builder: (context) =>const ProfilePage()));}void signup() async {final navigator = Navigator.of(context);await AuthService.instance.signup();navigator.pop();navigator.pushReplacement(MaterialPageRoute(builder: (context) =>const ProfilePage()));}void logout() async {final navigator = Navigator.of(context);await AuthService.instance.logout();navigator.pop();navigator.pushReplacement(MaterialPageRoute(builder: (context) => const HomePage()));}return Drawer(backgroundColor: Colors.black,width: double.infinity,child: ListView(padding: EdgeInsets.zero,children: ListTile.divideTiles(context: context, tiles: [Column(children: [const SizedBox(height: 60,),Padding(padding: const EdgeInsets.only(left: 10, bottom: 5),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [GestureDetector(child: SvgPicture.network(auth0Logo,fit: BoxFit.fitHeight,height: 24),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const HomePage()));}),const CloseButton(color: Colors.white,)]),)]),ListTile(title: Text('Profile',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'profile' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const ProfilePage()));},),ListTile(title: Text('Public',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'public' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const PublicPage()));},),ListTile(title: Text('Protected',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness:widget.activePage == 'protected' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const ProtectedPage()));},),ListTile(title: Text('Admin',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'admin' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),shape: const Border(bottom: BorderSide(color: Color(0xffB9B3BD), width: 1)),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const AdminPage()));},),Padding(padding: const EdgeInsets.all(20),child: Row(mainAxisAlignment: MainAxisAlignment.center,children: [OutlinedButton(onPressed: () {signup();},style: OutlinedButton.styleFrom(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5),),),child: const Text('Sign Up',style: TextStyle(color: Colors.white)),),const SizedBox(width: 16,),ElevatedButton(onPressed: () {login();},style: ElevatedButton.styleFrom(// #635DFFbackgroundColor: const Color.fromRGBO(99, 93, 255, 1), // Background colorshape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5),),),child: const Text('Log In',style: TextStyle(color: Colors.white)),),ElevatedButton(onPressed: () {logout();},style: ElevatedButton.styleFrom(// #635DFFbackgroundColor: const Color.fromRGBO(99, 93, 255, 1), // Background colorshape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5),),),child: const Text('Log Out',style: TextStyle(color: Colors.white)),)]))]).toList(),));}}
Render Components Conditionally
In this section, you'll learn how to render Flutter widgets conditionally based on the status of the Auth0 Flutter SDK or the authentication status of your users.
Render the authentication buttons conditionally
The Flutter starter application features a mobile navigation experience. You'll see a menu button at the top-right corner of the page. Tapping or clicking on the menu button opens a modal that shows you the different pages that you can access in the application.
In this section, you'll expose the button components that trigger the login, sign-up, and logout events through these page navigation elements.
Next, you'll add a check in lib/widgets/app_drawer.dart
to display the login and sign-up button when the user is not authenticated and the logout button if they are authenticated.
import 'package:auth0_flutter/auth0_flutter.dart';import 'package:flutter/material.dart';import 'package:flutter_svg/flutter_svg.dart';import 'package:helloworld/pages/admin.dart';import 'package:helloworld/pages/home.dart';import 'package:helloworld/pages/profile.dart';import 'package:helloworld/pages/protected.dart';import 'package:helloworld/pages/public.dart';import 'package:helloworld/services/auth_service.dart';class AppDrawer extends StatefulWidget {final String activePage;const AppDrawer(this.activePage, {super.key});@overrideState<AppDrawer> createState() => _AppDrawerState();}class _AppDrawerState extends State<AppDrawer> {UserProfile? profile;@overridevoid initState() {super.initState();initAuth();}void initAuth() async {await AuthService.instance.init();setState(() => profile = AuthService.instance.profile);}@overrideWidget build(BuildContext context) {const auth0Logo ='https://cdn.auth0.com/blog/hub/code-samples/hello-world/auth0-logo.svg';void login() async {final navigator = Navigator.of(context);await AuthService.instance.login();navigator.pop();navigator.pushReplacement(MaterialPageRoute(builder: (context) =>const ProfilePage()));}void signup() async {final navigator = Navigator.of(context);await AuthService.instance.signup();navigator.pop();navigator.pushReplacement(MaterialPageRoute(builder: (context) =>const ProfilePage()));}void logout() async {final navigator = Navigator.of(context);await AuthService.instance.logout();navigator.pop();navigator.pushReplacement(MaterialPageRoute(builder: (context) => const HomePage()));}return Drawer(backgroundColor: Colors.black,width: double.infinity,child: ListView(padding: EdgeInsets.zero,children: ListTile.divideTiles(context: context, tiles: [Column(children: [const SizedBox(height: 60,),Padding(padding: const EdgeInsets.only(left: 10, bottom: 5),child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [GestureDetector(child: SvgPicture.network(auth0Logo,fit: BoxFit.fitHeight,height: 24),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const HomePage()));}),const CloseButton(color: Colors.white,)]),)]),ListTile(title: Text('Profile',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'profile' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const ProfilePage()));},),ListTile(title: Text('Public',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'public' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const PublicPage()));},),ListTile(title: Text('Protected',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness:widget.activePage == 'protected' ? 2 : 0,decorationColor: const Color(0xff413DA6)),),onTap: () {Navigator.pop(context);Navigator.pushReplacement(context,MaterialPageRoute(builder: (context) => const ProtectedPage()));},),ListTile(title: Text('Admin',style: TextStyle(fontSize: 20,fontWeight: FontWeight.w500,color: Colors.white,decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,decorationThickness: widget.activePage == 'admin' ? 2 : 0,decorationColor: