auth0-blog / flutter-authentication

Get Started with Flutter Authentication

Get Started with Flutter Authentication

Read Get Started with Flutter Authentication to learn how to build the application hosted in this repository.

Flutter is Google's cross-platform UI toolkit created to help developers build expressive and beautiful mobile applications. In the article, you will learn how to build and secure a Flutter application with Auth0 using the open-source AppAuth library with the flutter_appauth wrapper plugin.

What You'll Build

Project Setup

• Clone project.

• Install dependencies by clicking "Pub get" in your IDE or run the following command in the project root:

flutter pub get

Set Up Auth0

Auth0 is an Identity-as-a-Service (IDaaS) platform that provides developers with features such as Social and Passwordless Login, among others, to ease online identity management.

To integrate Auth0 into your Flutter app, you need an Auth0 account. If you have an existing account, you can use it. If you don't, click here to create a free account.

After creating an Auth0 account, follow the steps below to set up an application:

• Go to the Applications section of your dashboard.
• Click on the "Create Application" button.
• Enter a name for your application (e.g., "Flutter Application").
• Finally, select Native as the application type and click the Create button.

Your application should have at least one enabled Connection. Click on the "Connections" tab on your application page and switch on any database or social identity provider (e.g., Google).

Finally, navigate to the "Settings" tab on your application page and set a callback URL in the Allowed Callback URLs field. For this demo, your callback URL should be the following value:

com.auth0.flutterdemo://login-callback

Here is how it should look in your Application settings page:

Once you set the callback URL value, scroll to the bottom of the page and click on the "Save Changes" button. You should receive a confirmation message stating that your changes have been saved.

The purpose of the callback URL is to provide a mechanism by which an authorization server communicates back to your Flutter application.

Open lib/main.dart and update the "Auth0 Variables" section with the values from your Auth0 Application settings:

• AUTH0_DOMAIN is the value of the Domain.

• AUTH0_CLIENT_ID is the value of the Client ID.

Run the Application

Launch either the iOS simulator or Android emulators, then run the application on all available devices like so:

flutter run -d all

flutter-authentication's Issues

Logout vs Logout SSO

Hi, great flutter demo with OAuth2 - finally found a sample that actually works! Question more than anything - how is Logout supposed to work? Right now it deletes the refresh token, but when you click Login again, it re-logs me in using previous credentials. I was expecting a logout that forces the user to sign-in again or change credentials. How do you envision that to work? Was that the intention of Logout? Maybe we need PR that does both? Or maybe that's a setting in Auth0 connections?
thanks - great demo!

Future<void> logoutAction() async {
    await secureStorage.delete(key: 'refresh_token');
    setState(() {
      isLoggedIn = false;
      isBusy = false;
    });
  }

Request for licence

Can you please add a licence to this project?

Spinner Just Spins

Downloaded latest github repo, setup Auth0 account. Login -> Flutter app just spins and never completes. I believe an error is occurring within getUserDetails method.

Login Spins Forever

I tried logging in, and it spins forever.

With the new version of the flutter SDK, it was not possible to make it work with only the published code

My Environment

~/S/s ❯❯❯ flutter --version
Flutter 2.5.3 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 18116933e7 (3 weeks ago) • 2021-10-15 10:46:35 -0700
Engine • revision d3ea636dc5
Tools • Dart 2.14.4

Cause

Because the published code is not null-safe.

Provisional support #1 Disable null safety

Change pubspec.yaml as follows

environment:
  sdk: ">=2.7.0 <3.0.0"

Provisional support #2 Parse the url

    const String url = 'https://$AUTH0_DOMAIN/userinfo';
    final http.Response response = await http.get(
      Uri.parse(url),
      headers: <String, String>{'Authorization': 'Bearer $accessToken'},
    );

I was able to confirm that it works, but it would be nice if the code to make it work null-safely is available.

Error when using login from web

Hello!
I am developing a multiplarform app in Flutter. I already have my auth0 login working with the base package in mobile, but since that package doesn't support web I'm looking for a package that does. When I tried yours, i get this error when using : Auth0Flutter2.instance.loginUser();

