diff --git a/main/docs.json b/main/docs.json index b92800a61..91c23a333 100644 --- a/main/docs.json +++ b/main/docs.json @@ -2414,7 +2414,7 @@ "docs/quickstart/native/android-facebook-login/interactive", "docs/quickstart/native/react-native/interactive", "docs/quickstart/native/react-native-expo/interactive", - "docs/quickstart/native/flutter/interactive", + "docs/quickstart/native/flutter/index", "docs/quickstart/native/net-android-ios/interactive", "docs/quickstart/native/maui/interactive", "docs/quickstart/native/ionic-angular/interactive", @@ -24530,6 +24530,10 @@ { "source": "/docs/secure/tokens/token-vault/configure-token-vault", "destination": "/docs/secure/call-apis-on-users-behalf/token-vault/configure-token-vault" + }, + { + "source": "/docs/quickstart/native/flutter/interactive", + "destination": "/docs/quickstart/native/flutter" } ] } diff --git a/main/docs/quickstart/native/flutter/_index.mdx b/main/docs/quickstart/native/flutter/_index.mdx deleted file mode 100644 index 71c2afb24..000000000 --- a/main/docs/quickstart/native/flutter/_index.mdx +++ /dev/null @@ -1,290 +0,0 @@ ---- -title: Add Login to Your Flutter Application -sidebarTitle: Flutter - ---- -import { Recipe, Content, Section, SideMenu, SideMenuSectionItem, SignUpForm } from "/snippets/recipe.jsx"; -import { LoggedInForm } from "/snippets/Login.jsx"; -import Build from "/snippets/quickstart/native/flutter/build.gradle.mdx"; -import MainView from "/snippets/quickstart/native/flutter/main_view.dart.mdx"; -import MainView2 from "/snippets/quickstart/native/flutter/main_view.dart2.mdx"; -import ProfileView from "/snippets/quickstart/native/flutter/profile_view.dart.mdx"; - -import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx"; - -export const sections = [ - { id: "configure-auth0", title: "Configure Auth0" }, - { id: "install-the-auth0-flutter-sdk", title: "Install the Auth0 Flutter SDK" }, - { id: "configure-android", title: "Configure Android" }, - { id: "configure-ios-macos", title: "Configure iOS/macOS" }, - { id: "add-login-to-your-application", title: "Add login to your application" }, - { id: "add-logout-to-your-application", title: "Add logout to your application" }, - { id: "show-user-profile-information", title: "Show user profile information" } -] - - - - Auth0 allows you to quickly add authentication and access user profile information in your app. This guide - demonstrates how to integrate Auth0 with a Flutter app using the [Auth0 Flutter SDK](https://github.com/auth0/auth0-flutter). - - - The Flutter SDK currently only supports Flutter apps for Android, iOS, and macOS. - - - This quickstart assumes you already have a [Flutter](https://flutter.dev/) app up and running. If not, check out the [Flutter "getting - started" guides](https://docs.flutter.dev/get-started/install) to get started with a simple app. - - You should also be familiar with the [Flutter command line tool](https://docs.flutter.dev/reference/flutter-cli). - - - **New to Auth?** Learn [How Auth0 works](https://auth0.com/docs/overview), - how it [integrates with Single-Page Applications](https://auth0.com/docs/architecture-scenarios/application/spa-api) and which [protocol](https://auth0.com/docs/flows/concepts/auth-code-pkce) it uses. - - -
- To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is - where you will configure how you want authentication to work for your project. - - ### Configure an Auth0 application - - Use the interactive selector to create a new Auth0 application or select an existing **Native** Auth0 - application. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code - will use to call Auth0 APIs through the SDK. - - Any settings you configure using this quickstart will automatically update for your application in the [Dashboard](https://manage.auth0.com/dashboard/us/auth0-dsepaid/), which is where you can manage your applications in the future. - - If you would rather explore a complete configuration, you can view a sample app instead. - - ### Configure the callback and logout URLs - - The callback and logout URLs are the URLs that Auth0 invokes to redirect back to your app. Auth0 invokes the - callback URL after authenticating the user, and the logout URL after removing the session cookie. If the callback - and logout URLs are not set, users will be unable to log in and out of the app and will get an error. - - Set the callback and logout URLs to the following values, depending on your platform. - - - On Android, the value of the `SCHEME` placeholder can be `https` or some other - custom scheme. `https` schemes require enabling [Android App Links](https://auth0.com/docs/get-started/applications/enable-android-app-links-support). - - On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links (`https` scheme) as - callback and logout URLs. When enabled, the SDK will fall back to using a custom URL scheme on older iOS - / macOS versions –your app's [bundle identifier](https://developer.apple.com/documentation/appstoreconnectapi/bundle_ids). **This feature requires Xcode 15.3+ and a paid Apple - Developer account**. - - - #### Android - - ``` - SCHEME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback - ``` - - #### iOS - - ``` - https://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback, - ``` - - ``` - YOUR_BUNDLE_IDENTIFIER://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback - ``` - - #### macOS - - ``` - https://{yourDomain}/macos/YOUR_BUNDLE_IDENTIFIER/callback, - ``` - - ``` - YOUR_BUNDLE_IDENTIFIER://{yourDomain}/macos/YOUR_BUNDLE_IDENTIFIER/callback - ``` - - For example, if your iOS bundle identifier were `com.example.MyApp` and your Auth0 domain were - `example.us.auth0.com`, then this value would be: - - ``` - https://example.us.auth0.com/ios/com.example.MyApp/callback, - ``` - - ``` - com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback - ``` - - -
- -
- Add the Auth0 Flutter SDK into the project: - - ``` - flutter pub add auth0_flutter - ``` - - -
- -
- If you are not developing for the Android platform, skip this step. - - The SDK requires manifest placeholders. Auth0 uses placeholders internally to define an - `intent-filter`, which captures the authentication callback URL. You must set the Auth0 tenant domain - and the callback URL scheme. - - The [sample](https://github.com/auth0-samples/auth0-flutter-samples/tree/main/sample/android) uses the following placeholders: - - - `auth0Domain`: The domain of your Auth0 tenant. Generally, you find this in the Auth0 Dashboard - under your **Application Settings** in the **Domain** field. If you are using a custom domain, you - should set this to the value of your custom domain instead. - - `auth0Scheme`: The scheme to use. Can be a custom scheme, or https if you want to use [Android App Links](https://auth0.com/docs/applications/enable-android-app-links). - You can read more about setting this value in the [Auth0.Android SDK README](https://github.com/auth0/Auth0.Android#a-note-about-app-deep-linking). - - - You do not need to declare a specific `intent-filter` for your activity because you defined - the manifest placeholders with your Auth0 **Domain** and **Scheme** values. The library handles - the redirection for you. - - - Run **Sync Project with Gradle Files** inside Android Studio to apply your changes. - - -
- -
- If you are not developing for the iOS or macOS platforms, skip this step. - - - This step requires a paid Apple Developer account. It is needed to use Universal Links as callback and - logout URLs. Skip this step to use a custom URL scheme instead. - - - ### Configure the Team ID and bundle identifier - - Go to the [settings page](https://manage.auth0.com/#/applications/{yourClientId}/settings) of your Auth0 application, scroll to the end, and open **Advanced - Settings > Device Settings**. In the **iOS** section, set **Team ID** to your [Apple Team ID](https://developer.apple.com/help/account/manage-your-team/locate-your-team-id/), and **App ID** to your app's bundle identifier. - - - - - - This will add your app to your Auth0 tenant's `apple-app-site-association` file. - - ### Add the associated domain capability - - Open your app in Xcode by running `open ios/Runner.xcworkspace` (or - `open macos/Runner.xcworkspace` for macOS). Go to the **Signing and Capabilities** [tab](https://developer.apple.com/documentation/xcode/adding-capabilities-to-your-app#Add-a-capability) of the **Runner** target settings, and press the **+ - Capability** button. Then select **Associated Domains**. - - - - - - Next, add the following [entry](https://developer.apple.com/documentation/xcode/configuring-an-associated-domain#Define-a-service-and-its-associated-domain) under **Associated Domains**: - - ``` - webcredentials:{yourDomain} - ``` - - - For the associated domain to work, your app must be signed with your team certificate **even when - building for the iOS simulator**. Make sure you are using the Apple Team whose Team ID is configured - in the settings page of your Auth0 application. - - - -
- -
- Universal Login is the easiest way to set up - authentication in your app. 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 using the `Auth0` class. Redirect your users to - the Auth0 Universal Login page using `webAuthentication().login()`. This is a `Future` and - must be awaited for you to retrieve the user's tokens. - - **Android**: if you are using a custom scheme, pass this scheme to the login method so that the SDK can route - to the login page and back again correctly: - - ``` - await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').login(); - ``` - - When a user logs in, they are redirected back to your app. Then, you are able to access the ID and access tokens - for this user. - - - ##### Checkpoint - - Add a button to your app that calls `webAuthentication().login()` and logs the user into your - app. Verify that you are redirected to Auth0 for authentication and then back to your app. - - Verify that you can get access to the tokens on the result of calling `login`. - - - - - - - -
- -
- To log users out, redirect them to the Auth0 logout endpoint to clear their login session by calling the Auth0 - Flutter SDK `webAuthentication().logout()`. Read - more about logging out of Auth0. - - **Android**: if you are using a custom scheme, pass this scheme to the logout method so that the SDK can route - back to your app correctly: - - ``` - await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').logout(); - ``` - - - ##### Checkpoint - - Add a button to your app that calls `webAuthentication().logout()` and logs the user out of - your app. When you select it, verify that your Flutter app redirects you to the logout endpoint and back - again. You should not be logged in to your app. - - - - - - - -
- -
- The user profile automatically retrieves user profile properties for you when you call - `webAuthentication().login()`. The returned object from the login step contains a `user` - property with all the user profile properties, which populates by decoding the ID token. - - - ##### Checkpoint - - Log in and inspect the `user` property on the result. Verify the current user's profile - information, such as `email` or `name`. - - - - - - - -
- - ## 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](https://manage.auth0.com/dashboard/us/dev-gja8kxz4ndtex3rq) - Learn how to configure and manage your Auth0 tenant and applications - * [auth0-flutter SDK](https://www.github.com/auth0/auth0-flutter/) - Explore the SDK used in this tutorial more fully - * [Auth0 Marketplace](https://marketplace.auth0.com/) - Discover integrations you can enable to extend Auth0’s functionality - - - - - diff --git a/main/docs/quickstart/native/flutter/index.mdx b/main/docs/quickstart/native/flutter/index.mdx index e37432880..10fb735a2 100644 --- a/main/docs/quickstart/native/flutter/index.mdx +++ b/main/docs/quickstart/native/flutter/index.mdx @@ -1,373 +1,618 @@ --- -title: "Flutter" -permalink: "01-login" +mode: wide +'og:description': This guide demonstrates how to integrate Auth0 with any Flutter app using the Auth0 Flutter SDK. +'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png +'og:title': 'Auth0 Flutter SDK Quickstarts: Add Login to Your Flutter Application' +'og:url': https://auth0.com/docs/ +sidebarTitle: Flutter +title: Add Login to Your Flutter Application +'twitter:description': This guide demonstrates how to integrate Auth0 with any Flutter app using the Auth0 Flutter SDK. +'twitter:title': 'Auth0 Flutter SDK Quickstarts: Add Login to Your Flutter Application' --- -import {AuthCodeBlock} from "/snippets/AuthCodeBlock.jsx"; +This guide demonstrates how to integrate Auth0 with a Flutter application using the [Auth0 Flutter SDK](https://github.com/auth0/auth0-flutter). This guide covers setup for **Android**, **iOS**, **macOS**, and **Web** platforms. -##### By Steve Hobbs +## Get Started + + + + Create a new Flutter project for this quickstart. -This tutorial demonstrates how to add user login with Auth0 to an Android, iOS, or macOS Flutter app using the Auth0 Flutter SDKWe recommend that you log in to follow this quickstart with examples configured for your account. + **In your terminal:** -{/* -System requirements: Flutter 3+ | Android API 21+ and Android Studio 4+ (for Android) | iOS 13+ and Xcode 14+ (for iOS) | macOS 11+ and Xcode 14+ (for macOS) - */} -# Add login to your Flutter app + 1. Navigate to your workspace directory + 2. Run: `flutter create auth0_flutter_sample` + 3. Navigate into the project: `cd auth0_flutter_sample` + 4. Open in your IDE: + * **VS Code**: `code .` + * **Android Studio**: `open -a "Android Studio" .` -Auth0 allows you to quickly add authentication and access user profile information in your app. This guide demonstrates how to integrate Auth0 with a Flutter app using the [Auth0 Flutter SDK](https://github.com/auth0/auth0-flutter). + ```shellscript + # Create new Flutter project + flutter create auth0_flutter_sample - -The Flutter SDK currently only supports Flutter apps for Android, iOS, and macOS. - + # Navigate into project directory + cd auth0_flutter_sample -## Getting started + # Open in VS Code + code . + ``` + + + This creates a modern Flutter app with the latest project structure. Run `flutter doctor` to verify your environment is set up correctly. + + + + + Add the Auth0 Flutter SDK to your project using the Flutter CLI. + + ```shellscript + flutter pub add auth0_flutter + ``` -This quickstart assumes you already have a [Flutter](https://flutter.dev/) app up and running. If not, check out the [Flutter "getting started" guides](https://docs.flutter.dev/get-started/install) to get started with a simple app. + This will add `auth0_flutter` to your `pubspec.yaml` dependencies: -You should also be familiar with the [Flutter command line tool](https://docs.flutter.dev/reference/flutter-cli). + ```yaml pubspec.yaml lines + dependencies: + auth0_flutter: ^2.0.0-beta.1 + ``` -Finally, you will need a **Native** Auth0 application. If you don’t have a Native Auth0 application already, [create one](/docs/get-started/auth0-overview/create-applications/native-apps) before continuing. Avoid using other application types, as they have different configurations and may cause errors. + + The Auth0 Flutter SDK requires **Flutter 3.24.0+** and **Dart 3.5.0+**. Run `flutter doctor` to verify your environment meets these requirements. + + -### Configure the callback and logout URLs + + Next up, you need to create a new app on your Auth0 tenant and configure the callback URLs. -The callback and logout URLs are the URLs that Auth0 invokes to redirect back to your app. Auth0 invokes the callback URL after authenticating the user, and the logout URL after removing the session cookie. + 1. Head to the [Auth0 Dashboard](https://manage.auth0.com/dashboard/) + 2. Click on **Applications** > **Applications** > **Create Application** + 3. In the popup, enter a name for your app, select `Native` as the app type (or `Single Page Application` for web-only) and click **Create** + 4. Switch to the **Settings** tab on the Application Details page + 5. Note down the **Domain** and **Client ID** values - you'll need these later -If the callback and logout URLs are not set, users will be unable to log in and out of the app and will get an error. + On the **Settings** tab, configure the following URLs based on your target platform(s): -Go to the [settings page](https://manage.auth0.com/#/applications/{yourClientId}/settings) of your Auth0 application and add the following URLs to **Allowed Callback URLs** and **Allowed Logout URLs**, depending on the platform of your app. If you have a [custom domain](/docs/customize/custom-domains), use this instead of the Auth0 domain from the settings page. + **Allowed Callback URLs:** - -On Android, the value of the `SCHEME` placeholder can be `https` or some other custom scheme. Whenever possible, Auth0 recommends using [Android App Links](https://auth0.com/docs/applications/enable-android-app-links) with `https` as a secure way to link directly to content within your app. Custom URL schemes can be subject to [client impersonation attacks](https://datatracker.ietf.org/doc/html/rfc8252#section-8.6). + + + ```text + https://{yourDomain}/android/{yourPackageName}/callback + ``` + + + ```text + https://{yourDomain}/ios/{yourBundleIdentifier}/callback, + {yourBundleIdentifier}://{yourDomain}/ios/{yourBundleIdentifier}/callback + ``` + + + ```text + https://{yourDomain}/macos/{yourBundleIdentifier}/callback, + {yourBundleIdentifier}://{yourDomain}/macos/{yourBundleIdentifier}/callback + ``` + + + ```text + http://localhost:3000 + ``` + + -On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links (`https` scheme) as callback and logout URLs. When enabled, the SDK will fall back to using a custom URL scheme on older iOS / macOS versions –your app's [bundle identifier](https://developer.apple.com/documentation/appstoreconnectapi/bundle_ids). + **Allowed Logout URLs:** -Whenever possible, Auth0 recommends using Universal Links as a secure way to link directly to content within your iOS app. Custom URL schemes can be subject to [client impersonation attacks](https://datatracker.ietf.org/doc/html/rfc8252#section-8.6). + Add the same URLs from the callback configuration above to the **Allowed Logout URLs** field. -**This feature requires Xcode 15.3+ and a paid Apple Developer account**. - + **Allowed Web Origins (Web Only):** -#### Android + If targeting the web platform, add your application URL: -``` -SCHEME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback -``` - - - - - - -#### iOS - -``` -https://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback, -YOUR_BUNDLE_IDENTIFIER://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback -``` - - - - - - -#### macOS - -``` -https://{yourDomain}/macos/YOUR_BUNDLE_IDENTIFIER/callback, -YOUR_BUNDLE_IDENTIFIER://{yourDomain}/macos/YOUR_BUNDLE_IDENTIFIER/callback -``` - - - - - - -For example, if your iOS bundle identifier were `com.example.MyApp` and your Auth0 domain were `example.us.auth0.com`, then this value would be: - -``` -https://example.us.auth0.com/ios/com.example.MyApp/callback, -com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback -``` + ```text + http://localhost:3000 + ``` - - - - - -## Install the Auth0 Flutter SDK - -Add the Auth0 Flutter SDK into the project: - -``` -flutter pub add auth0_flutter + + **Allowed Callback URLs** are a critical security measure to ensure users are safely returned to your application after authentication. Without a matching URL, the login process will fail. + + **Allowed Logout URLs** are essential for providing a seamless user experience upon signing out. Without a matching URL, users will not be redirected back to your application after logout. + + For example, if your Auth0 domain is `example.us.auth0.com` and your Android package name is `com.example.myapp`, your Android callback URL would be: `https://example.us.auth0.com/android/com.example.myapp/callback` + + + + **Important**: Ensure the package name (Android) or bundle identifier (iOS/macOS) in your callback URLs matches your actual app identifier. If authentication fails, verify these values are identical. + + + + + Platform-specific configuration is required to enable the authentication flow. Follow the instructions for each platform you're targeting. + + + + Open the `android/app/build.gradle` file and add the following manifest placeholders inside `android > defaultConfig`: + + ```groovy android/app/build.gradle lines + android { + // ... + defaultConfig { + // Add the following line + manifestPlaceholders += [auth0Domain: "{yourDomain}", auth0Scheme: "https"] + } + // ... + } + ``` + + Replace `{yourDomain}` with your Auth0 domain (e.g., `example.us.auth0.com`). + + **https scheme** + +To use `https` scheme for your callback url, set up [Android app links](https://auth0.com/docs/get-started/applications/enable-android-app-links-support) for your application. + + **For Biometric Authentication (Optional):** + + If you plan to use biometric authentication, update your `MainActivity.kt` to extend `FlutterFragmentActivity`: + + ```kotlin android/app/src/main/kotlin/.../MainActivity.kt lines + import io.flutter.embedding.android.FlutterFragmentActivity + + class MainActivity: FlutterFragmentActivity() { + } + ``` + + + + To use Universal Links (HTTPS callback URLs) on iOS 17.4+, configure an Associated Domain: + + 1. Open your app in Xcode: `open ios/Runner.xcworkspace` + 2. Select the **Runner** target and go to **Signing & Capabilities** + 3. Click **+ Capability** and add **Associated Domains** + 4. Add the entry: `webcredentials:{yourDomain}` + 5. In the [Auth0 Dashboard](https://manage.auth0.com/#/applications), go to **Settings > Advanced Settings > Device Settings** + 6. In the **iOS** section, set your **Team ID** and **App ID** (bundle identifier) + + + Universal Links configuration is optional. Skip this if you don't need Universal Links support - the SDK will fall back to custom URL schemes automatically. + + + + + Follow the same steps as iOS, but open `macos/Runner.xcworkspace` instead. + + + + Add the following script tag to your `web/index.html` file, inside the `head` section: + + ```html web/index.html lines + + + + + ``` + + + + + **Android**: Ensure the `auth0Domain` value matches your Auth0 domain exactly. If authentication fails, verify this value is identical to the domain shown in your Auth0 Dashboard. + + **iOS/macOS**: Universal Links require a paid Apple Developer account and iOS 17.4+/macOS 14.4+. On older versions, the SDK automatically falls back to custom URL schemes. + + + + + [Universal Login](https://auth0.com/docs/authenticate/login/auth0-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. + + **Implement Login:** + + + + Import the Auth0 Flutter SDK and create an `Auth0` instance: + + ```dart lib/auth_service.dart lines + import 'package:auth0_flutter/auth0_flutter.dart'; + + class AuthService { + final auth0 = Auth0('{yourDomain}', '{yourClientId}'); + + Future login() async { + final credentials = await auth0.webAuthentication().login(useHTTPS: true); + + // Access token -> credentials.accessToken + // ID token -> credentials.idToken + // User profile -> credentials.user + + return credentials; + } + } + ``` + + + + Import the web-specific SDK and handle the authentication flow: + + ```dart lib/web_auth_service.dart lines + import 'package:auth0_flutter/auth0_flutter_web.dart'; + + class WebAuthService { + final auth0Web = Auth0Web('{yourDomain}', '{yourClientId}'); + + Future initialize() async { + // Call onLoad() during app initialization to handle redirect callback + final credentials = await auth0Web.onLoad(); + + if (credentials != null) { + // User is already logged in + // Access token -> credentials.accessToken + // User profile -> credentials.user + } + } + + Future login() async { + await auth0Web.loginWithRedirect(redirectUrl: 'http://localhost:3000'); + } + } + ``` + + + + + **Implement Logout:** + + + + ```dart lib/auth_service.dart lines + Future logout() async { + await auth0.webAuthentication().logout(useHTTPS: true); + + // User is now logged out + // Credentials have been cleared from secure storage + } + ``` + + + + ```dart lib/web_auth_service.dart lines + Future logout() async { + await auth0Web.logout(returnToUrl: 'http://localhost:3000'); + } + ``` + + + + + **iOS/macOS**: The `useHTTPS: true` parameter enables Universal Links on iOS 17.4+ and macOS 14.4+ for enhanced security. + + **Android**: if you are using a custom scheme, pass this scheme to the login method so that the SDK can route to the login page and back again correctly: +```kotlin lib/auth_service.dart lines +await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').login(); ``` - - - - - -## Configure Android - -If you are not developing for the Android platform, skip this step. - -The SDK requires manifest placeholders. Auth0 uses placeholders internally to define an `intent-filter`, which captures the authentication callback URL. You must set the Auth0 tenant domain and the callback URL scheme. - -Modify `app/build.gradle` to include manifest placeholders for `auth0Domain` and `auth0Scheme` inside the `defaultConfig` section: - -export const codeExample1 = `apply plugin: 'com.android.application' - -android { - defaultConfig { - applicationId "com.auth0.samples" - minSdkVersion 21 - targetSdkVersion flutter.targetSdkVersion - // ... - - // ---> Add the next line - manifestPlaceholders += [auth0Domain: "{yourDomain}", auth0Scheme: "https"] - // <--- + **Web**: You must call `onLoad()` when your application starts. This handles the redirect callback from Auth0 and restores the user's session if they're already authenticated. + + + + + The user profile is automatically retrieved when the user logs in. The `Credentials` object contains a `user` property with all the user profile information, populated by decoding the ID token. + + ```dart lib/profile_screen.dart lines + void displayUserProfile(Credentials credentials) { + final user = credentials.user; + + print('User ID: ${user.sub}'); + print('Email: ${user.email}'); + print('Name: ${user.name}'); + print('Picture: ${user.pictureUrl}'); + print('Nickname: ${user.nickname}'); } -}`; - - - + ``` + + Request the appropriate scopes during login to access specific user profile fields. The default scopes are `openid`, `profile`, `email`, and `offline_access`. + + + + Build and run your Flutter application. + **In your terminal:** + ```shellscript + # List available devices + flutter devices -* `auth0Domain`: The domain of your Auth0 tenant. Generally, you find this in the Auth0 Dashboard under your **Application Settings** in the Domain field. If you are using a custom domain, you should set this to the value of your custom domain instead. -* `auth0Scheme`: The scheme to use. Can be a custom scheme, or `https` if you want to use [Android App Links](https://auth0.com/docs/applications/enable-android-app-links). You can read more about setting this value in the [Auth0.Android SDK README](https://github.com/auth0/Auth0.Android#a-note-about-app-deep-linking). + # Run on Android + flutter run -d android - -You do not need to declare a specific `intent-filter` for your activity because you defined the manifest placeholders with your Auth0 **Domain** and **Scheme** values. The library handles the redirection for you. - + # Run on iOS Simulator + flutter run -d ios -Run **Sync Project with Gradle Files** inside Android Studio to apply your changes. + # Run on Web (use port 3000 to match callback URLs) + flutter run -d chrome --web-port 3000 + ``` -## Configure iOS/macOS + **Expected flow:** -If you are not developing for the iOS or macOS platforms, skip this step. + 1. App launches with your login UI + 2. User taps **Log In** → Browser/Custom Tab opens with Auth0 Universal Login + 3. User completes authentication + 4. Browser redirects back to your app + 5. User is now authenticated and credentials are stored - -This step requires a paid Apple Developer account. It is needed to use Universal Links as callback and logout URLs. Skip this step to use a custom URL scheme instead. - + + Make sure to use port `3000` when running the web app to match the callback URLs configured in Auth0. You can change this port, but ensure it matches your Auth0 configuration. + + + -#### Configure the Team ID and bundle identifier + + **Checkpoint** -Go to the [settings page](https://manage.auth0.com/#/applications/{yourClientId}/settings) of your Auth0 application, scroll to the end, and open **Advanced Settings > Device Settings**. In the **iOS** section, set **Team ID** to your [Apple Team ID](https://developer.apple.com/help/account/manage-your-team/locate-your-team-id/), and **App ID** to your app's bundle identifier. + You should now have a fully functional Auth0 login experience in your Flutter application. The app uses secure browser-based authentication and automatically stores credentials for session persistence. + -![Screenshot of the iOS section inside the Auth0 application settings page](https://cdn2.auth0.com/docs/1.14550.0/media/articles/native-platforms/ios-swift/ios-device-settings.png) - -This will add your app to your Auth0 tenant's `apple-app-site-association` file. +--- -#### Add the associated domain capability +## Troubleshooting & Advanced Usage -Open your app in Xcode by running `open ios/Runner.xcworkspace` (or `open macos/Runner.xcworkspace` for macOS). Go to the **Signing and Capabilities** [tab](https://developer.apple.com/documentation/xcode/adding-capabilities-to-your-app#Add-a-capability) of the **Runner** target settings, and press the **+ Capability** button. Then select **Associated Domains**. + + ### Callback URL Mismatch -![Screenshot of the capabilities library inside Xcode](https://cdn2.auth0.com/docs/1.14550.0/media/articles/native-platforms/ios-swift/ios-xcode-capabilities.png) + **Symptom**: Error "redirect_uri_mismatch" or authentication fails silently. -Next, add the following [entry](https://developer.apple.com/documentation/xcode/configuring-an-associated-domain#Define-a-service-and-its-associated-domain) under **Associated Domains**: + **Solutions:** -export const codeExample2 = `webcredentials:{yourDomain}`; + 1. Check **Allowed Callback URLs** in Auth0 Dashboard match your app configuration exactly + 2. Verify the scheme (`https://` vs `http://`) + 3. Ensure the package name (Android) or bundle identifier (iOS/macOS) is correct + 4. Check for trailing slashes - + ### Android: Chrome Custom Tab Doesn't Open + **Symptom**: Nothing happens when calling `login()`. + **Fix:** + 1. Verify `manifestPlaceholders` are correctly set in `build.gradle` + 2. Ensure internet permission is in `AndroidManifest.xml`: + ```xml + + ``` + 3. Check that Chrome or another browser is installed on the device + ### iOS: "Open in App" Alert + **Symptom**: Alert box appears asking to open in your app. -If you have a [custom domain](/docs/customize/custom-domains), use this instead of the Auth0 domain from the settings page. + **Fix:** This is expected behavior with `ASWebAuthenticationSession`. To remove it: + - Use Universal Links (requires iOS 17.4+ and paid Apple Developer account) + - Or set `useEphemeralSession: true` (disables SSO): - -For the associated domain to work, your app must be signed with your team certificate **even when building for the iOS simulator**. Make sure you are using the Apple Team whose Team ID is configured in the settings page of your Auth0 application. - + ```dart expandable + await auth0.webAuthentication().login( + useHTTPS: true, + useEphemeralSession: true, + ); + ``` -## Add login to your app + ### Web: User Logged Out on Page Refresh -[Universal Login](https://auth0.com/docs/authenticate/login/auth0-universal-login) is the easiest way to set up authentication in your app. We recommend using it for the best experience, best security, and the fullest array of features. + **Symptom**: User appears logged out after refreshing the page. -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: + **Fix:** -export const codeExample3 = `import 'package:auth0_flutter/auth0_flutter.dart'; + 1. Ensure `onLoad()` is called during app initialization + 2. Try using `localStorage` for cache location: + ```dart expandable + final auth0Web = Auth0Web( + '{yourDomain}', + '{yourClientId}', + cacheLocation: CacheLocation.localStorage, + ); + ``` + 3. Ensure your domain is added to **Allowed Web Origins** in Auth0 Dashboard -class MainView extends StatefulWidget { - const MainView({Key? key}) : super(key: key); + ### Web: "Must run on a secure origin" Error - @override - State createState() => _MainViewState(); -} + **Symptom**: Error about secure origin in browser console. -class _MainViewState extends State { - Credentials? _credentials; + **Fix:** The Auth0 SPA SDK requires a secure context. Use `localhost` (which is treated as secure) or deploy to an HTTPS domain. - late Auth0 auth0; + ### Authentication cancelled by user - @override - void initState() { - super.initState(); - auth0 = Auth0('{yourDomain}', '{yourClientId}'); - } + Handle gracefully in your error handling: - @override - Widget build(BuildContext context) { - // ... + ```dart expandable + try { + final credentials = await auth0.webAuthentication().login(useHTTPS: true); + // Handle successful login + } on WebAuthenticationException catch (e) { + if (e.code == 'USER_CANCELLED') { + showMessage('Login was cancelled'); + } else { + showMessage('Login failed: ${e.message}'); + } } -}`; - - - - + ``` + + + The Auth0 Flutter SDK includes a built-in Credentials Manager that securely stores user credentials. On mobile platforms, credentials are encrypted and stored in the platform's secure storage (Keychain on iOS/macOS, encrypted SharedPreferences on Android). + ### Check for Stored Credentials + Before prompting the user to log in, check if valid credentials already exist: -Next, redirect your users to the Auth0 Universal Login page using `webAuthentication().login()`. This is a `Future` and must be awaited for you to retrieve the user's tokens. See this example of a `ElevatedButton` widget that logs the user in when clicked. Note that `_credentials` is used to determine locally within your app whether or not a user is signed in: - -```dart lines -if (_credentials == null) { - ElevatedButton( - onPressed: () async { - // Use a Universal Link callback URL on iOS 17.4+ / macOS 14.4+ - // useHTTPS is ignored on Android - final credentials = - await auth0.webAuthentication().login(useHTTPS: true); - - setState(() { - _credentials = credentials; - }); - }, - child: const Text("Log in") - ) -} -``` - - - - - - -**Android**: if you are using a custom scheme, pass this scheme to the login method so that the SDK can route to the login page and back again correctly: - -```dart lines -await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').login(); -``` - - - - - - -When a user logs in, they are redirected back to your app. Then, you are able to access the ID and access tokens for this user. - - -##### Checkpoint - -Add a button to your app that calls `webAuthentication().login()` and logs the user into your app. Verify that you are redirected to Auth0 for authentication and then back to your app. - -Verify that you can get access to the tokens on the result of calling `login`. - - -## Add logout to your app - -To log users out, redirect them to the Auth0 logout endpoint to clear their login session by calling the Auth0 Flutter SDK `webAuthentication().logout()`. [Read more about logging out of Auth0](https://auth0.com/docs/authenticate/login/logout). - -See this example of an `ElevatedButton` widget that logs the user out of the app. Note that `_credentials` is set to `null`, indicating that the user is no longer signed in to your app: - -```dart lines -ElevatedButton( - onPressed: () async { - // Use a Universal Link logout URL on iOS 17.4+ / macOS 14.4+ - // useHTTPS is ignored on Android - await auth0.webAuthentication().logout(useHTTPS: true); - - setState(() { - _credentials = null; - }); - }, - child: const Text("Log out")) -``` - - - - - - -**Android**: if you are using a custom scheme, pass this scheme to the logout method so that the SDK can route back to your app correctly: - -```dart lines -await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').logout(); -``` - + ```dart lib/auth_service.dart expandable lines + Future checkAuthentication() async { + if (kIsWeb) { + return await auth0Web.hasValidCredentials(); + } else { + return await auth0.credentialsManager.hasValidCredentials(); + } + } + ``` + ### Retrieve Stored Credentials + Retrieve credentials to access tokens or user information. The Credentials Manager automatically refreshes expired tokens when possible: + ```dart lib/auth_service.dart expandable lines + Future getCredentials() async { + if (kIsWeb) { + return await auth0Web.credentials(); + } else { + return await auth0.credentialsManager.credentials(); + } + } + ``` + + + You don't need to manually store credentials after login—the SDK handles this automatically. You also don't need to manually refresh tokens; the Credentials Manager refreshes them when needed. + + + + + Handle authentication errors gracefully to provide a good user experience. + + ### Mobile/macOS Errors + + ```dart lib/auth_service.dart expandable lines + import 'package:auth0_flutter/auth0_flutter.dart'; + + Future login() async { + try { + final credentials = await auth0.webAuthentication().login(useHTTPS: true); + // Handle successful login + } on WebAuthenticationException catch (e) { + if (e.code == 'USER_CANCELLED') { + // User cancelled the login + print('Login cancelled by user'); + } else { + // Handle other errors + print('Login error: ${e.message}'); + } + } + } - -##### Checkpoint + Future getCredentials() async { + try { + return await auth0.credentialsManager.credentials(); + } on CredentialsManagerException catch (e) { + if (e.isNoCredentialsFound) { + // No stored credentials, user needs to log in + throw Exception('Please log in first'); + } else if (e.isTokenRenewFailed) { + // Refresh token expired, re-authentication required + return await auth0.webAuthentication().login(useHTTPS: true); + } + rethrow; + } + } + ``` -Add a button to your app that calls `webAuthentication().logout()` and logs the user out of your app. When you select it, verify that your Flutter app redirects you to the logout endpoint and back again. You should not be logged in to your app. - + ### Web Errors -## Show user profile information + ```dart lib/web_auth_service.dart expandable lines + import 'package:auth0_flutter/auth0_flutter_web.dart'; -The user profile automatically retrieves user profile properties for you when you call `webAuthentication().login()`. The returned object from the login step contains a `user` property with all the user profile properties, which populates by decoding the ID token. + Future login() async { + try { + await auth0Web.loginWithRedirect(redirectUrl: 'http://localhost:3000'); + } on WebException catch (e) { + print('Login error: ${e.message}'); + } + } + ``` + + + + ### Enhanced Credential Security with Biometrics + + Implement biometric authentication for credential access on mobile: + + ```dart lib/secure_auth_service.dart expandable lines + class SecureAuthService { + final auth0 = Auth0('{yourDomain}', '{yourClientId}'); + + Future enableBiometrics() async { + // Enable local authentication (Face ID, Touch ID, Fingerprint) + await auth0.credentialsManager.enableLocalAuthentication( + title: 'Authenticate to access your account', + cancelTitle: 'Cancel', + fallbackTitle: 'Use passcode', + ); + } + + Future getCredentialsWithBiometrics() async { + // This will now require biometric authentication + return await auth0.credentialsManager.credentials(); + } + } + ``` -See this example of a `View` component that displays the user profile on the screen: + + **Android**: Requires `MainActivity` to extend `FlutterFragmentActivity` as configured in Step 4. -```dart lines -import 'package:auth0_flutter/auth0_flutter.dart'; -import 'package:flutter/material.dart'; + **iOS/macOS**: Requires adding `NSFaceIDUsageDescription` to your `Info.plist`. + -class ProfileView extends StatelessWidget { - const ProfileView({Key? key, required this.user}) : super(key: key); + ### Custom Scopes and Audience - final UserProfile user; + Request specific scopes and audience for your API: - @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!) - ], + ```dart lib/auth_service.dart expandable lines + Future loginWithCustomScopes() async { + return await auth0.webAuthentication().login( + useHTTPS: true, + scopes: {'openid', 'profile', 'email', 'offline_access', 'read:posts'}, + audience: 'https://myapi.example.com', + parameters: {'prompt': 'login'}, ); } -} -``` - + ``` + ### Organizations (B2B/Enterprise) + Authenticate users within a specific organization: + ```dart lib/auth_service.dart expandable lines + Future loginWithOrganization(String organizationId) async { + return await auth0.webAuthentication().login( + useHTTPS: true, + organizationId: organizationId, + ); + } + // Or prompt user to select an organization + Future loginWithOrganizationName(String organizationName) async { + return await auth0.webAuthentication().login( + useHTTPS: true, + organizationName: organizationName, + ); + } + ``` + - -##### Checkpoint + + ### App Store Preparation -Log in and inspect the `user` property on the result. Verify the current user's profile information, such as `email` or `name`. + * Configure Universal Links (iOS) and App Links (Android) for seamless authentication + * Test on multiple device sizes and OS versions + * Implement proper error handling for network failures + * Add ProGuard rules for Android if using code obfuscation + * Follow platform-specific App Store/Play Store policies - + ### Security Considerations - -##### What can you do next? - - - - - - - - - -
Configure other identity providersEnable multifactor authentication
Learn about attack protectionLearn about rules
-[Edit on GitHub](https://github.com/auth0/docs/edit/master/articles/quickstart/native/flutter/01-login.md) - + * Use the built-in Credentials Manager for production credential storage + * Enable biometric authentication for sensitive operations + * Consider certificate pinning for additional API security + * Implement proper token refresh handling + * Use `useHTTPS: true` for Universal Links on supported platforms + --- +## Next Steps - - - +Check out the [EXAMPLES.md](https://github.com/auth0/auth0-flutter/blob/main/auth0_flutter/EXAMPLES.md) file in the SDK repository for comprehensive code examples covering advanced scenarios like DPoP, biometric authentication, passwordless login and many more features. diff --git a/main/docs/quickstart/native/flutter/interactive.mdx b/main/docs/quickstart/native/flutter/interactive.mdx deleted file mode 100644 index 96fbc219f..000000000 --- a/main/docs/quickstart/native/flutter/interactive.mdx +++ /dev/null @@ -1,318 +0,0 @@ ---- - -mode: wide -description: This guide demonstrates how to integrate Auth0 with a Flutter app - using the Auth0 Flutter SDK. -'og:image': https://cdn2.auth0.com/docs/1.14553.0/img/share-image.png -'og:title': 'Auth0 Flutter SDK Quickstarts: Add Login to Your Flutter Application' -'og:url': https://auth0.com/docs/ -sidebarTitle: Flutter (Mobile) -title: Add Login to Your Flutter Application -'twitter:description': This guide demonstrates how to integrate Auth0 with a Flutter - app using the Auth0 Flutter SDK. -'twitter:title': 'Auth0 Flutter SDK Quickstarts: Add Login to Your Flutter Application' ---- -import { Recipe, Content, Section, SideMenu, SideMenuSectionItem, SignUpForm } from "/snippets/recipe.jsx"; -import { LoggedInForm } from "/snippets/Login.jsx"; -import Build from "/snippets/quickstart/native/flutter/build.gradle.mdx"; -import MainView from "/snippets/quickstart/native/flutter/main_view.dart.mdx"; -import MainView2 from "/snippets/quickstart/native/flutter/main_view.dart2.mdx"; -import ProfileView from "/snippets/quickstart/native/flutter/profile_view.dart.mdx"; - -import {QuickstartButtons} from "/snippets/QuickstartButtons.jsx"; - -import {AuthCodeGroup} from "/snippets/AuthCodeGroup.jsx"; - - - -export const sections = [ - { id: "configure-auth0", title: "Configure Auth0" }, - { id: "install-the-auth0-flutter-sdk", title: "Install the Auth0 Flutter SDK" }, - { id: "configure-android", title: "Configure Android" }, - { id: "configure-ios-macos", title: "Configure iOS/macOS" }, - { id: "add-login-to-your-application", title: "Add login to your application" }, - { id: "add-logout-to-your-application", title: "Add logout to your application" }, - { id: "show-user-profile-information", title: "Show user profile information" } -] - - - - Auth0 allows you to quickly add authentication and access user profile information in your app. This guide - demonstrates how to integrate Auth0 with a Flutter app using the [Auth0 Flutter SDK](https://github.com/auth0/auth0-flutter). - - - The Flutter SDK currently only supports Flutter apps for Android, iOS, and macOS. - - - This quickstart assumes you already have a [Flutter](https://flutter.dev/) app up and running. If not, check out the [Flutter "getting - started" guides](https://docs.flutter.dev/get-started/install) to get started with a simple app. - - You should also be familiar with the [Flutter command line tool](https://docs.flutter.dev/reference/flutter-cli). - - - **New to Auth?** Learn [How Auth0 works](https://auth0.com/docs/overview), - how it [integrates with Single-Page Applications](https://auth0.com/docs/architecture-scenarios/application/spa-api) and which [protocol](https://auth0.com/docs/flows/concepts/auth-code-pkce) it uses. - - -
- To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is - where you will configure how you want authentication to work for your project. - - ### Configure an Auth0 application - - Use the interactive selector to create a new Auth0 application or select an existing **Native** Auth0 - application. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code - will use to call Auth0 APIs through the SDK. - - Any settings you configure using this quickstart will automatically update for your application in the [Dashboard](https://manage.auth0.com/dashboard/us/auth0-dsepaid/), which is where you can manage your applications in the future. - - If you would rather explore a complete configuration, you can view a sample app instead. - - ### Configure the callback and logout URLs - - The callback and logout URLs are the URLs that Auth0 invokes to redirect back to your app. Auth0 invokes the - callback URL after authenticating the user, and the logout URL after removing the session cookie. If the callback - and logout URLs are not set, users will be unable to log in and out of the app and will get an error. - - Set the callback and logout URLs to the following values, depending on your platform. - - - On Android, the value of the `SCHEME` placeholder can be `https` or some other - custom scheme. `https` schemes require enabling [Android App Links](https://auth0.com/docs/get-started/applications/enable-android-app-links-support). - - On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links (`https` scheme) as - callback and logout URLs. When enabled, the SDK will fall back to using a custom URL scheme on older iOS - / macOS versions –your app's [bundle identifier](https://developer.apple.com/documentation/appstoreconnectapi/bundle_ids). **This feature requires Xcode 15.3+ and a paid Apple - Developer account**. - - - #### Android - - ``` - SCHEME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback - ``` - - #### iOS - - ``` - https://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback, - ``` - - ``` - YOUR_BUNDLE_IDENTIFIER://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback - ``` - - #### macOS - - ``` - https://{yourDomain}/macos/YOUR_BUNDLE_IDENTIFIER/callback, - ``` - - ``` - YOUR_BUNDLE_IDENTIFIER://{yourDomain}/macos/YOUR_BUNDLE_IDENTIFIER/callback - ``` - - For example, if your iOS bundle identifier were `com.example.MyApp` and your Auth0 domain were - `example.us.auth0.com`, then this value would be: - - ``` - https://example.us.auth0.com/ios/com.example.MyApp/callback, - ``` - - ``` - com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback - ``` -
- -
- Add the Auth0 Flutter SDK into the project: - - ``` - flutter pub add auth0_flutter - ``` -
- -
- If you are not developing for the Android platform, skip this step. - - The SDK requires manifest placeholders. Auth0 uses placeholders internally to define an - `intent-filter`, which captures the authentication callback URL. You must set the Auth0 tenant domain - and the callback URL scheme. - - The [sample](https://github.com/auth0-samples/auth0-flutter-samples/tree/main/sample/android) uses the following placeholders: - - - `auth0Domain`: The domain of your Auth0 tenant. Generally, you find this in the Auth0 Dashboard - under your **Application Settings** in the **Domain** field. If you are using a custom domain, you - should set this to the value of your custom domain instead. - - `auth0Scheme`: The scheme to use. Can be a custom scheme, or https if you want to use [Android App Links](https://auth0.com/docs/applications/enable-android-app-links). - You can read more about setting this value in the [Auth0.Android SDK README](https://github.com/auth0/Auth0.Android#a-note-about-app-deep-linking). - - - You do not need to declare a specific `intent-filter` for your activity because you defined - the manifest placeholders with your Auth0 **Domain** and **Scheme** values. The library handles - the redirection for you. - - - Run **Sync Project with Gradle Files** inside Android Studio to apply your changes. -
- -
- If you are not developing for the iOS or macOS platforms, skip this step. - - - This step requires a paid Apple Developer account. It is needed to use Universal Links as callback and - logout URLs. Skip this step to use a custom URL scheme instead. - - - ### Configure the Team ID and bundle identifier - - Go to the [settings page](https://manage.auth0.com/#/applications/{yourClientId}/settings) of your Auth0 application, scroll to the end, and open **Advanced - Settings > Device Settings**. In the **iOS** section, set **Team ID** to your [Apple Team ID](https://developer.apple.com/help/account/manage-your-team/locate-your-team-id/), and **App ID** to your app's bundle identifier. - - - - - - This will add your app to your Auth0 tenant's `apple-app-site-association` file. - - ### Add the associated domain capability - - Open your app in Xcode by running `open ios/Runner.xcworkspace` (or - `open macos/Runner.xcworkspace` for macOS). Go to the **Signing and Capabilities** [tab](https://developer.apple.com/documentation/xcode/adding-capabilities-to-your-app#Add-a-capability) of the **Runner** target settings, and press the **+ - Capability** button. Then select **Associated Domains**. - - - - - - Next, add the following [entry](https://developer.apple.com/documentation/xcode/configuring-an-associated-domain#Define-a-service-and-its-associated-domain) under **Associated Domains**: - - ``` - webcredentials:{yourDomain} - ``` - - - For the associated domain to work, your app must be signed with your team certificate **even when - building for the iOS simulator**. Make sure you are using the Apple Team whose Team ID is configured - in the settings page of your Auth0 application. - -
- -
- Universal Login is the easiest way to set up - authentication in your app. 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 using the `Auth0` class. Redirect your users to - the Auth0 Universal Login page using `webAuthentication().login()`. This is a `Future` and - must be awaited for you to retrieve the user's tokens. - - **Android**: if you are using a custom scheme, pass this scheme to the login method so that the SDK can route - to the login page and back again correctly: - - ``` - await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').login(); - ``` - - When a user logs in, they are redirected back to your app. Then, you are able to access the ID and access tokens - for this user. - - - ##### Checkpoint - - Add a button to your app that calls `webAuthentication().login()` and logs the user into your - app. Verify that you are redirected to Auth0 for authentication and then back to your app. - - Verify that you can get access to the tokens on the result of calling `login`. - -
- -
- To log users out, redirect them to the Auth0 logout endpoint to clear their login session by calling the Auth0 - Flutter SDK `webAuthentication().logout()`. Read - more about logging out of Auth0. - - **Android**: if you are using a custom scheme, pass this scheme to the logout method so that the SDK can route - back to your app correctly: - - ``` - await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').logout(); - ``` - - - ##### Checkpoint - - Add a button to your app that calls `webAuthentication().logout()` and logs the user out of - your app. When you select it, verify that your Flutter app redirects you to the logout endpoint and back - again. You should not be logged in to your app. - -
- -
- The user profile automatically retrieves user profile properties for you when you call - `webAuthentication().login()`. The returned object from the login step contains a `user` - property with all the user profile properties, which populates by decoding the ID token. - - - ##### Checkpoint - - Log in and inspect the `user` property on the result. Verify the current user's profile - information, such as `email` or `name`. - -
- - ## 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](https://manage.auth0.com/dashboard/us/dev-gja8kxz4ndtex3rq) - Learn how to configure and manage your Auth0 tenant and applications - * [auth0-flutter SDK](https://www.github.com/auth0/auth0-flutter/) - Explore the SDK used in this tutorial more fully - * [Auth0 Marketplace](https://marketplace.auth0.com/) - Discover integrations you can enable to extend Auth0’s functionality - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -