Skip to content

Commit

Permalink
Update native Flutter QS with macOS support (#10340)
Browse files Browse the repository at this point in the history
  • Loading branch information
Widcket authored Dec 15, 2023
1 parent a97082c commit 12e6af4
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 41 deletions.
33 changes: 15 additions & 18 deletions articles/quickstart/native/flutter/01-login.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
---
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
- native
- flutter
- dart
- ios
- macos
- android
contentType: tutorial
useCase: quickstart
Expand All @@ -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).

Expand Down Expand Up @@ -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
Expand All @@ -78,23 +79,19 @@ 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.

In Xcode, go to the **Info** tab of your app target settings. In the **URL Types** section, select the **** button to add a new entry. Then enter `auth0` into the **Identifier** field and `$(PRODUCT_BUNDLE_IDENTIFIER)` into the **URL Schemes** field.

<p><img src="/media/articles/native-platforms/ios-swift/url-scheme.png" alt="Custom URL Scheme"></p>

:::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:

Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,43 @@
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 <a href="${manage_url}/#/">Dashboard</a>, 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:

**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:

**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).
4 changes: 2 additions & 2 deletions articles/quickstart/native/flutter/download.md
Original file line number Diff line number Diff line change
@@ -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:
Expand Down
5 changes: 3 additions & 2 deletions articles/quickstart/native/flutter/index.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
29 changes: 15 additions & 14 deletions articles/quickstart/native/flutter/interactive.md
Original file line number Diff line number Diff line change
@@ -1,14 +1,15 @@
---
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
- native
- flutter
- dart
- ios
- macos
- android
contentType: tutorial
useCase: quickstart
Expand All @@ -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).

Expand All @@ -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
Expand All @@ -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.

Expand All @@ -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.

Expand All @@ -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
Expand All @@ -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
Expand All @@ -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

Expand Down

0 comments on commit 12e6af4

Please sign in to comment.