Error: Exception: NoSuchMethodError: tried to call a non-function, such as null: 'dart.global.createAuth0Client'
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49 throw
packages/auth0_flutter2/auth0/init_auth0/init_auth0_web.dart 21:5 initAuth0Web
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5 _async
packages/auth0_flutter2/auth0/init_auth0/init_auth0_web.dart 5:37 initAuth0Web
packages/auth0_flutter2/auth0/login_user/login_user_web.dart 15:34 loginUser
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5 _async
packages/auth0_flutter2/auth0/login_user/login_user_web.dart 8:26 loginUser
packages/auth0_flutter2/auth0/login_user/login_user.dart 13:10 loginUser$
packages/auth0_flutter2/auth0_flutter2.dart 102:25 loginUser
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5 _async
packages/auth0_flutter2/auth0_flutter2.dart 99:28 loginUser
packages/assistedtourcreator/Tabs/loginTab.dart 203:28 webLogin
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 84:54 runBody
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 123:5 _async
packages/assistedtourcreator/Tabs/loginTab.dart 201:11 webLogin
packages/assistedtourcreator/Tabs/loginTab.dart 412:17 loginAction
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1660:54 runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 147:18 handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 767:44 handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 796:13 _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 567:5 [_completeWithValue]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 874:16
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1660:54 runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 147:18 handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 767:44 handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 796:13 _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 567:5 [_completeWithValue]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 640:7 callback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 40:11 _microtaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 49:5 _startMicrotaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15

Does the package work for web? I hope i didn't do anything wrong. I did this in my initState in main:
/// Also init alternative auth0 package for web/desktop
Auth0Flutter2.auth0Domain = AUTH0_DOMAIN;
Auth0Flutter2.auth0ClientId = AUTH0_CLIENT_ID;
Auth0Flutter2.redirectUri = AUTH0_REDIRECT_URI;
Auth0Flutter2.setPathUrlStrategy();
checkForRedirectCallback();

And also added this to web\index.html (hope it's the correct place, the info is not very specific about where to add it exactly) :

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

Hope you can help me make it work!

Custom Page

Hi, I loved how you made simple the implementation basic with flutter, but I was wondering if it's possible to create my own login screen in flutter and use it to do the authentication via SDK as firebase does.

Desktop Support

Now Flutter have desktop support on stable version.

Is possible to use auth0 with flutter on desktop application?

Requires Placeholder Substitution Error it Shows this Following Errors

Attribute application@name at AndroidManifest.xml:5:9-42 requires a placeholder substitution but no value for is provided.

Sign up does not work

I'm following README.md but I'm getting this error when I want to sign up a new user.

E/flutter (12487): [ERROR:flutter/lib/ui/ui_dart_state.cc(209)] Unhandled Exception: Invalid argument (onError): Error handler must accept one Object or one Object and a StackTrace as arguments.: Closure: (HttpException) => Null
E/flutter (12487): #0      Stream.handleError (dart:async/stream.dart:666:7)
E/flutter (12487): #1      IOClient.send (package:http/src/io_client.dart:48:20)
E/flutter (12487): <asynchronous suspension>
E/flutter (12487): #2      BaseClient._sendUnstreamed (package:http/src/base_client.dart:176:32)
E/flutter (12487): <asynchronous suspension>
E/flutter (12487): #3      _withClient (package:http/http.dart:166:12)
E/flutter (12487): <asynchronous suspension>
E/flutter (12487): #4      _MyAppState.getUserDetails (package:flutterdemo/main.dart:149:36)
E/flutter (12487): <asynchronous suspension>
E/flutter (12487): #5      _MyAppState.loginAction (package:flutterdemo/main.dart:181:11)
E/flutter (12487): <asynchronous suspension>
E/flutter (12487): #6      Login.build.<anonymous closure> (package:flutterdemo/main.dart:86:13)
E/flutter (12487): <asynchronous suspension>
E/flutter (12487):