diff --git a/articles/quickstart/native/flutter/01-login.md b/articles/quickstart/native/flutter/01-login.md index 1ed559b5c1..23dc29a74a 100644 --- a/articles/quickstart/native/flutter/01-login.md +++ b/articles/quickstart/native/flutter/01-login.md @@ -1,7 +1,7 @@ --- title: Add login to your Flutter app default: true -description: This tutorial demonstrates how to add user login with Auth0 to an Android or iOS Flutter application using the Auth0 Flutter SDK +description: This tutorial demonstrates how to add user login with Auth0 to an Android, iOS, or macOS Flutter app using the Auth0 Flutter SDK budicon: 448 topics: - quickstarts @@ -9,6 +9,7 @@ topics: - flutter - dart - ios + - macos - android contentType: tutorial useCase: quickstart @@ -22,15 +23,15 @@ github: # 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 application using the [Auth0 Flutter SDK](https://github.com/auth0/auth0-flutter). +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). :::note -The Flutter SDK currently only supports Flutter applications running on Android or iOS platforms. +The Flutter SDK currently only supports Flutter app running on Android, iOS, and macOS platforms. ::: ## Getting started -This quickstart assumes you already have a [Flutter](https://flutter.dev/) application 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 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). @@ -69,7 +70,7 @@ android { } ``` -- `auth0Domain`: The domain of your Auth0 tenant. Generally, you find this in the Auth0 Dashboard under your Application's **Settings** in the Domain field. If you are using a custom domain, you should set this to the value of your custom domain instead. +- `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). :::note @@ -78,9 +79,9 @@ You do not need to declare a specific `intent-filter` for your activity because Run **Sync Project with Gradle Files** inside Android Studio to apply your changes. -## Configure iOS +## Configure iOS/macOS -If you are not developing for the iOS platform, skip this step. +If you are not developing for the iOS or macOS platform, skip this step. You need to register your bundle identifier as a custom URL scheme so the callback and logout URLs can reach your app. @@ -88,13 +89,9 @@ In Xcode, go to the **Info** tab of your app target settings. In the **URL Types

Custom URL Scheme

-:::note -The minimum target platform supported by the SDK is **iOS 12**. -::: - ## Add login to your app -[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. +[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. 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: @@ -150,17 +147,17 @@ if (_credentials == null) { await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').login(); ``` -When a user logs in, they are redirected back to your application. Then, you are able to access the ID and access tokens for this user. +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 :::checkpoint-default -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 application. +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`. ::: :::checkpoint-failure -If your application did not launch successfully: +If your app did not launch successfully: - Ensure you set the Allowed Callback URLs are correct - Verify you saved your changes after entering your URLs @@ -197,11 +194,11 @@ await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').logout(); ::::checkpoint :::checkpoint-default -Add a button to your app that calls `webAuthentication().logout()` and logs the user out of your application. 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 application. +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. ::: :::checkpoint-failure -If your application did not log out successfully: +If your app did not log out successfully: - Ensure the Allowed Logout URLs are set properly - Verify you saved your changes after entering your URLs @@ -243,7 +240,7 @@ class ProfileView extends StatelessWidget { Log in and inspect the `user` property on the result. Verify the current user's profile information, such as `email` or `name`. ::: :::checkpoint-failure -If your application did not return user profile information: +If your app did not return user profile information: - Verify the access token is valid diff --git a/articles/quickstart/native/flutter/_configure_urls_interactive.md b/articles/quickstart/native/flutter/_configure_urls_interactive.md index 3404e07181..7048f366b6 100644 --- a/articles/quickstart/native/flutter/_configure_urls_interactive.md +++ b/articles/quickstart/native/flutter/_configure_urls_interactive.md @@ -3,20 +3,20 @@ 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. :::note -The URLs below make use of a `SCHEME` placeholder, and this value varies depending on what platform you're working with. On Android, this can be `https` or some other custom scheme. On iOS, this is your application's [bundle identifier](https://developer.apple.com/documentation/appstoreconnectapi/bundle_ids). +The URLs below make use of a `SCHEME` placeholder, and this value varies depending on what platform you're working with. On Android, this can be `https` or some other custom scheme. On iOS/macOS, this is your app's [bundle identifier](https://developer.apple.com/documentation/appstoreconnectapi/bundle_ids). ::: -### Configure an application +### Configure an Auth0 application Use the interactive selector to create a new "Native Application", or select an existing application that represents the project you want to integrate with. 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, which is where you can manage your applications in the future. -If you would rather explore a complete configuration, you can view a sample application instead. +If you would rather explore a complete configuration, you can view a sample app instead. ### Configure Callback URLs -A callback URL is a URL in your application that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your application after they log in. +A callback URL is a URL in your app that you would like Auth0 to redirect users to after they have authenticated. If not set, users will not be returned to your app after they log in. ::: note If you are following along with our sample project, set this to one of the following URLs, depending on your platform: @@ -24,11 +24,13 @@ If you are following along with our sample project, set this to one of the follo **Android**: `SCHEME://${account.namespace}/android/YOUR_PACKAGE_NAME/callback` **iOS**: `YOUR_BUNDLE_ID://${account.namespace}/ios/YOUR_BUNDLE_ID/callback` + +**macOS**: `YOUR_BUNDLE_ID://${account.namespace}/macos/YOUR_BUNDLE_ID/callback` ::: ### Configure Logout URLs -A logout URL is a URL in your application that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your application and will receive an error. +A logout URL is a URL in your app that you would like Auth0 to redirect users to after they have logged out. If not set, users will not be able to log out from your app and will receive an error. ::: note If you are following along with our sample project, set this to one of the following URLs, depending on your platform: @@ -36,6 +38,8 @@ If you are following along with our sample project, set this to one of the follo **Android**: `SCHEME://${account.namespace}/android/YOUR_PACKAGE_NAME/callback` **iOS**: `YOUR_BUNDLE_ID://${account.namespace}/ios/YOUR_BUNDLE_ID/callback` + +**macOS**: `YOUR_BUNDLE_ID://${account.namespace}/macos/YOUR_BUNDLE_ID/callback` ::: Lastly, be sure that the **Application Type** for your application is set to **Native** in the [Application Settings](${manage_url}/#/applications/${account.clientId}/settings). diff --git a/articles/quickstart/native/flutter/download.md b/articles/quickstart/native/flutter/download.md index d447e1d32c..21e0e2f1da 100644 --- a/articles/quickstart/native/flutter/download.md +++ b/articles/quickstart/native/flutter/download.md @@ -1,9 +1,9 @@ To run the sample follow these steps: -1) Set the **Allowed Callback URLs** and **Allowed Logout URLs** in the [Application Settings](${manage_url}/#/applications/${account.clientId}/settings) to the following value so it works for both Android and iOS apps: +1) Set the **Allowed Callback URLs** and **Allowed Logout URLs** in the [Application Settings](${manage_url}/#/applications/${account.clientId}/settings) to the following value so it works for Android, iOS, and macOS apps: ```text -com.auth0.samples.FlutterSample://${account.namespace}/ios/com.auth0.samples.FlutterSample/callback,com.auth0.sample://${account.namespace}/android/com.auth0.sample/callback +com.auth0.samples.FlutterSample://${account.namespace}/ios/com.auth0.samples.FlutterSample/callback,com.auth0.sample://${account.namespace}/android/com.auth0.sample/callback,com.auth0.sample://${account.namespace}/macos/com.auth0.sample/callback ``` 2) Rename the file `.env.example` to `.env` and fill in the following values: diff --git a/articles/quickstart/native/flutter/index.yml b/articles/quickstart/native/flutter/index.yml index 6b81447b88..c09ff74e18 100644 --- a/articles/quickstart/native/flutter/index.yml +++ b/articles/quickstart/native/flutter/index.yml @@ -35,8 +35,9 @@ github: branch: main requirements: - Flutter 3+ - - Xcode 13+ (for iOS) - - Android Studio 4+ (for Android) + - Android API 21+ and Android Studio 4+ (for Android) + - iOS 13+ and Xcode 14+ (for iOS) + - macOS 11+ and Xcode 14+ (for macOS) next_steps: - path: interactive list: diff --git a/articles/quickstart/native/flutter/interactive.md b/articles/quickstart/native/flutter/interactive.md index 3d80b2580b..dbeb7f839f 100644 --- a/articles/quickstart/native/flutter/interactive.md +++ b/articles/quickstart/native/flutter/interactive.md @@ -1,7 +1,7 @@ --- title: Add login to your Flutter app default: true -description: This tutorial demonstrates how to add user login with Auth0 to an Android or iOS Flutter application using the Auth0 Flutter SDK +description: This tutorial demonstrates how to add user login with Auth0 to an Android, iOS, or macOS Flutter app using the Auth0 Flutter SDK budicon: 448 topics: - quickstarts @@ -9,6 +9,7 @@ topics: - flutter - dart - ios + - macos - android contentType: tutorial useCase: quickstart @@ -23,13 +24,13 @@ github: # 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 application using the [Auth0 Flutter SDK](https://github.com/auth0/auth0-flutter). +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). :::note -The Flutter SDK currently only supports Flutter applications running on Android or iOS platforms. +The Flutter SDK currently only supports Flutter apps running on Android, iOS, and macOS platforms. ::: -This quickstart assumes you already have a [Flutter](https://flutter.dev/) application 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 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). @@ -51,7 +52,7 @@ The SDK requires manifest placeholders. Auth0 uses placeholders internally to de [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's **Settings** in the Domain field. If you are using a custom domain, you should set this to the value of your custom domain instead. +- `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). :::note @@ -60,9 +61,9 @@ You do not need to declare a specific `intent-filter` for your activity because Run **Sync Project with Gradle Files** inside Android Studio to apply your changes. -## Configure iOS +## Configure iOS/macOS -If you are not developing for the iOS platform, skip this step. +If you are not developing for the iOS or macOS platform, skip this step. You need to register your bundle identifier as a custom URL scheme so the callback and logout URLs can reach your app. @@ -72,7 +73,7 @@ In Xcode, go to the **Info** tab of your app target settings. In the **URL Types ## Add login to your app {{{ data-action="code" data-code="main_view.dart#29:38" }}} -[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. +[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. 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. @@ -82,17 +83,17 @@ Integrate Auth0 Universal Login in your Flutter app by using the `Auth0` class. await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').login(); ``` -When a user logs in, they are redirected back to your application. Then, you are able to access the ID and access tokens for this user. +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 :::checkpoint-default -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 application. +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`. ::: :::checkpoint-failure -If your application did not launch successfully: +If your app did not launch successfully: - Ensure you set the Allowed Callback URLs are correct - Verify you saved your changes after entering your URLs @@ -115,11 +116,11 @@ await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').logout(); ::::checkpoint :::checkpoint-default -Add a button to your app that calls `webAuthentication().logout()` and logs the user out of your application. 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 application. +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. ::: :::checkpoint-failure -If your application did not log out successfully: +If your app did not log out successfully: - Ensure the Allowed Logout URLs are set properly - Verify you saved your changes after entering your URLs @@ -137,7 +138,7 @@ The user profile automatically retrieves user profile properties for you when yo Log in and inspect the `user` property on the result. Verify the current user's profile information, such as `email` or `name`. ::: :::checkpoint-failure -If your application did not return user profile information: +If your app did not return user profile information: - Verify the access token is valid