Skip to main content
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.
Prerequisites
1

​
Get Your Application Keys

When you signed up for Auth0, a new application was created for you, or you can create a new one. You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.
You need the following information:
  • Domain
  • Client ID
If you download the sample from the top of this page, these details are filled out for you.
When using the Default App with a Single Page Application, ensure the Application Type is set to SPA and Token Endpoint Authentication Method is set to None.

​
Configure Callback URLs

A callback URL is the URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.For Flutter Web running locally, set the Allowed Callback URLs to:
http://localhost:3000

​
Configure Logout URLs

A logout URL is the URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnToUrl parameter. The logout URL for your app must be added to the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.For Flutter Web running locally, set the Allowed Logout URLs to:
http://localhost:3000

​
Configure Allowed Web Origins

To enable silent authentication and session refresh, add your application URL to the Allowed Web Origins field in your Application Settings. Without this, your users will be logged out when they refresh the page or return to the application.For Flutter Web running locally, set the Allowed Web Origins to:
http://localhost:3000
2
Add the Auth0 Flutter SDK to your project using the Flutter CLI:
flutter pub add auth0_flutter
The SDK requires the Auth0 SPA JS library to be loaded in your web application. Add the following <script> tag to your web/index.html file, before the closing </body> tag:
<script src="https://cdn.auth0.com/js/auth0-spa-js/2.9/auth0-spa-js.production.js" defer></script>
The Auth0 SPA JS script is required for the Flutter Web SDK to function. Without it, authentication will not work.
3
Create an instance of the Auth0Web class with your Auth0 domain and client ID values:
import 'package:auth0_flutter/auth0_flutter_web.dart';

final auth0Web = Auth0Web('{yourDomain}', '{yourClientId}');
You should have only one instance of Auth0Web in your application. Consider making it a global variable or using a state management solution.
Replace {yourDomain} and {yourClientId} with the Domain and Client ID values from the Auth0 Application Settings page.
4
Universal Login is the easiest way to set up authentication in your application. We recommend using it for the best experience, security, and the fullest array of features.

​
Handle the Authentication Callback

When your application loads, call onLoad() to handle the redirect callback from Auth0 and restore the user’s session. This should be done in your widget’s initState() method:
import 'package:auth0_flutter/auth0_flutter_web.dart';
import 'package:flutter/material.dart';

final auth0Web = Auth0Web('{yourDomain}', '{yourClientId}');

class MainView extends StatefulWidget {
  const MainView({super.key});

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

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

  @override
  void initState() {
    super.initState();
    auth0Web.onLoad().then((credentials) {
      setState(() {
        _credentials = credentials;
      });
    });
  }

  // ... rest of your widget
}

​
Trigger Login

Redirect users to the Auth0 Universal Login page using loginWithRedirect(). You must specify the redirectUrl parameter:
ElevatedButton(
  onPressed: () => auth0Web.loginWithRedirect(
    redirectUrl: 'http://localhost:3000',
  ),
  child: const Text('Log In'),
)
Checkpoint
Add a login button to your app that calls loginWithRedirect(). Verify that:
  • You are redirected to Auth0’s Universal Login page
  • After logging in, you are redirected back to your application
  • The onLoad() method returns Credentials containing the user’s tokens
5
To log users out, call the logout() method which redirects users to the Auth0 logout endpoint to clear their session:
ElevatedButton(
  onPressed: () => auth0Web.logout(
    returnToUrl: 'http://localhost:3000',
  ),
  child: const Text('Log Out'),
)
Always specify returnToUrl when calling logout(). Without it, Auth0 will redirect to the first URL in the Allowed Logout URLs list.
Checkpoint
Add a logout button to your app that calls logout(). Verify that:
  • You are redirected to the Auth0 logout endpoint
  • You are redirected back to your application
  • You are no longer logged in (credentials are cleared)
6
The Credentials object returned by onLoad() contains a user property with the user’s profile information, decoded from the ID token.Access user information like this:
if (_credentials != null) {
  final user = _credentials!.user;
  print('Name: ${user.name}');
  print('Email: ${user.email}');
  print('Picture: ${user.pictureUrl}');
}
Display the user profile in your UI:
Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    if (_credentials!.user.pictureUrl != null)
      CircleAvatar(
        radius: 40,
        backgroundImage: NetworkImage(
          _credentials!.user.pictureUrl!.toString(),
        ),
      ),
    const SizedBox(height: 16),
    Text(_credentials!.user.name ?? 'User'),
    Text(_credentials!.user.email ?? ''),
    const SizedBox(height: 24),
    ElevatedButton(
      onPressed: () => auth0Web.logout(returnToUrl: 'http://localhost:3000'),
      child: const Text('Log Out'),
    ),
  ],
)
Checkpoint
Verify that after logging in:
  • You can access the user’s profile information via credentials.user
  • Properties like name, email, and pictureUrl are available
7
Run your Flutter Web application on port 3000 to match your Auth0 configuration:
flutter run -d chrome --web-port 3000
Flutter 3.24.0 and above supports WASM compilation for improved performance:
flutter run -d chrome --web-port 3000 --wasm

​
“Callback URL mismatch” error

Ensure the callback URL in your code matches exactly what’s configured in the Auth0 Dashboard. For local development, use http://localhost:3000.

​
Authentication not working

Verify that the Auth0 SPA JS script is loaded in your web/index.html:
<script src="https://cdn.auth0.com/js/auth0-spa-js/2.9/auth0-spa-js.production.js" defer></script>

​
User logged out after page refresh

Ensure you’ve added http://localhost:3000 to Allowed Web Origins in your Auth0 Application Settings. This enables silent authentication to restore sessions.

​
Session not persisting

By default, credentials are stored in memory. For persistent sessions across page reloads, consider passing cacheLocation: CacheLocation.localStorage when creating the Auth0Web instance:
final auth0Web = Auth0Web(
  '{yourDomain}',
  '{yourClientId}',
  cacheLocation: CacheLocation.localStorage,
);

​
Next Steps

Excellent work! If you made it this far, you should now have login, logout, and user profile information running in your application.This concludes our quickstart tutorial, but there is so much more to explore. To learn more about what you can do with Auth0, check out:
  • Auth0 Dashboard - Learn how to configure and manage your Auth0 tenant and applications
  • Auth0 Flutter SDK - Explore the SDK used in this tutorial more fully
  • Auth0 Marketplace - Discover integrations you can enable to extend Auth0’s functionality