Add user authentication to the Flutter app using OAuth 2.0

Add user authentication to the Flutter app using OAuth 2.0

31 March 2022

Flutter is Google’s cross-platform UI toolkit created to build expressive and beautiful mobile applications.

OAuth 2.0 is an industry-standard protocol for authorization. It allow users to give third-party applications access to their resources. We can see a typical example of OAuth 2.0 in action when a user tries to sign up for a third-party app using Google. OAuth 2.0 allows users to give the third-party applications access to resources, such as using their profile data on a social network platform, without needing to input their credentials on said application.


You need the following installations in your machine:

Scaffold a Flutter project

Once you are done with the installation, we need to create a flutter project.

Install Dependencies

Your Flutter project requires three main dependencies:

  • http: A composable, Future-based library for making HTTP API call.
  • flutter_appauth : A wrapper package around AppAuth for Flutter. AppAuth authenticates and authorizes users.
  • fluttersecurestorage: A library used to securely persist data locally.

Configure Dependencies and Callback URL

A callback URL is a mechanism by which an authorization server communicates back to your applications.


Configure Android Dependencies and Callback URL

Update the android/app/build.gradle file as follows:

defaultConfig {
        applicationId "com.auth0.flutterdemo"
        minSdkVersion 18
        targetSdkVersion 29
        versionCode flutterVersionCode.toInteger()
        versionName flutterVersionName
        manifestPlaceholders = [
                'appAuthRedirectScheme': 'com.auth0.flutterdemo'

Configure iOS Callback URL

Set the callback scheme by adding the following entry to the <dict> element present in the ios/Runner/Info.plist file:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "">
<plist version="1.0">

After configuring the callback URL for the iOS and Android, we need to create the user interface.

Set Up Auth0

To integrate Auth0 into our Flutter apps, we need an Auth0 account
After creating an Auth0 account, set up an application as below:

  • Go to the Applications section of your dashboard in the Auth0 account.
  • Click on the “Create Application” button.
  • Enter a name for your application
  • Select Native as the application type and click the Create button.

Integration with AppAuth

The very first step in setting up AppAuth against your authorization server is to configure OAuth 2.0 endpoint URLs. Your sample application involves three endpoints:

  • Authorization endpoint: You use it to start the redirect-based login and receive an authorization code in the callback. In Auth0, its value is

  • Token endpoint: You use it to exchange an authorization code or refresh token for new access and ID tokens. In Auth0, its value is

  • Userinfo endpoint: You use it to retrieve user profile information from the authorization server. In Auth0, its value is

Handle the ID Token with parseIdToken

Your Flutter application will get an ID token that it will need to parse as a Base64 encoded string into a Map object.

Add user login with loginAction

The single method appAuth.authorizeAndExchangeCode() handles the end-to-end flow: from starting a PKCE authorization code flow to getting authorization code in the callback and exchanging it for a set of artifact tokens.


In this blog, we learned how to secure a Flutter application with Auth0 using readily available OSS libraries.

Blog Categories
Request a quote