Add login to your Flutter app

Auth0 allows you to quickly add authentication and access user profile information in your application. This guide demonstrates how to integrate Auth0 with a Flutter Web application using the Auth0 Flutter SDK.

This quickstart assumes you already have a Flutter application up and running. If not, check out the Flutter "getting started" guides to get started with a simple app.

You should also be familiar with the Flutter command line tool.

flutter pub add auth0_flutter

<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js" defer></script>

Universal Login is the easiest way to set up authentication in your application. We recommend using it for the best experience, best security, and the fullest array of features.

Integrate Auth0 Universal Login in your Flutter app by importing the SDK and instantiating the Auth0 class using your Auth0 domain and Client ID values. See this example, which instantiates the class inside a widget state object:

import 'package:auth0_flutter/auth0_flutter.dart';
import 'package:auth0_flutter/auth0_flutter_web.dart';

class MainView extends StatefulWidget {
  const MainView({Key? key}) : super(key: key);

  @override
  State<MainView> createState() => _MainViewState();
}

class _MainViewState extends State<MainView> {
  Credentials? _credentials;

  late Auth0Web auth0;

  @override
  void initState() {
    super.initState();
    auth0 = Auth0Web('{yourDomain}', '{yourClientId}');
  }

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

Next, redirect your users to the Auth0 Universal Login page using loginWithRedirect. See this example of a ElevatedButton widget that logs the user in when clicked:

if (_credentials == null) {
  ElevatedButton(
    onPressed: () => auth0.loginWithRedirect(redirectUrl: 'http://localhost:3000'),
    child: const Text("Log in")
  )
}

When a user logs in, they are redirected back to your application. You are then able to access the ID and access tokens for this user by calling onLoad during startup and handling the credentials that are given to you:

auth0.onLoad().then((final credentials) => setState(() {
    // Handle or store credentials here
    _credentials = credentials;
  }));

To log users out, redirect them to the Auth0 logout endpoint to clear their login session by calling the Auth0 Flutter SDK logout(). Read more about logging out of Auth0.

See this example of an ElevatedButton widget that logs the user out of the app:

ElevatedButton(
  onPressed: () async {
    await auth0.logout();
  },
  child: const Text("Log out"))

The user profile automatically retrieves user profile properties for you when the page loads, and can be accessed and stored by calling onLoad during application startup. The returned object from onLoad contains a user property with all the user profile properties. This is internally populated by decoding the ID token.

See this example of a View component that displays the user profile on the screen:

import 'package:auth0_flutter/auth0_flutter.dart';
import 'package:flutter/material.dart';

class ProfileView extends StatelessWidget {
  const ProfileView({Key? key, required this.user}) : super(key: key);

  final UserProfile user;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        if (user.name != null) Text(user.name!),
        if (user.email != null) Text(user.email!)
      ],
    );
  }
}