From 45fa81ea946ee823f7b5140fb9ca460b69026fdf Mon Sep 17 00:00:00 2001
From: Harish Sundar To use Auth0 services, you’ll 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 the project you are developing. Use the interactive selector to create a new Auth0 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. 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. If you are following along with our sample project, set this to Configure an application
Configure Callback URLs
http://localhost:3000
.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
If you are following along with our sample project, set this to http://localhost:3000
.
To use Auth0 services, you’ll 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 the project you are developing.
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
If you are following along with our sample project, set this to http://localhost:3000
.
Use Auth0 CLI to enable ACLU Login ID screen in your tenant. +
Use Auth0 CLI to enable ACLU Login ID screen in your tenant. @@ -55,7 +55,7 @@ npm install -
Open your application (default: http://localhost:3000)
Select the Log In button on the sample app
You should be redirected to your Auth0 domain
After selecting Log In, you should see a blank page.
This is expected! It means Auth0 is trying to load your custom UI assets, which we have not created yet.
Open your application (default: http://localhost:3000)
Select the Log In button on the sample app
You should be redirected to your Auth0 domain
After selecting Log In, you should see a blank page.
This is expected! It means Auth0 is trying to load your custom UI assets, which we have not created yet.
2. Change directory to the auth0-acul-react-boilerplate
folder and install the application and the ACUL JS SDK.
// open the directory where you git clone the boilerplate
+2. Change directory to the auth0-acul-react-boilerplate
folder and install the application and the ACUL JS SDK.
// open the directory where you git clone the boilerplate
cd auth0-acul-react-boilerplate && npm i
@@ -100,7 +100,7 @@ npm install @auth0/auth0-acul-js
- Make sure to have installed the ACUL JS SDK after installing the boilerplate application.
+ Make sure to have installed the ACUL JS SDK after installing the boilerplate application.
Change directory to the auth0-acul-react-boilerplate/src/screens/loginId/
and edit the index.tsx
file.
Rebuild the application with the following command:
npm run build
diff --git a/articles/quickstart/backend/aspnet-core-webapi/interactive.md b/articles/quickstart/backend/aspnet-core-webapi/interactive.md
index 3c88df47b9..8b881c804e 100644
--- a/articles/quickstart/backend/aspnet-core-webapi/interactive.md
+++ b/articles/quickstart/backend/aspnet-core-webapi/interactive.md
@@ -9,7 +9,7 @@ files:
- files/HasScopeRequirement
- files/ApiController
github:
- path: https://github.com/auth0-samples/auth0-aspnetcore-webapi-samples/tree/master/Quickstart/01-Authorization
+ path: Quickstart/01-Authorization
locale: en-US
---
@@ -21,7 +21,7 @@ locale: en-US
## Define permissions
-Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and grant write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages
scope.
+Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and grant write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages
scope.
## Install dependencies
@@ -42,100 +42,572 @@ locale: en-US
## Validate scopes {{{ data-action="code" data-code="HasScopeHandler.cs" }}}
-To ensure that an access token contains the correct scopes, use Policy-Based Authorization in the ASP.NET Core:
Create a new authorization requirement called HasScopeRequirement
, which will check whether the scope
claim issued by your Auth0 tenant is present, and if so, will check that the claim contains the requested scope.
Under your Program.cs
file's var builder = WebApplication.CreateBuilder(args);
method, add a call to the app.AddAuthorization
method.
Add policies for scopes by calling AddPolicy
for each scope.
Register a singleton for the HasScopeHandler
class.
+To ensure that an access token contains the correct scopes, use Policy-Based Authorization in the ASP.NET Core:
Create a new authorization requirement called HasScopeRequirement
, which will check whether the scope
claim issued by your Auth0 tenant is present, and if so, will check that the claim contains the requested scope.
Under your Program.cs
file's var builder = WebApplication.CreateBuilder(args);
method, add a call to the app.AddAuthorization
method.
Add policies for scopes by calling AddPolicy
for each scope.
Register a singleton for the HasScopeHandler
class.
## Protect API endpoints {{{ data-action="code" data-code="ApiController.cs" }}}
-The JWT middleware integrates with the standard ASP.NET Core Authentication and Authorization mechanisms.
To secure an endpoint, add the [Authorize]
attribute to your controller action (or the entire controller if you want to protect all of its actions).
When securing endpoints that require specific scopes, make sure that the correct scope is present in the access_token
. To do so, add the Authorize
attribute to the Scoped
action and pass read:messages
as the policy
parameter.
+The JWT middleware integrates with the standard ASP.NET Core Authentication and Authorization mechanisms.
To secure an endpoint, add the [Authorize]
attribute to your controller action (or the entire controller if you want to protect all of its actions).
When securing endpoints that require specific scopes, make sure that the correct scope is present in the access_token
. To do so, add the Authorize
attribute to the Scoped
action and pass read:messages
as the policy
parameter.
## Call your API
-The way in which you call your API depends on the type of application you are developing and the framework you are using. To learn more, read the relevant application Quickstart:
-* Single-Page Applications
-* Mobile / Native Application
+The way in which you call your API depends on the type of application you are developing and the framework you are using. To learn more, read the relevant application Quickstart:
Get an access token
Regardless of the type of application you are developing or the framework you are using, to call your API, you need an access token.
If you call your API from a Single-Page Application (SPA) or Native application, you will receive an access token after the authorization flow completes.
If you call the API from a command-line tool or other service where a user entering credentials does not exist, use the OAuth Client Credentials Flow. To do so, register a Machine-to-Machine Application and pass the following values in your request:
Client ID as the client_id
parameter.
Client Secret as the client_secret
parameter.
API Identifier (the same value used to configure the middleware earlier in this quickstart) as the audience
parameter.
To learn more about getting the Client ID and Client Secret for your machine-to-machine application, read Application Settings.
Example request
-### Get an access token
+
-Regardless of the type of application you are developing or the framework you are using, to call your API, you need an access token.
+ OAuth Client Credentials Flow. To do so, register a Machine-to-Machine Application, and pass in the **Client ID** as the `client_id` parameter, the **Client Secret** as the `client_secret` parameter, and the API Identifier (the same value you used to configure the middleware earlier in this quickstart) as the `audience` parameter when making the following request:
-:::note
-To learn more about getting the Client ID and Client Secret for your machine-to-machine application, read Application Settings.
-:::
+
+
+ curl --request post \
+
+ --url 'https://${account.namespace}/oauth/token' \
+
+ --header 'content-type: application/x-www-form-urlencoded'
var client = new RestClient("https://${account.namespace}/oauth/token");
+
+var request = new RestRequest(Method.POST);
+
+request.AddHeader("content-type", "application/x-www-form-urlencoded");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "https://${account.namespace}/oauth/token"
+
+
+
+ req, _ := http.NewRequest("post", url, nil)
+
+
+
+ req.Header.Add("content-type", "application/x-www-form-urlencoded")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/token")
+
+ .header("content-type", "application/x-www-form-urlencoded")
+
+ .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+ method: 'post',
+
+ url: 'https://${account.namespace}/oauth/token',
+
+ headers: {'content-type': 'application/x-www-form-urlencoded'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+ console.log(response.data);
+
+}).catch(function (error) {
+
+ console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"content-type": @"application/x-www-form-urlencoded" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"https://${account.namespace}/oauth/token"]
+
+ cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+ timeoutInterval:10.0];
+
+[request setHTTPMethod:@"post"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+NSURLSession *session = [NSURLSession sharedSession];
+
+NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
+
+ completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
+
+ if (error) {
+
+ NSLog(@"%@", error);
+
+ } else {
+
+ NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
+
+ NSLog(@"%@", httpResponse);
+
+ }
+
+ }];
+
+[dataTask resume];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+ CURLOPT_URL => "https://${account.namespace}/oauth/token",
+
+ CURLOPT_RETURNTRANSFER => true,
+
+ CURLOPT_ENCODING => "",
+
+ CURLOPT_MAXREDIRS => 10,
+
+ CURLOPT_TIMEOUT => 30,
+
+ CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+ CURLOPT_CUSTOMREQUEST => "post",
+
+ CURLOPT_HTTPHEADER => [
+
+ "content-type: application/x-www-form-urlencoded"
-```har
-{
- "method": "POST",
- "url": "https://${account.namespace}/oauth/token",
- "headers": [
- { "name": "Content-Type", "value": "application/x-www-form-urlencoded" }
],
- "postData": {
- "mimeType": "application/x-www-form-urlencoded",
- "params": [
- {
- "name": "grant_type",
- "value": "client_credentials"
- },
- {
- "name": "client_id",
- "value": "${account.clientId}"
- },
- {
- "name": "client_secret",
- "value": "YOUR_CLIENT_SECRET"
- },
- {
- "name": "audience",
- "value": "${apiIdentifier}"
- }
- ]
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+ echo "cURL Error #:" . $err;
+
+} else {
+
+ echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPSConnection("")
+
+
+
+headers = { 'content-type': "application/x-www-form-urlencoded" }
+
+
+
+conn.request("post", "/${account.namespace}/oauth/token", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+require 'openssl'
+
+
+
+url = URI("https://${account.namespace}/oauth/token")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+http.use_ssl = true
+
+http.verify_mode = OpenSSL::SSL::VERIFY_NONE
+
+
+
+request = Net::HTTP::Post.new(url)
+
+request["content-type"] = 'application/x-www-form-urlencoded'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["content-type": "application/x-www-form-urlencoded"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "https://${account.namespace}/oauth/token")! as URL,
+
+ cachePolicy: .useProtocolCachePolicy,
+
+ timeoutInterval: 10.0)
+
+request.httpMethod = "post"
+
+request.allHTTPHeaderFields = headers
+
+
+
+let session = URLSession.shared
+
+let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
+
+ if (error != nil) {
+
+ print(error)
+
+ } else {
+
+ let httpResponse = response as? HTTPURLResponse
+
+ print(httpResponse)
+
}
-}
-```
-### Call a secure endpoint
+})
+
+
+
+dataTask.resume()
+
+
-Now that you have an access token, you can use it to call secure API endpoints. When calling a secure endpoint, you must include the access token as a Bearer token in the **Authorization** header of the request. For example, you can make a request to the `/api/private` endpoint:
+
-If you are calling your API from a Single-Page Application (SPA) or a Native application, after the authorization flow completes, you will get an access token.
-If you are calling the API from a command-line tool or another service where a user entering credentials does not exist, use the Call a secure endpoint
Now that you have an access token, you can use it to call secure API endpoints. When calling a secure endpoint, you must include the access token as a Bearer token in the Authorization header of the request. For example, you can make a request to the /api/private
endpoint:
-```har
-{
- "method": "GET",
- "url": "http://localhost:3010/api/private",
- "headers": [
- { "name": "Authorization", "value": "Bearer YOUR_ACCESS_TOKEN" }
- ]
-}
-```
+
-Call the `/api/private-scoped` endpoint in a similar way, but ensure that the API permissions are configured correctly and that the access token includes the `read:messages` scope.
+ curl --request get \
+
+ --url http://localhost:3010/api/private \
+
+ --header 'authorization: Bearer YOUR_ACCESS_TOKEN'
var client = new RestClient("http://localhost:3010/api/private");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http://localhost:3010/api/private"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http://localhost:3010/api/private")
+
+ .header("authorization", "Bearer YOUR_ACCESS_TOKEN")
+
+ .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+ method: 'get',
+
+ url: 'http://localhost:3010/api/private',
+
+ headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+ console.log(response.data);
+
+}).catch(function (error) {
+
+ console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http://localhost:3010/api/private"]
+
+ cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+ timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+NSURLSession *session = [NSURLSession sharedSession];
+
+NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
+
+ completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
+
+ if (error) {
+
+ NSLog(@"%@", error);
+
+ } else {
+
+ NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
+
+ NSLog(@"%@", httpResponse);
+
+ }
+
+ }];
+
+[dataTask resume];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+ CURLOPT_PORT => "3010",
+
+ CURLOPT_URL => "http://localhost:3010/api/private",
+
+ CURLOPT_RETURNTRANSFER => true,
+
+ CURLOPT_ENCODING => "",
+
+ CURLOPT_MAXREDIRS => 10,
+
+ CURLOPT_TIMEOUT => 30,
+
+ CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+ CURLOPT_CUSTOMREQUEST => "get",
+
+ CURLOPT_HTTPHEADER => [
+
+ "authorization: Bearer YOUR_ACCESS_TOKEN"
+
+ ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+ echo "cURL Error #:" . $err;
+
+} else {
+
+ echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("localhost:3010")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN" }
+
+
+
+conn.request("get", "/api/private", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http://localhost:3010/api/private")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http://localhost:3010/api/private")! as URL,
+
+ cachePolicy: .useProtocolCachePolicy,
+
+ timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+let session = URLSession.shared
+
+let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
+
+ if (error != nil) {
+
+ print(error)
+
+ } else {
+
+ let httpResponse = response as? HTTPURLResponse
+
+ print(httpResponse)
+
+ }
-::::checkpoint
+})
-:::checkpoint-default
-You should now be able to call the `/api/private` and `/api/private-scoped` endpoints.
-Run your application, and verify that:
-- `GET /api/private` is available for authenticated requests.
-- `GET /api/private-scoped` is available for authenticated requests containing an access token with the `read:messages` scope.
+dataTask.resume()
-:::
-:::checkpoint-failure
-Sorry about that. Here are a few things to double check:
-- make sure `ValidIssuer` and `ValidAudience` are configured correctly
-- make sure the token is added as the `Authorization` header
-- check that the token has the correct scopes (you can use
+
+
+
+
+
+ jwt.io to verify)
+Call the /api/private-scoped
endpoint in a similar way, but ensure that the API permissions are configured correctly and that the access token includes the read:messages
scope.
ASP.NET API Quickstart - Step 6 Checkpoint You should now be able to call the /api/private
and /api/private-scoped
endpoints.
Run your application and verify that:
GET /api/private
is available for authenticated requests.
GET /api/private-scoped
is available for authenticated requests containing an access token with the read:messages
scope.
-Still having issues? To get more help, check out our documentation or visit our community page.
+
-:::
+ Sorry about that. Here are a few things to double check:
make sure ValidIssuer
and ValidAudience
are configured correctly
make sure the token is added as the Authorization
header
check that the token has the correct scopes (you can use jwt.io to verify)
Still having issues? To get more help, check out our documentation or visit our community page.
-::::
+
diff --git a/articles/quickstart/backend/django/interactive.md b/articles/quickstart/backend/django/interactive.md
index cb6d97bc86..c98bba2882 100644
--- a/articles/quickstart/backend/django/interactive.md
+++ b/articles/quickstart/backend/django/interactive.md
@@ -7,19 +7,19 @@ files:
- files/apiexample/views
- files/apiexample/urls
github:
- path: https://github.com/auth0-samples/auth0-django-api/tree/master/01-Authorization
+ path: 01-Authorization
locale: en-US
---
# Add Authorization to Your Django API Application
-This guide demonstrates how to integrate Auth0 with any new or existing Python API built with Django.
If you haven't created an API in your Auth0 Dashboard yet, you can use the interactive selector to create a new Auth0 API or select an existing API that represents the project you want to integrate with.
Alternatively, you can read our getting started guide, which will help you set up your first API through the Auth0 Dashboard.
Every API in Auth0 is configured using an API Identifier that your application code will use as the Audience to validate the Access Token.
New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.
+This guide demonstrates how to integrate Auth0 with any new or existing Python API built with Django.
If you haven't created an API in your Auth0 Dashboard yet, you can use the interactive selector to create a new Auth0 API or select an existing API that represents the project you want to integrate with.
Alternatively, you can read our getting started guide, which will help you set up your first API through the Auth0 Dashboard.
Every API in Auth0 is configured using an API Identifier that your application code will use as the Audience to validate the Access Token.
New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.
## Define permissions
-Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and grant write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages
scope.
+Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and grant write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages
scope.
## Configure Django to use Auth0
@@ -30,17 +30,8 @@ locale: en-US
## Create the JWT validator {{{ data-action="code" data-code="apiexample/validator.py" }}}
-You're going to use a library called Authlib to create a ResourceProtector, which is a type of Django view decorator that protects your resources (API views) with a given validator.
-The validator will verify the Access Token that you pass to the resource by checking that it has a valid signature and claims.
-
-You can use AuthLib's `JWTBearerTokenValidator` validator with a few tweaks to make sure it conforms to our requirements on validating Access Tokens.
-
-To create your `Auth0JWTBearerTokenValidator`, you need to pass it your `domain` and `audience` (API Identifier). It will then get the public key required to verify the token's signature and pass it to the `JWTBearerTokenValidator` class.
-
-You'll then override the class's `claims_options` to make sure the token's `expiry`, `audience`, and `issue` claims are validated according to our requirements.
-
-Create the file `apiexample/validator.py` using the code from the interactive panel.
+You will use a library called Authlib to create a ResourceProtector, which is a type of Django view decorator that protects your resources (API views) with a given validator.
The validator will verify the Access Token that you pass to the resource by checking that it has a valid signature and claims.
You can use AuthLib's JWTBearerTokenValidator
validator with a few tweaks to make sure it conforms to our requirements for validating Access Tokens.
To create your Auth0JWTBearerTokenValidator
, you need to pass it to your domain
and audience
(API Identifier). It will then get the public key required to verify the token's signature and pass it to the JWTBearerTokenValidator
class.
You'll then override the class's claims_options
to make sure the token's expiry
, audience
, and issue
claims are validated according to our requirements.
Create the file apiexample/validator.py
using the code from the interactive panel.
## Create the API views {{{ data-action="code" data-code="apiexample/views.py" }}}
@@ -50,27 +41,27 @@ Create the file `apiexample/validator.py` using the code from the interactive pa
## Add URL mappings {{{ data-action="code" data-code="apiexample/urls.py#8:10" }}}
-In previous steps, you added methods to the views.py
file. Next, map those methods to URLs using Django's URL dispatcher, which lets you map URL patterns to views.
Add the URL patterns to your apiexample/urls.py
file.
Make a Call to Your API
To make calls to your API, you will need an access token. You can retrieve an access token for testing purposes from the Test view in your API settings.
![Auth0 Dashboard> Applications > API > [Specific API] > Test tab](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/5e79037f6c852d2043789d622bdb9562/Quickstart_Example_App_-_English.png)
Provide the access token as an Authorization
header in your requests.
+In previous steps, you added methods to the views.py
file. Next, map those methods to URLs using Django's URL dispatcher, which lets you map URL patterns to views.
Add the URL patterns to your apiexample/urls.py
file.
Make a Call to Your API
To make calls to your API, you will need an access token. You can retrieve an access token for testing purposes from the Test view in your API settings.
![Auth0 Dashboard> Applications > API > [Specific API] > Test tab](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/5e79037f6c852d2043789d622bdb9562/Quickstart_Example_App_-_English.png)
Provide the access token as an Authorization
header in your requests.
- curl --request get \
+ curl --request get \
--url 'http:///${account.namespace}.com/api_path' \
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}.com/api_path");
+ --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}.com/api_path");
var request = new RestRequest(Method.GET);
request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
@@ -118,11 +109,11 @@ func main() {
-}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}.com/api_path")
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}.com/api_path")
.header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
- .asString();
var axios = require("axios").default;
+ .asString();
var axios = require("axios").default;
@@ -146,7 +137,7 @@ axios.request(options).then(function (response) {
console.error(error);
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
@@ -186,7 +177,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
}];
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
@@ -234,7 +225,7 @@ if ($err) {
echo $response;
-}
import http.client
+}
import http.client
@@ -256,7 +247,7 @@ data = res.read()
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
require 'net/http'
@@ -278,7 +269,7 @@ request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
response = http.request(request)
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
diff --git a/articles/quickstart/backend/golang/interactive.md b/articles/quickstart/backend/golang/interactive.md
index 1fe58b32e5..003cb57ce6 100644
--- a/articles/quickstart/backend/golang/interactive.md
+++ b/articles/quickstart/backend/golang/interactive.md
@@ -6,19 +6,19 @@ files:
- files/middleware/jwt
- files/main
github:
- path: https://github.com/auth0-samples/auth0-golang-api-samples/tree/master/01-Authorization-RS256
+ path: 01-Authorization-RS256
locale: en-US
---
# Add Authorization to Your Go Application
-This guide demonstrates how to integrate Auth0 with any new or existing Go API application using the go-jwt-middleware package.
If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing API for your project.
To set up your first API through the Auth0 dashboard, review our getting started guide.
Each Auth0 API uses the API Identifier, which your application needs to validate the access token.
New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.
+This guide demonstrates how to integrate Auth0 with any new or existing Go API application using the go-jwt-middleware package.
If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing API for your project.
To set up your first API through the Auth0 dashboard, review our getting started guide.
Each Auth0 API uses the API Identifier, which your application needs to validate the access token.
New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.
## Define permissions
-Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and a write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages
scope.
+Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and a write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages
scope.
## Install dependencies
@@ -78,27 +78,27 @@ AUTH0_AUDIENCE='${apiIdentifier}'
## Protect API endpoints {{{ data-action="code" data-code="main.go" }}}
-In this example, create an /api/public
endpoint that does not use the EnsureToken
middleware as it is accessible to non-authenticated requests.
Create an /api/private
endpoint that requires the EnsureToken
middleware as it is only available to authenticated requests containing an access token with no additional scope.
Create an /api/private-scoped
endpoint that requires the EnsureToken
middleware and HasScope
as it is only available for authenticated requests containing an access token with the read:messages
scope granted.
Only the read:messages
scope is checked by the HasScope
function. You may want to extend it or make it a standalone middleware that accepts multiple scopes to fit your use case.
Make a Call to Your API
To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.
![Auth0 Dashboard> Applications > API > [Specific API] > Test tab](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/5e79037f6c852d2043789d622bdb9562/Quickstart_Example_App_-_English.png)
Provide the Access Token as an Authorization
header in your requests.
+In this example, create an /api/public
endpoint that does not use the EnsureToken
middleware as it is accessible to non-authenticated requests.
Create an /api/private
endpoint that requires the EnsureToken
middleware as it is only available to authenticated requests containing an access token with no additional scope.
Create an /api/private-scoped
endpoint that requires the EnsureToken
middleware and HasScope
as it is only available for authenticated requests containing an access token with the read:messages
scope granted.
Only the read:messages
scope is checked by the HasScope
function. You may want to extend it or make it a standalone middleware that accepts multiple scopes to fit your use case.
Make a Call to Your API
To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.
![Auth0 Dashboard> Applications > API > [Specific API] > Test tab](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/5e79037f6c852d2043789d622bdb9562/Quickstart_Example_App_-_English.png)
Provide the Access Token as an Authorization
header in your requests.
- curl --request get \
+ curl --request get \
--url 'http:///${account.namespace}/api_path' \
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+ --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
var request = new RestRequest(Method.GET);
request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
@@ -146,11 +146,11 @@ func main() {
-}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
.header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
- .asString();
var axios = require("axios").default;
+ .asString();
var axios = require("axios").default;
@@ -174,7 +174,7 @@ axios.request(options).then(function (response) {
console.error(error);
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
@@ -214,7 +214,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
}];
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
@@ -262,7 +262,7 @@ if ($err) {
echo $response;
-}
import http.client
+}
import http.client
@@ -284,7 +284,7 @@ data = res.read()
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
require 'net/http'
@@ -306,7 +306,7 @@ request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
response = http.request(request)
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
@@ -354,6 +354,6 @@ dataTask.resume()
- If your application did not start successfully:
Verify you added the token as the Authorization
header
Ensure the token has the correct scopes. Verify with jwt.io.
Still having issues? Check out our documentation or visit our community page to get more help.
+ If your application did not start successfully:
Verify you added the token as the Authorization
header
Ensure the token has the correct scopes. Verify with jwt.io.
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/backend/java-spring-security5/interactive.md b/articles/quickstart/backend/java-spring-security5/interactive.md
index c68d71b11b..eab5af715e 100644
--- a/articles/quickstart/backend/java-spring-security5/interactive.md
+++ b/articles/quickstart/backend/java-spring-security5/interactive.md
@@ -8,19 +8,19 @@ files:
- files/Message
- files/APIController
github:
- path: https://github.com/auth0-samples/auth0-spring-security5-api-sample/tree/master/01-Authorization-MVC
+ path: 01-Authorization-MVC
locale: en-US
---
# Add Authorization to Your Spring Boot Application
-Auth0 allows you to quickly add authorization to your application. This guide demonstrates how to integrate Auth0 with any new or existing Spring Boot application.
If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing API that represents the project you want to integrate with.
Review our getting started guide to set up your first API through the Auth0 dashboard.
Each Auth0 API uses the API Identifier, which your application needs to validate the access token.
New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.
+Auth0 allows you to quickly add authorization to your application. This guide demonstrates how to integrate Auth0 with any new or existing Spring Boot application.
If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing API that represents the project you want to integrate with.
Review our getting started guide to set up your first API through the Auth0 dashboard.
Each Auth0 API uses the API Identifier, which your application needs to validate the access token.
New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.
## Define permissions
-Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and a write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.
![Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab](//images.ctfassets.net/cdy7uua7fh8z/1s3Yp5zqJiKiSWqbPSezNO/e61793a2822d095666002c3f65c71ac2/configure-permissions.png)
This example uses the read:messages
scope.
+Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and a write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.
![Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab](//images.ctfassets.net/cdy7uua7fh8z/1s3Yp5zqJiKiSWqbPSezNO/e61793a2822d095666002c3f65c71ac2/configure-permissions.png)
This example uses the read:messages
scope.
## Configure the sample project {{{ data-action="code" data-code="application.yml#1:6" }}}
@@ -30,7 +30,7 @@ locale: en-US
## Install dependencies {{{ data-action="code" data-code="application.yml#1:6" }}}
-If you are using Gradle, you can add the required dependencies using the Spring Boot Gradle Plugin and the Dependency Management Plugin to resolve dependency versions:
// build.gradle
+If you are using Gradle, you can add the required dependencies using the Spring Boot Gradle Plugin and the Dependency Management Plugin to resolve dependency versions:
// build.gradle
@@ -114,15 +114,32 @@ locale: en-US
## Create the API controller {{{ data-action="code" data-code="APIController.java" }}}
-Create a new class named `APIController` to handle requests to the endpoints. The `APIController` has three routes as defined in the [Protect API Endpoints](/quickstart/backend/java-spring-security5/interactive/#configure-the-resource-server) section. For this example, allow all origins through `@CrossOrigin` annotation. Real applications should configure `CORS` for their use case.
+
+Create a new class named APIController
to handle requests to the endpoints. The APIController
has three routes as defined in the Protect API Endpoints section. For this example, allow all origins through @CrossOrigin
annotation. Real applications should configure CORS
for their use case.
## Run the application {{{ data-action="code" data-code="APIController.java" }}}
-To build and run the sample project, execute the bootRun
Gradle task.
Linux or macOS:
./gradlew bootRun
Windows:
gradlew.bat bootRun
If you are configuring your own application using Maven and the Spring Boot Maven Plugin, you can execute the spring-boot:run
goal.
Linux or macOS:
mvn spring-boot:run
Windows:
mvn.cmd spring-boot:run
Spring Boot API Step 7 Checkpoint The sample application will be available at http://localhost:3010/
. Read about how to test and use your API in the Using Your API article.
+To build and run the sample project, execute the bootRun
Gradle task.
Linux or macOS:
./gradlew bootRun
+
+
+
+Windows:
gradlew.bat bootRun
+
+
+
+If you are configuring your own application using Maven and the Spring Boot Maven Plugin, you can execute the spring-boot:run
goal.
Linux or macOS:
mvn spring-boot:run
+
+
+
+Windows:
mvn.cmd spring-boot:run
+
+
+
+
Spring Boot API Step 7 Checkpoint The sample application will be available at http://localhost:3010/
. Read about how to test and use your API in the Using Your API article.
- If your application did not launch successfully:
Use the Troubleshooting section to check your configuration.
Still having issues? Check out our documentation or visit our community page to get more help.
+ If your application did not launch successfully:
Use the Troubleshooting section to check your configuration.
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/backend/laravel/interactive.md b/articles/quickstart/backend/laravel/interactive.md
index 4a2fdf965a..b49f6875e9 100644
--- a/articles/quickstart/backend/laravel/interactive.md
+++ b/articles/quickstart/backend/laravel/interactive.md
@@ -5,14 +5,14 @@ interactive: true
files:
- files/routes/api
github:
- path: https://github.com/auth0-samples/laravel/tree/7.x/sample
+ path: sample
locale: en-US
---
# Add Authorization to Your Laravel Application
-Auth0's Laravel SDK allows you to quickly add token-based authorization and route access control to your Laravel application. This guide demonstrates how to integrate Auth0 with a new (or existing) Laravel 9 or 10 application.
Backend applications differ from traditional web applications in that they do not handle user authentication or have a user interface. They provide an API that other applications can interact with. They accept access tokens from Authorization
headers in requests to control access to routes.
Separate front-end applications are usually built to interact with these types of backends. These can be anything from single-page applications or native or mobile apps (all of which Auth0 also provides SDKs for!)
When users need to interact with your backend application, they first authenticate with Auth0 using the frontend application. The frontend application then retrieves an access token from Auth0, which it can use to make requests to your backend application on behalf of the user.
As their name implies, access tokens are designed to address matters of access control (authorization), and do not contain information about the user. Backend applications work exclusively with access tokens. You can retrieve information about the user who created the token using the Management API, which we will demonstrate later.
+Auth0's Laravel SDK allows you to quickly add token-based authorization and route access control to your Laravel application. This guide demonstrates how to integrate Auth0 with a new (or existing) Laravel 9 or 10 application.
Backend applications differ from traditional web applications in that they do not handle user authentication or have a user interface. They provide an API that other applications can interact with. They accept access tokens from Authorization
headers in requests to control access to routes.
Separate front-end applications are usually built to interact with these types of backends. These can be anything from single-page applications or native or mobile apps (all of which Auth0 also provides SDKs for!)
When users need to interact with your backend application, they first authenticate with Auth0 using the frontend application. The frontend application then retrieves an access token from Auth0, which it can use to make requests to your backend application on behalf of the user.
As their name implies, access tokens are designed to address matters of access control (authorization), and do not contain information about the user. Backend applications work exclusively with access tokens. You can retrieve information about the user who created the token using the Management API, which we will demonstrate later.
## Laravel Installation
@@ -30,7 +30,7 @@ locale: en-US
## SDK Installation
-Run the following command within your project directory to install the Auth0 Laravel SDK:
composer require auth0/login:^7.8 --update-with-all-dependencies
+Run the following command within your project directory to install the Auth0 Laravel SDK:
composer require auth0/login:^7.8 --update-with-all-dependencies
@@ -43,7 +43,7 @@ locale: en-US
## SDK Configuration
-Run the following command from your project directory to download the Auth0 CLI:
curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
+Run the following command from your project directory to download the Auth0 CLI:
curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
@@ -106,7 +106,7 @@ locale: en-US
-You can also require the provided token to have specific permissions by combining this with Laravel's can
middleware:
Route::get('/scope', function () {
+You can also require the provided token to have specific permissions by combining this with Laravel's can
middleware:
Route::get('/scope', function () {
return response()->json([
@@ -156,7 +156,7 @@ locale: en-US
## Retrieve User Information {{{ data-action="code" data-code="routes/api.php#32:51" }}}
-You can retrieve information about the user who created the access token from Auth0 using the Auth0 Management API. The SDK provides a convenient wrapper for this API, accessible through the SDK's management()
method.
Before making Management API calls you must enable your application to communicate with the Management API. This can be done from the Auth0 Dashboard's API page, choosing Auth0 Management API
, and selecting the 'Machine to Machine Applications' tab. Authorize your Laravel application, and then click the down arrow to choose the scopes you wish to grant.
For the following example, you should grant the read:users
scope. A list of API endpoints and the required scopes can be found in the Management API documentation.
use Auth0\Laravel\Facade\Auth0;
+You can retrieve information about the user who created the access token from Auth0 using the Auth0 Management API. The SDK provides a convenient wrapper for this API, accessible through the SDK's management()
method.
Before making Management API calls you must enable your application to communicate with the Management API. This can be done from the Auth0 Dashboard's API page, choosing Auth0 Management API
, and selecting the 'Machine to Machine Applications' tab. Authorize your Laravel application, and then click the down arrow to choose the scopes you wish to grant.
For the following example, you should grant the read:users
scope. A list of API endpoints and the required scopes can be found in the Management API documentation.
use Auth0\Laravel\Facade\Auth0;
@@ -216,10 +216,10 @@ Route::get('/me', function () {
## Retrieve a Test Token
-You can learn more about retrieving access tokens here. For this quickstart, however, you can simply use an access token from your API settings' "test" view.
The /me
route we created above will not work with a test token as there is no actual user associated with it.
Laravel Quickstart Step 8 Checkpoint Open a shell and try issuing requests to your application.
Begin by requesting the public route:
curl --request GET \ --url http://localhost:8000/api \ --header 'Accept: application/json'
Next, use your access token in an Authorization
header to request a protected route:
curl --request GET \ --url http://localhost:8000/api/private \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'
Finally, try requesting the scope-protected route, which will only succeed if the access token has the read:messages
scope granted:
curl --request GET \ --url http://localhost:8000/api/scope \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'
+You can learn more about retrieving access tokens here. For this quickstart, however, you can simply use an access token from your API settings' "test" view.
The /me
route we created above will not work with a test token as there is no actual user associated with it.
Laravel Quickstart Step 8 Checkpoint Open a shell and try issuing requests to your application.
Begin by requesting the public route:
curl --request GET \ --url http://localhost:8000/api \ --header 'Accept: application/json'
Next, use your access token in an Authorization
header to request a protected route:
curl --request GET \ --url http://localhost:8000/api/private \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'
Finally, try requesting the scope-protected route, which will only succeed if the access token has the read:messages
scope granted:
curl --request GET \ --url http://localhost:8000/api/scope \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'
- Here are a couple of things to try:
Try running php artisan optimize:clear
to clear Laravel's cache.
Ensure your .auth0.app.json
and .auth0.api.json
files are at the root of your project.
Ensure you have enabled your Laravel application as a Machine-to-Machine application and granted it all the necessary scopes for the Auth0 Management API
from the Auth0 Dashboard.
Encountering problems? Check the SDK's documentation or our documentation hub. You should also consider visiting the community where our team and other community members can help answer your questions.
+ Here are a couple of things to try:
Try running php artisan optimize:clear
to clear Laravel's cache.
Ensure your .auth0.app.json
and .auth0.api.json
files are at the root of your project.
Ensure you have enabled your Laravel application as a Machine-to-Machine application and granted it all the necessary scopes for the Auth0 Management API
from the Auth0 Dashboard.
Encountering problems? Check the SDK's documentation or our documentation hub. You should also consider visiting the community where our team and other community members can help answer your questions.
- Additional Reading
User Repositories and Models extends the Auth0 Laravel SDK to use custom user models, and how to store and retrieve users from a database.
Hooking Events covers how to listen for events raised by the Auth0 Laravel SDK, to fully customize the behavior of your integration.
Management API support is built into the Auth0 Laravel SDK, allowing you to interact with the Management API from your Laravel application.
+ Additional Reading
User Repositories and Models extends the Auth0 Laravel SDK to use custom user models, and how to store and retrieve users from a database.
Hooking Events covers how to listen for events raised by the Auth0 Laravel SDK, to fully customize the behavior of your integration.
Management API support is built into the Auth0 Laravel SDK, allowing you to interact with the Management API from your Laravel application.
diff --git a/articles/quickstart/backend/nodejs/interactive.md b/articles/quickstart/backend/nodejs/interactive.md
index d65b2d2094..2657dfc58f 100644
--- a/articles/quickstart/backend/nodejs/interactive.md
+++ b/articles/quickstart/backend/nodejs/interactive.md
@@ -5,19 +5,19 @@ interactive: true
files:
- files/server
github:
- path: https://github.com/auth0-samples/auth0-express-api-samples/tree/master/01-Authorization-RS256
+ path: 01-Authorization-RS256
locale: en-US
---
# Add Authorization to Your Express.js API Application
-This guide demonstrates how to integrate Auth0 with any new or existing Express.js API application using the express-oauth2-jwt-bearer
package.
If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing project API.
To set up your first API through the Auth0 dashboard, review our getting started guide. Each Auth0 API uses the API Identifier, which your application needs to validate the access token.
New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.
+This guide demonstrates how to integrate Auth0 with any new or existing Express.js API application using the express-oauth2-jwt-bearer
package.
If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing project API.
To set up your first API through the Auth0 dashboard, review our getting started guide. Each Auth0 API uses the API Identifier, which your application needs to validate the access token.
New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.
## Define permissions
-Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and a write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.

This example uses the read:messages
scope.
+Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and a write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.

This example uses the read:messages
scope.
## Install dependencies
@@ -36,18 +36,282 @@ locale: en-US
## Protect API endpoints {{{ data-action="code" data-code="server.js#12:32" }}}
-To protect an individual route by requiring a valid JWT, configure the route with the checkJwt
middleware constructed from express-oauth2-jwt-bearer
.
You can configure individual routes to look for a particular scope. To achieve that, set up another middleware with the requiresScope
method. Provide the required scopes and apply the middleware to any routes you want to add authorization to.
Pass the checkJwt
and requiredScopes
middlewares to the route you want to protect.
In this configuration, only access tokens with the read:messages
scope can access the endpoint.
Make a Call to Your API
To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.

Provide the Access Token as an Authorization
header in your requests.
curl --request GET \
+To protect an individual route by requiring a valid JWT, configure the route with the checkJwt
middleware constructed from express-oauth2-jwt-bearer
.
You can configure individual routes to look for a particular scope. To achieve that, set up another middleware with the requiresScope
method. Provide the required scopes and apply the middleware to any routes you want to add authorization to.
Pass the checkJwt
and requiredScopes
middlewares to the route you want to protect.
In this configuration, only access tokens with the read:messages
scope can access the endpoint.
Make a Call to Your API
To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.

Provide the Access Token as an Authorization
header in your requests.
- --url http://${account.namespace}/api_path \
+
+
+ curl --request get \
+
+ --url http:///%7ByourDomain%7D/api_path \
+
+ --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///%7ByourDomain%7D/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///%7ByourDomain%7D/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///%7ByourDomain%7D/api_path")
+
+ .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+ .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+ method: 'get',
+
+ url: 'http:///%7ByourDomain%7D/api_path',
+
+ headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+ console.log(response.data);
+
+}).catch(function (error) {
+
+ console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///%7ByourDomain%7D/api_path"]
+
+ cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+ timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+NSURLSession *session = [NSURLSession sharedSession];
+
+NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
+
+ completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
+
+ if (error) {
+
+ NSLog(@"%@", error);
+
+ } else {
+
+ NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
+
+ NSLog(@"%@", httpResponse);
+
+ }
+
+ }];
+
+[dataTask resume];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+ CURLOPT_URL => "http:///%7ByourDomain%7D/api_path",
+
+ CURLOPT_RETURNTRANSFER => true,
+
+ CURLOPT_ENCODING => "",
+
+ CURLOPT_MAXREDIRS => 10,
+
+ CURLOPT_TIMEOUT => 30,
+
+ CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+ CURLOPT_CUSTOMREQUEST => "get",
+
+ CURLOPT_HTTPHEADER => [
+
+ "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+ ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+ echo "cURL Error #:" . $err;
+
+} else {
+
+ echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "%7ByourDomain%7D/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///%7ByourDomain%7D/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///%7ByourDomain%7D/api_path")! as URL,
+
+ cachePolicy: .useProtocolCachePolicy,
+
+ timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+let session = URLSession.shared
+
+let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
+
+ if (error != nil) {
+
+ print(error)
+
+ } else {
+
+ let httpResponse = response as? HTTPURLResponse
+
+ print(httpResponse)
+
+ }
+
+})
+
+
+
+dataTask.resume()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
-
+
+
+
+
+
+
Node JS API Step 4 Checkpoint Now that you have configured your application, run your application to verify that:
GET /api/public
is available for non-authenticated requests.
GET /api/private
is available for authenticated requests.
GET /api/private-scoped
is available for authenticated requests containing an access token with the read:messages
scope.
- If your application did not start successfully:
Verify you added the token as the Authorization
header
Ensure the token has the correct scopes. Verify with jwt.io.
Still having issues? Check out our documentation or visit our community page to get more help.
+ If your application did not start successfully:
Verify you added the token as the Authorization
header
Ensure the token has the correct scopes. Verify with jwt.io.
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/backend/php/interactive.md b/articles/quickstart/backend/php/interactive.md
index 19b0ebf8ec..be6785019d 100644
--- a/articles/quickstart/backend/php/interactive.md
+++ b/articles/quickstart/backend/php/interactive.md
@@ -6,7 +6,7 @@ files:
- files/index
- files/router
github:
- path: https://github.com/auth0-samples/auth0-php-api-samples/tree/main/app
+ path: app
locale: en-US
---
@@ -18,12 +18,12 @@ locale: en-US
## Configure Auth0
-To use Auth0 services, you need to have an application registered in the Auth0 Dashboard. The Auth0 application is where you configure how you want authentication to work for your project.
Configure an application
Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code uses to call Auth0 APIs through the SDK.
Any settings you configure using this quickstart automatically updates 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.
Configure an API
Similarly, you need to create a new Auth0 API or use an existing API that represents the project you're integrating from the Dashboard. Choose a unique identifier for the API and make a note of it. You need that identifier to configure your application below.
+To use Auth0 services, you need to have an application registered in the Auth0 Dashboard. The Auth0 application is where you configure how you want authentication to work for your project.
Configure an application
Use the interactive selector to create a new Auth0 application or select an existing application that represents the project you want to integrate. Every application in Auth0 is assigned an alphanumeric, unique client ID that your application code uses to call Auth0 APIs through the SDK.
Any settings you configure using this quickstart automatically updates 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.
Configure an API
Similarly, you need to create a new Auth0 API or use an existing API that represents the project you're integrating from the Dashboard. Choose a unique identifier for the API and make a note of it. You need that identifier to configure your application below.
## Install the Auth0 PHP SDK {{{ data-action="code" data-code="index.php" }}}
-Auth0 provides a PHP SDK (Auth0-PHP) to simplify the process of implementing Auth0 authentication and authorization in PHP apps.
The Auth0 PHP SDK requires PSR-17 and PSR-18 installed, compatible HTTP libraries for managing network requests. If you don't have libraries available, you can install reliable choices by running the following commands in your terminal:
cd <your-project-directory>
+Auth0 provides a PHP SDK (Auth0-PHP) to simplify the process of implementing Auth0 authentication and authorization in PHP apps.
The Auth0 PHP SDK requires PSR-17 and PSR-18 installed, compatible HTTP libraries for managing network requests. If you don't have libraries available, you can install reliable choices by running the following commands in your terminal:
cd <your-project-directory>
composer require symfony/http-client nyholm/psr7
@@ -37,7 +37,7 @@ locale: en-US
- Sorry about that. Here's a couple things to double check:
Make sure the correct application is selected.
Did you save after entering your URLs?
Make sure the domain and client ID imported correctly.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
Make sure the correct application is selected.
Did you save after entering your URLs?
Make sure the domain and client ID imported correctly.
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/backend/python/01-authorization.md b/articles/quickstart/backend/python/01-authorization.md
index 44b988113b..817b8df0c7 100644
--- a/articles/quickstart/backend/python/01-authorization.md
+++ b/articles/quickstart/backend/python/01-authorization.md
@@ -26,9 +26,9 @@ useCase: quickstart
```python
# /requirements.txt
-flask==2.3.3
+flask
python-dotenv
-pyjwt
+python-jose
flask-cors
six
```
@@ -46,7 +46,7 @@ from functools import wraps
from flask import Flask, request, jsonify, _request_ctx_stack
from flask_cors import cross_origin
-import jwt
+from jose import jwt
AUTH0_DOMAIN = '${account.namespace}'
API_AUDIENCE = YOUR_API_AUDIENCE
@@ -112,15 +112,21 @@ def requires_auth(f):
jsonurl = urlopen("https://"+AUTH0_DOMAIN+"/.well-known/jwks.json")
jwks = json.loads(jsonurl.read())
unverified_header = jwt.get_unverified_header(token)
- public_key = None
+ rsa_key = {}
for key in jwks["keys"]:
if key["kid"] == unverified_header["kid"]:
- public_key = jwt.algorithms.RSAAlgorithm.from_jwk(json.dumps(jwk))
- if public_key:
+ rsa_key = {
+ "kty": key["kty"],
+ "kid": key["kid"],
+ "use": key["use"],
+ "n": key["n"],
+ "e": key["e"]
+ }
+ if rsa_key:
try:
payload = jwt.decode(
token,
- public_key,
+ rsa_key,
algorithms=ALGORITHMS,
audience=API_AUDIENCE,
issuer="https://"+AUTH0_DOMAIN+"/"
@@ -128,16 +134,11 @@ def requires_auth(f):
except jwt.ExpiredSignatureError:
raise AuthError({"code": "token_expired",
"description": "token is expired"}, 401)
- except jwt.InvalidAudienceError:
- raise AuthError({"code": "invalid_audience",
+ except jwt.JWTClaimsError:
+ raise AuthError({"code": "invalid_claims",
"description":
- "incorrect audience,"
- " please check the audience"}, 401)
- except jwt.InvalidIssuerError
- raise AuthError({"code": "invalid_issuer",
- "description":
- "incorrect issuer,"
- " please check the issuer"}, 401)
+ "incorrect claims,"
+ "please check the audience and issuer"}, 401)
except Exception:
raise AuthError({"code": "invalid_header",
"description":
@@ -164,7 +165,7 @@ def requires_scope(required_scope):
required_scope (str): The scope required to access the resource
"""
token = get_token_auth_header()
- unverified_claims = jwt.decode(token, options={"verify_signature": False})
+ unverified_claims = jwt.get_unverified_claims(token)
if unverified_claims.get("scope"):
token_scopes = unverified_claims["scope"].split()
for token_scope in token_scopes:
diff --git a/articles/quickstart/backend/python/interactive.md b/articles/quickstart/backend/python/interactive.md
index 62cdfd2ce7..be1e1fc802 100644
--- a/articles/quickstart/backend/python/interactive.md
+++ b/articles/quickstart/backend/python/interactive.md
@@ -6,19 +6,19 @@ files:
- files/validator
- files/server
github:
- path: https://github.com/auth0-samples/auth0-python-api-samples/tree/master/00-Starter-Seed
+ path: 00-Starter-Seed
locale: en-US
---
# Add Authorization to Your Flask API Application
-This guide demonstrates how to integrate Auth0 with any new or existing Python API built with Flask.
If you haven't created an API in your Auth0 dashboard yet, you can use the interactive selector to create a new Auth0 API or select an existing API that represents the project you want to integrate with.
Alternatively, you can read our getting started guide that helps you set up your first API through the Auth0 dashboard.
Every API in Auth0 is configured using an API Identifier that your application code will use as the Audience to validate the Access Token.
New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.
+This guide demonstrates how to integrate Auth0 with any new or existing Python API built with Flask.
If you haven't created an API in your Auth0 dashboard yet, you can use the interactive selector to create a new Auth0 API or select an existing API that represents the project you want to integrate with.
Alternatively, you can read our getting started guide that helps you set up your first API through the Auth0 dashboard.
Every API in Auth0 is configured using an API Identifier that your application code will use as the Audience to validate the Access Token.
New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.
## Define permissions
-Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and a write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.
![Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab](//images.ctfassets.net/cdy7uua7fh8z/1s3Yp5zqJiKiSWqbPSezNO/e61793a2822d095666002c3f65c71ac2/configure-permissions.png)
This example uses the read:messages
scope.
+Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and a write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.
![Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab](//images.ctfassets.net/cdy7uua7fh8z/1s3Yp5zqJiKiSWqbPSezNO/e61793a2822d095666002c3f65c71ac2/configure-permissions.png)
This example uses the read:messages
scope.
## Install dependencies
@@ -38,17 +38,281 @@ locale: en-US
## Create the JWT validator {{{ data-action="code" data-code="validator.py" }}}
-We're going to use a library called Authlib to create a ResourceProtector, which is a type of Flask decorator that protects our resources (API routes) with a given validator.
The validator will validate the Access Token that we pass to the resource by checking that it has a valid signature and claims.
We can use AuthLib's JWTBearerTokenValidator
validator with a few tweaks to make sure it conforms to our requirements on validating Access Tokens.
To create our Auth0JWTBearerTokenValidator
we need to pass it our domain
and audience
(API Identifier). It will then get the public key required to verify the token's signature and pass it to the JWTBearerTokenValidator
class.
We'll then override the class's claims_options
to make sure the token's expiry, audience and issue claims are validated according to our requirements.
+We're going to use a library called Authlib to create a ResourceProtector, which is a type of Flask decorator that protects our resources (API routes) with a given validator.
The validator will validate the Access Token that we pass to the resource by checking that it has a valid signature and claims.
We can use AuthLib's JWTBearerTokenValidator
validator with a few tweaks to make sure it conforms to our requirements on validating Access Tokens.
To create our Auth0JWTBearerTokenValidator
we need to pass it our domain
and audience
(API Identifier). It will then get the public key required to verify the token's signature and pass it to the JWTBearerTokenValidator
class.
We'll then override the class's claims_options
to make sure the token's expiry, audience and issue claims are validated according to our requirements.
## Create a Flask application {{{ data-action="code" data-code="server.py" }}}
-Next we'll create a Flask application with 3 API routes:
/api/public
A public endpoint that requires no authentication.
/api/private
A private endpoint that requires a valid Access Token JWT.
/api/private-scoped
A private endpoint that requires a valid Access Token JWT that contains the given scope
.
The protected routes will have a require_auth
decorator which is a ResourceProtector
that uses the Auth0JWTBearerTokenValidator
we created earlier.
To create the Auth0JWTBearerTokenValidator
we'll pass it our tenant's domain and the API Identifier of the API we created earlier.
The require_auth
decorator on the private_scoped
route accepts an additional argument "read:messages"
, which checks the Access Token for the Permission (Scope) we created earlier.
Make a Call to Your API
To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.
![Auth0 Dashboard> Applications > API > [Specific API] > Test tab](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/5e79037f6c852d2043789d622bdb9562/Quickstart_Example_App_-_English.png)
Provide the Access Token as an Authorization
header in your requests.
curl --request GET \
+Next we'll create a Flask application with 3 API routes:
/api/public
A public endpoint that requires no authentication.
/api/private
A private endpoint that requires a valid Access Token JWT.
/api/private-scoped
A private endpoint that requires a valid Access Token JWT that contains the given scope
.
The protected routes will have a require_auth
decorator which is a ResourceProtector
that uses the Auth0JWTBearerTokenValidator
we created earlier.
To create the Auth0JWTBearerTokenValidator
we'll pass it our tenant's domain and the API Identifier of the API we created earlier.
The require_auth
decorator on the private_scoped
route accepts an additional argument "read:messages"
, which checks the Access Token for the Permission (Scope) we created earlier.
Make a Call to Your API
To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.
![Auth0 Dashboard> Applications > API > [Specific API] > Test tab](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/5e79037f6c852d2043789d622bdb9562/Quickstart_Example_App_-_English.png)
Provide the Access Token as an Authorization
header in your requests.
- --url http://${account.namespace}/api_path \
+
+
+ curl --request get \
+
+ --url 'http:///${account.namespace}/api_path' \
+
+ --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///${account.namespace}/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+
+ .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+ .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+ method: 'get',
+
+ url: 'http:///${account.namespace}/api_path',
+
+ headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+ console.log(response.data);
+
+}).catch(function (error) {
+
+ console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///${account.namespace}/api_path"]
+
+ cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+ timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+NSURLSession *session = [NSURLSession sharedSession];
+
+NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
+
+ completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
+
+ if (error) {
+
+ NSLog(@"%@", error);
+
+ } else {
+
+ NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
+
+ NSLog(@"%@", httpResponse);
+
+ }
+
+ }];
+
+[dataTask resume];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+ CURLOPT_URL => "http:///${account.namespace}/api_path",
+
+ CURLOPT_RETURNTRANSFER => true,
+
+ CURLOPT_ENCODING => "",
+
+ CURLOPT_MAXREDIRS => 10,
+
+ CURLOPT_TIMEOUT => 30,
+
+ CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+ CURLOPT_CUSTOMREQUEST => "get",
+
+ CURLOPT_HTTPHEADER => [
+
+ "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+ ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+ echo "cURL Error #:" . $err;
+
+} else {
+
+ echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "/${account.namespace}/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///${account.namespace}/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///${account.namespace}/api_path")! as URL,
+
+ cachePolicy: .useProtocolCachePolicy,
+
+ timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+let session = URLSession.shared
+
+let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
+
+ if (error != nil) {
+
+ print(error)
+
+ } else {
+
+ let httpResponse = response as? HTTPURLResponse
+
+ print(httpResponse)
+
+ }
+
+})
+
+
+
+dataTask.resume()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
-
+
+
+
+
+
+
diff --git a/articles/quickstart/backend/rails/interactive.md b/articles/quickstart/backend/rails/interactive.md
index 5fc5f3a668..b5d2d3936c 100644
--- a/articles/quickstart/backend/rails/interactive.md
+++ b/articles/quickstart/backend/rails/interactive.md
@@ -9,25 +9,19 @@ files:
- files/app/controllers/public_controller
- files/app/controllers/private_controller
github:
- path: https://github.com/auth0-samples/auth0-rubyonrails-api-samples/tree/master/01-Authentication-RS256
+ path: 01-Authentication-RS256
locale: en-US
---
# Add Authorization to Your Ruby on Rails API
-This tutorial performs access token validation using the **jwt** Gem within a custom `Auth0Client` class. A Concern called `Secured` is used to authorize endpoints which require authentication through an incoming access token.
-If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing API for your project.
-To set up your first API through the Auth0 dashboard, review our getting started guide.
-
-Each Auth0 API uses the API Identifier, which your application needs to validate the access token.
-
-<%= include('../../../_includes/_api_auth_intro') %>
+This tutorial performs access token validation using the jwt Gem within a custom Auth0Client
class. A Concern called Secured
is used to authorize endpoints which require authentication through an incoming access token.
If you have not created an API in your Auth0 dashboard yet, use the interactive selector to create a new Auth0 API or select an existing API for your project.
To set up your first API through the Auth0 dashboard, review our getting started guide.
Each Auth0 API uses the API Identifier, which your application needs to validate the access token.
New to Auth0? Learn how Auth0 works and read about implementing API authentication and authorization using the OAuth 2.0 framework.
## Define permissions
-Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and a write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.
![Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab](//images.ctfassets.net/cdy7uua7fh8z/1s3Yp5zqJiKiSWqbPSezNO/e61793a2822d095666002c3f65c71ac2/configure-permissions.png)
This example uses the read:messages
scope.
+Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and a write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section.
![Auth0 Dashboard> Applications > APIs > [Specific API] > Permissions tab](//images.ctfassets.net/cdy7uua7fh8z/1s3Yp5zqJiKiSWqbPSezNO/e61793a2822d095666002c3f65c71ac2/configure-permissions.png)
This example uses the read:messages
scope.
## Install dependencies
@@ -63,18 +57,282 @@ Each Auth0 API uses the API Identifier, which your application needs to validate
## Create the private endpoints {{{ data-action="code" data-code="app/controllers/private_controller.rb" }}}
-Create a controller to handle the private endpoints: /api/private
and /api/private-scoped
.
/api/private
is available for authenticated requests containing an access token with no additional scopes.
/api/private-scoped
is available for authenticated requests containing an access token with the read:messages
scope granted
The protected endpoints need to call the authorize
method from the Secured
concern, for that you use before_action :authorize
, this ensure the Secured.authorize
method is called before every action in the PrivateController
.
Make a Call to Your API
To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.
![Auth0 Dashboard> Applications > API > [Specific API] > Test tab](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/5e79037f6c852d2043789d622bdb9562/Quickstart_Example_App_-_English.png)
Provide the Access Token as an Authorization
header in your requests.
curl --request GET \
+Create a controller to handle the private endpoints: /api/private
and /api/private-scoped
.
/api/private
is available for authenticated requests containing an access token with no additional scopes.
/api/private-scoped
is available for authenticated requests containing an access token with the read:messages
scope granted
The protected endpoints need to call the authorize
method from the Secured
concern, for that you use before_action :authorize
, this ensure the Secured.authorize
method is called before every action in the PrivateController
.
Make a Call to Your API
To make calls to your API, you need an Access Token. You can get an Access Token for testing purposes from the Test view in your API settings.
![Auth0 Dashboard> Applications > API > [Specific API] > Test tab](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/5e79037f6c852d2043789d622bdb9562/Quickstart_Example_App_-_English.png)
Provide the Access Token as an Authorization
header in your requests.
- --url http://${account.namespace}/api_path \
+
+
+ curl --request get \
+
+ --url 'http:///${account.namespace}/api_path' \
+
+ --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///${account.namespace}/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+
+ .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+ .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+ method: 'get',
+
+ url: 'http:///${account.namespace}/api_path',
+
+ headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+ console.log(response.data);
+
+}).catch(function (error) {
+
+ console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///${account.namespace}/api_path"]
+
+ cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+ timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+NSURLSession *session = [NSURLSession sharedSession];
+
+NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
+
+ completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
+
+ if (error) {
+
+ NSLog(@"%@", error);
+
+ } else {
+
+ NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
+
+ NSLog(@"%@", httpResponse);
+
+ }
+
+ }];
+
+[dataTask resume];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+ CURLOPT_URL => "http:///${account.namespace}/api_path",
+
+ CURLOPT_RETURNTRANSFER => true,
+
+ CURLOPT_ENCODING => "",
+
+ CURLOPT_MAXREDIRS => 10,
+
+ CURLOPT_TIMEOUT => 30,
+
+ CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+ CURLOPT_CUSTOMREQUEST => "get",
+
+ CURLOPT_HTTPHEADER => [
+
+ "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+ ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+ echo "cURL Error #:" . $err;
+
+} else {
+
+ echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "/${account.namespace}/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///${account.namespace}/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///${account.namespace}/api_path")! as URL,
+
+ cachePolicy: .useProtocolCachePolicy,
+
+ timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+let session = URLSession.shared
+
+let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
+
+ if (error != nil) {
+
+ print(error)
+
+ } else {
+
+ let httpResponse = response as? HTTPURLResponse
+
+ print(httpResponse)
+
+ }
+
+})
+
+
+
+dataTask.resume()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
-
+
+
+
+
+
+
Ruby on rails Step 7 Checkpoint Now that you have configured your application, run your application to verify that:
GET /api/public
is available for non-authenticated requests.
GET /api/private
is available for authenticated requests.
GET /api/private-scoped
is available for authenticated requests containing an Access Token with the read:messages
scope.
- If your application did not start successfully:
Verify you added the token as the Authorization
header
Ensure the token has the correct scopes. Verify with jwt.io.
Still having issues? Check out our documentation or visit our community page to get more help.
+ If your application did not start successfully:
Verify you added the token as the Authorization
header
Ensure the token has the correct scopes. Verify with jwt.io.
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/backend/webapi-owin/interactive.md b/articles/quickstart/backend/webapi-owin/interactive.md
index 491a82de60..9126bdb1d8 100644
--- a/articles/quickstart/backend/webapi-owin/interactive.md
+++ b/articles/quickstart/backend/webapi-owin/interactive.md
@@ -8,7 +8,7 @@ files:
- files/ScopeAuthorizeAttribute
- files/ApiController
github:
- path: https://github.com/auth0-samples/auth0-aspnet-owin-webapi-samples/tree/master/Quickstart/Sample
+ path: Quickstart/Sample
locale: en-US
---
@@ -20,7 +20,7 @@ locale: en-US
## Define permissions
-Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and a write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages
scope.
+Permissions let you define how resources can be accessed on behalf of the user with a given access token. For example, you might choose to grant read access to the messages
resource if users have the manager access level, and a write access to that resource if they have the administrator access level.
You can define allowed permissions in the Permissions view of the Auth0 Dashboard's APIs section. The following example uses the read:messages
scope.
## Install dependencies
@@ -39,7 +39,7 @@ locale: en-US
## Verify the token signature {{{ data-action="code" data-code="OpenIdConnectSigningKeyResolver.cs" }}}
-The OWIN JWT middleware does not use Open ID Connect Discovery by default, so you must provide a custom IssuerSigningKeyResolver
.
Create the OpenIdConnectSigningKeyResolver
class and ensure to return the correct SecurityKey
by implementing GetSigningKey
. This class is then used as TokenValidationParameters.IssuerSigningKeyResolver
while configuring the middleware in Startup.cs
.
This custom resolver is deprecated and no longer available. You must provide this custom resolver yourself.
+The OWIN JWT middleware does not use Open ID Connect Discovery by default, so you must provide a custom IssuerSigningKeyResolver
.
Create the OpenIdConnectSigningKeyResolver
class and ensure to return the correct SecurityKey
by implementing GetSigningKey
. This class is then used as TokenValidationParameters.IssuerSigningKeyResolver
while configuring the middleware in Startup.cs
.
This custom resolver is deprecated and no longer available. You must provide this custom resolver yourself.
## Validate scopes {{{ data-action="code" data-code="ScopeAuthorizeAttribute.cs" }}}
@@ -53,6 +53,6 @@ locale: en-US
- If your application did not start successfully:
Ensure your configured the ValidIssuer
and ValidAudience
values correctly
Verify you added the token as the Authorization
header
Ensure the token has the correct scopes. Verify with jwt.io.
Still having issues? Check out our documentation or visit our community page to get more help.
+ If your application did not start successfully:
Ensure your configured the ValidIssuer
and ValidAudience
values correctly
Verify you added the token as the Authorization
header
Ensure the token has the correct scopes. Verify with jwt.io.
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/native/android-facebook-login/interactive.md b/articles/quickstart/native/android-facebook-login/interactive.md
index b7e9bc7d23..1ee182e8a8 100644
--- a/articles/quickstart/native/android-facebook-login/interactive.md
+++ b/articles/quickstart/native/android-facebook-login/interactive.md
@@ -10,14 +10,14 @@ files:
- files/exchangeTokens
- files/performLogin
github:
- path: https://github.com/auth0-samples/auth0-android-native-social-sample/tree/master/00-login-facebook
+ path: 00-login-facebook
locale: en-US
---
# Android - Facebook Login
-
+
- This tutorial demonstrates how to add user login to an Android application using native Facebook Login. We recommend that you log in to follow this quickstart with examples configured for your account.
System requirements
Android Studio 3.6.1
Android SDK 25
Emulator - Nexus 5X - Android 6.0
This tutorial describes how to implement login with the Facebook SDK.
Before You Start
Install and configure the Facebook Login SDK. You’ll also go through the process of creating a Facebook app in https://developers.facebook.com. When you finish this step, you should have a mobile app running with Facebook Login integrated.
Configure your Auth0 application in the dashboard to use Facebook Native Sign In. See Add Facebook Login to Native Apps. When you finish this step, your application will be able to implement Facebook Native Login.
+This tutorial demonstrates how to add user login to an Android application using native Facebook Login. We recommend that you log in to follow this quickstart with examples configured for your account.
System requirements
Android Studio 3.6.1
Android SDK 25
Emulator - Nexus 5X - Android 6.0
This tutorial describes how to implement login with the Facebook SDK.
Before You Start
Install and configure the Facebook Login SDK. You’ll also go through the process of creating a Facebook app in https://developers.facebook.com. When you finish this step, you should have a mobile app running with Facebook Login integrated.
Configure your Auth0 application in the dashboard to use Facebook Native Sign In. See Add Facebook Login to Native Apps. When you finish this step, your application will be able to implement Facebook Native Login.
## Request Facebook permissions
@@ -52,7 +52,7 @@ locale: en-US
## Integrate Auth0
-Now that the required artifacts have been obtained, you are ready to trade them for Auth0 user credentials, such as the ID and Access Tokens. But first, you must set up the Auth0 SDK to make that last request.
Get your application keys
Go to the Applications section of the Auth0 Dashboard and select the existing application in which you enabled Sign in with Facebook. If you need help with this step, please check the requirements section at the top of this article.
Copy the Domain and Client ID values from the application settings page. These are required by the SDK.
Create two new resources in your Android application's strings.xml file to store them. The name of the keys must match the ones used below:
+
Now that the required artifacts have been obtained, you are ready to trade them for Auth0 user credentials, such as the ID and Access Tokens. But first, you must set up the Auth0 SDK to make that last request.
Get your application keys
Go to the Applications section of the Auth0 Dashboard and select the existing application in which you enabled Sign in with Facebook. If you need help with this step, please check the requirements section at the top of this article.
Copy the Domain and Client ID values from the application settings page. These are required by the SDK.
Create two new resources in your Android application's strings.xml file to store them. The name of the keys must match the ones used below:
<resources>
@@ -88,7 +88,7 @@ locale: en-US
-However, if you do plan to support Web Authentication, head over here to learn how to declare the Manifest Placeholders.
+However, if you do plan to support Web Authentication, head over here to learn how to declare the Manifest Placeholders.
## Exchange the received data for Auth0 tokens {{{ data-action="code" data-code="exchangeTokens" }}}
diff --git a/articles/quickstart/native/android/00-login.md b/articles/quickstart/native/android/00-login.md
index ac2a1c37d9..7bf426ff9c 100755
--- a/articles/quickstart/native/android/00-login.md
+++ b/articles/quickstart/native/android/00-login.md
@@ -65,7 +65,7 @@ Remember to synchronize using the Android Studio prompt or run `./gradlew clean
Add manifest placeholders required by the SDK. The placeholders are used internally to define an `intent-filter` that captures the authentication callback URL. For this, the Auth0 tenant domain and the scheme that take part in the callback URL must be set.
::: note
-We've used a value of `demo` for `auth0Scheme` here, so that a custom URL scheme can be used for the URL that Auth0 redirects to after login. Whenever possible, Auth0 recommends using 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. You can read more about setting this value in the Auth0.Android SDK readme.
+We've used a value of `demo` for `auth0Scheme` here, so that a custom URL scheme can be used for the URL that Auth0 redirects to after login. The alternative is `https` if you want to use Android App Links. You can read more about setting this value in the Auth0.Android SDK readme.
:::
To add the manifest placeholders, add the next line:
diff --git a/articles/quickstart/native/android/interactive.md b/articles/quickstart/native/android/interactive.md
index c87e1f0135..c0bd077acb 100644
--- a/articles/quickstart/native/android/interactive.md
+++ b/articles/quickstart/native/android/interactive.md
@@ -7,7 +7,7 @@ files:
- files/strings
- files/MainActivity
github:
- path: https://github.com/auth0-samples/auth0-android-sample/tree/master/00-Login-Kt
+ path: 00-Login-Kt
locale: en-US
---
@@ -19,12 +19,12 @@ locale: en-US
## Configure Auth0
-To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure authentication in your project.
Configure an application
Use the interactive selector to create a new Auth0 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.
Configure callback URLs
A callback URL is the application URL that Auth0 will direct your users to once they have authenticated. If you do not set this value, Auth0 will not return users to your application after they log in.
If you are following along with our sample project, set this to demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback
.
Configure logout URLs
A logout URL is the application URL Auth0 will redirect your users to once they log out. If you do not set this value, users will not be able to log out from your application and will receive an error.
If you are following along with our sample project, set this to demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback
+To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure authentication in your project.
Configure an application
Use the interactive selector to create a new Auth0 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.
Configure callback URLs
A callback URL is the application URL that Auth0 will direct your users to once they have authenticated. If you do not set this value, Auth0 will not return users to your application after they log in.
If you are following along with our sample project, set this to demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback
.
Configure logout URLs
A logout URL is the application URL Auth0 will redirect your users to once they log out. If you do not set this value, users will not be able to log out from your application and will receive an error.
If you are following along with our sample project, set this to demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback
## Install the Auth0 Android SDK {{{ data-action="code" data-code="build.gradle#18:18" }}}
-Add the Auth0 Android SDK into your project. The library will make requests to the Auth0's Authentication and Management APIs.
In your app's build.gradle
dependencies section, add the following:
implementation 'com.auth0.android:auth0:2.+'
+Add the Auth0 Android SDK into your project. The library will make requests to the Auth0's Authentication and Management APIs.
In your app's build.gradle
dependencies section, add the following:
implementation 'com.auth0.android:auth0:2. '
@@ -33,107 +33,46 @@ locale: en-US
## Add manifest placeholders {{{ data-action="code" data-code="build.gradle#10:12" }}}
-The SDK requires manifest placeholders. Auth0 uses placeholders internally to define an intent-filter
, which captures the authentication callback URL. You must set Auth0 tenant domain and the callback URL scheme.
You do not need to declare a specific intent-filter
for your activity, because you have defined the manifest placeholders with your Auth0 Domain and Scheme values and the library will handle the redirection for you.
We've used a value of demo
for auth0Scheme
here, so that a custom URL scheme can be used for the URL that Auth0 redirects to after login. Whenever possible, Auth0 recommends using 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. You can read more about setting this value in the Auth0.Android SDK readme.
+The SDK requires manifest placeholders. Auth0 uses placeholders internally to define an intent-filter
, which captures the authentication callback URL. You must set Auth0 tenant domain and the callback URL scheme.
You do not need to declare a specific intent-filter
for your activity, because you have defined the manifest placeholders with your Auth0 Domain and Scheme values and the library will handle the redirection for you.
We've used a value of demo
for auth0Scheme
here, so that a custom URL scheme can be used for the URL that Auth0 redirects to after login. The alternative is https
if you want to use Android App Links. You can read more about setting this value in the Auth0.Android SDK README.
## Configure your application {{{ data-action="code" data-code="strings.xml#2:3" }}}
-For the SDK to function properly, you must set the following properties in strings.xml
:
com_auth0_domain
: The domain of your Auth0 tenant. Generally, you can 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.
com_auth0_client_id
: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.
Ensure that the AndroidManifest.xml
file specifies the android.permissions.INTERNET
permission:
<uses-permission android:name="android.permission.INTERNET" />
+For the SDK to function properly, you must set the following properties in strings.xml
:
com_auth0_domain
: The domain of your Auth0 tenant. Generally, you can 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.
com_auth0_client_id
: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.
Ensure that the AndroidManifest.xml
file specifies the android.permissions.INTERNET
permission:
<uses-permission android:name="android.permission.INTERNET" />
-Run Sync Project with Gradle Files inside Android Studio or execute ./gradlew clean assembleDebug
from the command line.
For more information about using Gradle, check the Gradle official documentation.
+Run Sync Project with Gradle Files inside Android Studio or execute ./gradlew clean assembleDebug
from the command line.
For more information about using Gradle, check the Gradle official documentation.
## Add login to your application {{{ data-action="code" data-code="MainActivity.kt#6:38" }}}
-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.
In the onCreate
method, create a new instance of the Auth0
class to hold user credentials.
Create a loginWithBrowser
method and use the WebAuthProvider
class to authenticate with any connection you enabled on your application in the Auth0 dashboard. Here, you can pass the scheme value that was used in the auth0Scheme
manifest placeholder as part of the initial configuration.
After you call the WebAuthProvider#start
function, the browser launches and shows the login page. Once the user authenticates, the callback URL is called. The callback URL contains the final result of the authentication process.
Android Quickstart step 5 checkpoint Add a button to your application that calls loginWithBrowser
. When you click it, verify that your Android application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.
Once that's complete, verify that Auth0 redirects back to your app.
+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.
In the onCreate
method, create a new instance of the Auth0
class to hold user credentials.
Create a loginWithBrowser
method and use the WebAuthProvider
class to authenticate with any connection you enabled on your application in the Auth0 dashboard. Here, you can pass the scheme value that was used in the auth0Scheme
manifest placeholder as part of the initial configuration.
After you call the WebAuthProvider#start
function, the browser launches and shows the login page. Once the user authenticates, the callback URL is called. The callback URL contains the final result of the authentication process.
Android Quickstart step 5 checkpoint Add a button to your application that calls loginWithBrowser
. When you click it, verify that your Android application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.
Once that's complete, verify that Auth0 redirects back to your app.
- If your application did not launch successfully:
Ensure you set the Allowed Callback URLs are correct
Verify you saved your changes after entering your URLs
Make sure the domain and cliend ID values imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ If your application did not launch successfully:
Ensure you set the Allowed Callback URLs are correct
Verify you saved your changes after entering your URLs
Make sure the domain and cliend ID values imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
-- `com_auth0_domain`: The domain of your Auth0 tenant. Generally, you can 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.
-- `com_auth0_client_id`: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.
+## Add logout to your application {{{ data-action="code" data-code="MainActivity.kt#40:52" }}}
-Ensure that the `AndroidManifest.xml` file specifies the `android.permissions.INTERNET` permission:
-```xml
-
-```
+Use WebAuthProvider
to remove the cookie set by the browser at authentication time, so that the users are forced to re-enter their credentials the next time they try to authenticate.
Add a logout
method to your app to remove the user's session and log them out of the app. Here, you can pass the scheme value that was used in the auth0Scheme
manifest placeholder as part of the initial configuration.
Use the WebAuthProvider
class to implement logout. This call opens the browser and navigates the user to the logout endpoint. If the user cancels the logout, consider redirected the user to their previous URL.
Android Quickstart Step 6 Checkpoint Add a button to your app that calls logout
and logs the user out of your application. When you click it, verify that your Android app redirects you logout page and back again, and that you are no longer logged in to your application.
-Run **Sync Project with Gradle Files** inside Android Studio or execute `./gradlew clean assembleDebug` from the command line.
-
-::: note
-For more information about using Gradle, check the Gradle official documentation.
-:::
-
-## Add login to your application {{{ data-action=code data-code="MainActivity.kt#6:38" }}}
-
-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.
-
-In the `onCreate` method, create a new instance of the `Auth0` class to hold user credentials.
-
-Create a `loginWithBrowser` method and use the `WebAuthProvider` class to authenticate with any connection you enabled on your application in the Auth0 dashboard. Here, you can pass the scheme value that was used in the `auth0Scheme` manifest placeholder as part of the initial configuration.
-
-After you call the `WebAuthProvider#start` function, the browser launches and shows the login page. Once the user authenticates, the callback URL is called. The callback URL contains the final result of the authentication process.
-
-::::checkpoint
-
-:::checkpoint-default
-
-Add a button to your application that calls `loginWithBrowser`. When you click it, verify that your Android application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.
-
-Once that's complete, verify that Auth0 redirects back to your app.
-
-:::
-
-:::checkpoint-failure
-
-If your application did not launch successfully:
-* Ensure you set the Allowed Callback URLs are correct
-* Verify you saved your changes after entering your URLs
-* Make sure the domain and cliend ID values imported correctly
-
-Still having issues? Check out our documentation or visit our community page to get more help.
-
-:::
-::::
-
-## Add logout to your application {{{ data-action=code data-code="MainActivity.kt#40:52" }}}
-
-Use `WebAuthProvider` to remove the cookie set by the browser at authentication time, so that the users are forced to re-enter their credentials the next time they try to authenticate.
-
-Add a `logout` method to your app to remove the user's session and log them out of the app. Here, you can pass the scheme value that was used in the `auth0Scheme` manifest placeholder as part of the initial configuration.
-
-Use the `WebAuthProvider` class to implement logout. This call opens the browser and navigates the user to the logout endpoint. If the user cancels the logout, consider redirected the user to their previous URL.
-::::checkpoint
-
-:::checkpoint-default
-
-Add a button to your app that calls `logout` and logs the user out of your application. When you click it, verify that your Android app redirects you logout page and back again, and that you are no longer logged in to your application.
-
-:::
-
-:::checkpoint-failure
-If your application did not logout successfully:
-* Ensure the Allowed Logout URLs are set properly
-* Verify you saved your changes after entering your URLs
+
-Still having issues? Check out our documentation or visit our community page to get more help.
+ If your application did not logout successfully:
Ensure the Allowed Logout URLs are set properly
Verify you saved your changes after entering your URLs
Still having issues? Check out our documentation or visit our community page to get more help.
-:::
-::::
+
## Show user profile information {{{ data-action="code" data-code="MainActivity.kt#54:70" }}}
-Use the AuthenticationAPIClient
class to retrieve the user's profile from Auth0. This requires:
The access token returned from the login phase
The WebAuthProvider.login
must contain the profile
scope
You must specify the email
scope if you need to retrieve the user's email address.
This quickstart sets the openid profile email
scopes by default during the login step above.
The following demonstrates a function that can be used to retrieve the user's profile and show it on the screen:
Android Quickstart step 7 checkpoint Call the showUserProfile
function after login. Verify the onSuccess
callback returns the user's profile information.
+Use the AuthenticationAPIClient
class to retrieve the user's profile from Auth0. This requires:
The access token returned from the login phase
The WebAuthProvider.login
must contain the profile
scope
You must specify the email
scope if you need to retrieve the user's email address.
This quickstart sets the openid profile email
scopes by default during the login step above.
The following demonstrates a function that can be used to retrieve the user's profile and show it on the screen:
Android Quickstart step 7 checkpoint Call the showUserProfile
function after login. Verify the onSuccess
callback returns the user's profile information.
- If your application did not return user profile information:
Verify the accessToken
is valid
Still having issues? Check out our documentation or visit our community page to get more help.
+ If your application did not return user profile information:
Verify the accessToken
is valid
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/native/device/interactive.md b/articles/quickstart/native/device/interactive.md
index 78e12e8551..de9d4b8af9 100644
--- a/articles/quickstart/native/device/interactive.md
+++ b/articles/quickstart/native/device/interactive.md
@@ -3,40 +3,38 @@ title: Device Authorization Flow
description: This tutorial demonstrates how to call your API from an input-constrained device using the Device Authorization Flow.
interactive: true
-github:
- path: https://auth0.github.io/device-flow-playground/
locale: en-US
---
# Device Authorization Flow
-This tutorial demonstrates how to call your API from an input-constrained device using the Device Authorization Flow. We recommend that you log in to follow this quickstart with examples configured for your account.
For an interactive experience, you can use the Device Flow Playground.
Prerequisites
Ensure the OIDC Conformant toggle is enabled. For more information, read OIDC-Conformant Authentication.
Add Device Code to the Application's grant types. For more information, read Update Grant Types.
Add Refresh Token to the Application’s grant types if you want to enable Refresh Tokens.
Configure and enable at least one connection for the application.
Enable Allow Offline Access if you are using refresh tokens. For more information, read API Settings.
Configure Device User Code Settings to define the character set, format, and length of your randomly-generated user code.
+This tutorial demonstrates how to call your API from an input-constrained device using the Device Authorization Flow. We recommend that you log in to follow this quickstart with examples configured for your account.
For an interactive experience, you can use the Device Flow Playground.
Prerequisites
Ensure the OIDC Conformant toggle is enabled. For more information, read OIDC-Conformant Authentication.
Add Device Code to the Application's grant types. For more information, read Update Grant Types.
Add Refresh Token to the Application’s grant types if you want to enable Refresh Tokens.
Configure and enable at least one connection for the application.
Enable Allow Offline Access if you are using refresh tokens. For more information, read API Settings.
Configure Device User Code Settings to define the character set, format, and length of your randomly-generated user code.
## Request device code
-When the user starts the device application and wants to authorize it, your application must request a device code from the Auth0 Authentication API to associate with the user session.
To get the device code, your application must call the Authentication API Device Authorization Flow Authorize endpoint:
+When the user starts the device application and wants to authorize it, your application must request a device code from the Auth0 Authentication API to associate with the user session.
To get the device code, your application must call the Authentication API Device Authorization Flow Authorize endpoint:
- curl --request post \
+ curl --request post \
--url 'https://${account.namespace}/oauth/device/code' \
- --header 'content-type: application/x-www-form-urlencoded'
var client = new RestClient("https://${account.namespace}/oauth/device/code");
+ --header 'content-type: application/x-www-form-urlencoded'
var client = new RestClient("https://${account.namespace}/oauth/device/code");
var request = new RestRequest(Method.POST);
request.AddHeader("content-type", "application/x-www-form-urlencoded");
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
@@ -84,11 +82,11 @@ func main() {
-}
HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/device/code")
+}
HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/device/code")
.header("content-type", "application/x-www-form-urlencoded")
- .asString();
var axios = require("axios").default;
+ .asString();
var axios = require("axios").default;
@@ -112,7 +110,7 @@ axios.request(options).then(function (response) {
console.error(error);
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
@@ -152,7 +150,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
}];
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
@@ -200,7 +198,7 @@ if ($err) {
echo $response;
-}
import http.client
+}
import http.client
@@ -222,7 +220,7 @@ data = res.read()
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
require 'net/http'
@@ -250,7 +248,7 @@ request["content-type"] = 'application/x-www-form-urlencoded'
response = http.request(request)
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
@@ -327,7 +325,7 @@ dataTask.resume()
## Poll the token endpoint
-While your device application waits for the user to activate it, it should call the Authentication API POST /oauth/token endpoint intermittently and handle the response appropriately.
Ensure your device application waits for the length of the interval
(in seconds) or until it receives a successful response, whichever is longer, to avoid network latency issues.
curl --request POST \
+While your device application waits for the user to activate it, it should call the Authentication API POST /oauth/token endpoint intermittently and handle the response appropriately.
Ensure your device application waits for the length of the interval
(in seconds) or until it receives a successful response, whichever is longer, to avoid network latency issues.
curl --request POST \
--url 'https://${account.namespace}/oauth/token' \
@@ -367,7 +365,7 @@ dataTask.resume()
+
-
-You should validate your tokens before saving them. To learn how, read Validate Access Tokens and Validate ID Tokens.
Access tokens are used to call the Authentication API Get User Info endpoint (if your device application requested the openid
scope) or the API that was specified by the audience
parameter. If you are calling your own API, your device application must verify the access token before using it.
ID tokens contain user information that must be decoded and extracted. The Authentication API only returns an id_token
if your device application requested the openid
scope.
Refresh tokens are used to obtain a new access token or ID token after the previous one has expired. The Authentication API only returns a refresh_token
if the Allow Offline Access setting is enabled for the API specified by the audience
parameter, and your device application requested the offline_access
scope.
+You should validate your tokens before saving them. To learn how, read Validate Access Tokens and Validate ID Tokens.
Access tokens are used to call the Authentication API Get User Info endpoint (if your device application requested the openid
scope) or the API that was specified by the audience
parameter. If you are calling your own API, your device application must verify the access token before using it.
ID tokens contain user information that must be decoded and extracted. The Authentication API only returns an id_token
if your device application requested the openid
scope.
Refresh tokens are used to obtain a new access token or ID token after the previous one has expired. The Authentication API only returns a refresh_token
if the Allow Offline Access setting is enabled for the API specified by the audience
parameter, and your device application requested the offline_access
scope.
## Call your API
@@ -387,7 +385,7 @@ dataTask.resume()
## Refresh tokens
-To get a new access token for a user, your device application can call the Authentication API POST /oauth/token endpoint with the refresh_token
parameter.
curl --request POST \
+To get a new access token for a user, your device application can call the Authentication API POST /oauth/token endpoint with the refresh_token
parameter.
curl --request POST \
--url 'https://${account.namespace}/oauth/token' \
@@ -419,7 +417,7 @@ dataTask.resume()
+
-
-To learn more about refresh tokens, read Refresh Tokens.
+To learn more about refresh tokens, read Refresh Tokens.
## Troubleshooting @@ -553,9 +551,9 @@ dataTask.resume()Refer to the samples below to learn how to implement this flow in real-world applications.
AppleTV (Swift): Simple application that shows how Auth0 can be used with the Device Authorization Flow from an AppleTV.
CLI (Node.js): Sample implementation of a CLI that uses the Device Authorization Flow instead of the Authorization Code Flow. The major difference is that your CLI does not need to host a webserver and listen on a port.
Refer to the samples below to learn how to implement this flow in real-world applications.
AppleTV (Swift): Simple application that shows how Auth0 can be used with the Device Authorization Flow from an AppleTV.
CLI (Node.js): Sample implementation of a CLI that uses the Device Authorization Flow instead of the Authorization Code Flow. The major difference is that your CLI does not need to host a webserver and listen on a port.
To use the Device Authorization Flow, a device application must:
Support Server Name Indication (SNI)
Be a Native Application
Have the Authentication Method set to None
Not be created through Dynamic Client Registration
In addition, the Device Authorization Flow does not allow:
Social Connections using Auth0 developer keys unless you are using New Universal Login Experience
Query string parameters to be accessed from a hosted login page or Actions.
To use the Device Authorization Flow, a device application must:
Support Server Name Indication (SNI)
Be a Native Application
Have the Authentication Method set to None
Not be created through Dynamic Client Registration
In addition, the Device Authorization Flow does not allow:
Social Connections using Auth0 developer keys unless you are using New Universal Login Experience
Query string parameters to be accessed from a hosted login page or Actions.
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.
The Flutter SDK currently only supports Flutter apps for Android, iOS, and macOS.
This quickstart assumes you already have a Flutter app up and running. If not, check out the Flutter "getting started" guides to get started with a simple app.
You should also be familiar with the Flutter command line tool.
New to Auth? Learn How Auth0 works, how it integrates with Single-Page Applications and which protocol it uses.
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.
The Flutter SDK currently only supports Flutter apps for Android, iOS, and macOS.
This quickstart assumes you already have a Flutter app up and running. If not, check out the Flutter "getting started" guides to get started with a simple app.
You should also be familiar with the Flutter command line tool.
New to Auth? Learn How Auth0 works, how it integrates with Single-Page Applications and which protocol 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.
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, 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.
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.
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. This feature requires Xcode 15.3+ and a paid Apple Developer account.
SCHEME://${account.namespace}/android/YOUR_PACKAGE_NAME/callback
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. 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, 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. 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 On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links (https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback,
+
Configure an Auth0 application
Configure the callback and logout URLs
SCHEME
placeholder can be https
or some other custom scheme. https
schemes require enabling Android App 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. This feature requires Xcode 15.3+ and a paid Apple Developer account.
SCHEME://${account.namespace}/android/YOUR_PACKAGE_NAME/callback
https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback,
YOUR_BUNDLE_IDENTIFIER://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback
https://${account.namespace}/macos/YOUR_BUNDLE_IDENTIFIER/callback,
@@ -35,41 +35,12 @@ com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
## 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.
The sample 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. You can read more about setting this value in the Auth0.Android SDK README.
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 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 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. You can read more about setting this value in the Auth0.Android SDK README.
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.
## Configure iOS/macOS -If you are not developing for the iOS or macOS platforms, skip this step. -::: warning -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 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, and **App ID** to your app's bundle identifier. - -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.
Go to the settings page 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, and App ID to your app's bundle identifier.
This will add your app to your Auth0 tenant's apple-app-site-association
file.
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 of the Runner target settings, and press the + Capability button. Then select Associated Domains.
Next, add the following entry under Associated Domains:
webcredentials:${account.namespace}
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.
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
Make sure the domain and client ID values are imported correctly
If using Android, ensure that the manifest placeholders have been set up correctly, otherwise the redirect back to your app may not work
Still having issues? Check out our documentation or visit our community page to get more help.
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
Make sure the domain and client ID values are imported correctly
If using Android, ensure that the manifest placeholders have been set up correctly, otherwise the redirect back to your app may not work
Still having issues? Check out our documentation or visit our community page to get more help.
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
Still having issues? Check out our documentation or visit our community page to get more help.
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
Still having issues? Check out our documentation or visit our community page to get more help.
If your app did not return user profile information:
Verify the access token is valid
Still having issues? Check out our documentation or visit our community page to get more help.
If your app did not return user profile information:
Verify the access token is valid
Still having issues? Check out our documentation or visit our community page to get more help.
Auth0 allows you to quickly add authentication and access user profile information in your application. This guide demonstrates how to integrate Auth0 with an Ionic (Angular) & Capacitor application using the Auth0 Angular SDK.
+Auth0 allows you to quickly add authentication and access user profile information in your application. This guide demonstrates how to integrate Auth0 with an Ionic (Angular) & Capacitor application using the Auth0 Angular SDK.
## Getting started -This quickstart assumes you already have an Ionic application up and running with Capacitor. If not, check out the Using Capacitor with Ionic Framework guide to get started with a simple app, or clone our sample apps.
You should also be familiar with the Capacitor development workflow.
+This quickstart assumes you already have an Ionic application up and running with Capacitor. If not, check out the Using Capacitor with Ionic Framework guide to get started with a simple app, or clone our sample apps.
You should also be familiar with the Capacitor development workflow.
## Configure Auth0 -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.
Throughout this article, YOUR_PACKAGE_ID
is your application's package ID. This can be found and configured in the appId
field in your capacitor.config.ts
file. See Capacitor's Config schema for more info.
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to:
YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
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.
If you are following along with our sample project, set this to:
YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
To be able to make requests from your native application to Auth0, set the following Allowed Origins in your Application Settings.
If you are following along with our sample project, set this to capacitor://localhost, http://localhost
for iOS and Android respectively.
Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.
+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.
Throughout this article, YOUR_PACKAGE_ID
is your application's package ID. This can be found and configured in the appId
field in your capacitor.config.ts
file. See Capacitor's Config schema for more info.
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to:
YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
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.
If you are following along with our sample project, set this to:
YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
To be able to make requests from your native application to Auth0, set the following Allowed Origins in your Application Settings.
If you are following along with our sample project, set this to capacitor://localhost, http://localhost
for iOS and Android respectively.
Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.
## Install the Auth0 Angular SDK -Run the following command within your project directory to install the Auth0 Angular SDK:
npm install @auth0/auth0-angular
The SDK exposes several types that help you integrate Auth0 with your Angular application idiomatically, including a module and an authentication service.
This quickstart and sample make use of some of Capacitor's official plugins. Install these into your app using the following command:
npm install @capacitor/browser @capacitor/app
@capacitor/browser
: Allows you to interact with the device's system browser and is used to open the URL to Auth0's authorization endpoint.
@capacitor/app
: Allows you to subscribe to high-level app events, useful for handling callbacks from Auth0.
Capacitor's Browser plugin on iOS uses SFSafariViewController
, which on iOS 11+ does not share cookies with Safari on the device. This means that SSO will not work on those devices. If you need SSO, please instead use a compatible plugin that uses ASWebAuthenticationSession.
Run the following command within your project directory to install the Auth0 Angular SDK:
npm install @auth0/auth0-angular
The SDK exposes several types that help you integrate Auth0 with your Angular application idiomatically, including a module and an authentication service.
This quickstart and sample make use of some of Capacitor's official plugins. Install these into your app using the following command:
npm install @capacitor/browser @capacitor/app
@capacitor/browser
: Allows you to interact with the device's system browser and is used to open the URL to Auth0's authorization endpoint.
@capacitor/app
: Allows you to subscribe to high-level app events, useful for handling callbacks from Auth0.
Capacitor's Browser plugin on iOS uses SFSafariViewController
, which on iOS 11+ does not share cookies with Safari on the device. This means that SSO will not work on those devices. If you need SSO, please instead use a compatible plugin that uses ASWebAuthenticationSession.
The SDK exports AuthModule
, a module that contains all the services required for the SDK to function. This module should be registered with your application and be configured with your Auth0 domain and Client ID.
The AuthModule.forRoot
function takes the following configuration:
domain
: The domain
value present under the Settings of the application you created in the Auth0 Dashboard, or your custom domain if you are using Auth0's custom domains feature.
clientId
: The Client ID value present under the Settings of the application you created in the Auth0 Dashboard.
useRefreshTokens
: To use auth0-angular with Ionic on Android and iOS, it's required to enable refresh tokens.
useRefreshTokensFallback
: To use auth0-angular with Ionic on Android and iOS, it's required to disable the iframe fallback.
authorizationParams.redirect_uri
: The URL to redirect your users after they authenticate with Auth0.
To persist authentication after closing and reopening the application, you may want to set cacheLocation
to localstorage
when configuring the SDK, but please be aware of the risks of storing tokens in localstorage. Also, localstorage should be treated as transient in Capacitor app as the data might be recovered unexpectedly in certain circumstances. Please read the guidance on storage in the Capacitor docs.
Additionally, the SDK has the ability to use a custom cache implementation to store tokens, if you have a requirement to use a more secure and persistent storage mechanism.
Note that we recommend against using Capacitor's Storage plugin to store tokens, as this is backed by UserDefaults and SharedPreferences on iOS and Android respectively. Data stored using these APIs is not encrypted, not secure, and could also be synced to the cloud.
Now that you have configured your app with the Auth0 Angular SDK, run your application to verify that the SDK is initializing without error, and that your application runs as it did before.
Sorry about that. Here's a couple things to double check:
ensure the correct application is selected
did you save after entering your URLs?
make sure the domain and Client ID imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
In a Capacitor application, the Capacitor's Browser plugin performs a redirect to the Auth0 Universal Login Page. Set the openUrl
parameter on the loginWithRedirect
function to use Browser.open
so that the URL is opened using the device's system browser component (SFSafariViewController on iOS, and Chrome Custom Tabs on Android).
By default, the SDK's loginWithRedirect
method uses window.location.href
to navigate to the login page in the default browser application on the user's device rather than the system browser component appropriate for the platform. The user would leave your application to authenticate and could make for a suboptimal user experience.
The loginWithRedirect
function tells the SDK to initiate the login flow, using the Browser.open
function to open the login URL with the platform's system browser component by setting the openUrl
parameter. This provides a way for your user to log in to your application. Users redirect to the login page at Auth0 and do not receive any errors.
In a Capacitor application, the Capacitor's Browser plugin performs a redirect to the Auth0 Universal Login Page. Set the openUrl
parameter on the loginWithRedirect
function to use Browser.open
so that the URL is opened using the device's system browser component (SFSafariViewController on iOS, and Chrome Custom Tabs on Android).
By default, the SDK's loginWithRedirect
method uses window.location.href
to navigate to the login page in the default browser application on the user's device rather than the system browser component appropriate for the platform. The user would leave your application to authenticate and could make for a suboptimal user experience.
The loginWithRedirect
function tells the SDK to initiate the login flow, using the Browser.open
function to open the login URL with the platform's system browser component by setting the openUrl
parameter. This provides a way for your user to log in to your application. Users redirect to the login page at Auth0 and do not receive any errors.
appUrlOpen
event must be handled within your app. You can call the handleRedirectCallback
method from the Auth0 SDK to initialize the authentication state.You can only use this method on a redirect from Auth0. To verify success, check for the presence of the code
and state
parameters in the URL.
The Browser.close()
method should close the browser when this event is raised.
Note that the appUrlOpen
event callback is wrapped in ngZone.run
. Changes to observables that occur when handleRedirectCallback
runs are picked up by the Angular app. To learn more, read Using Angular with Capacitor. Otherwise, the screen doesn't update to show the authenticated state after log in.
This article assumes you will be using Custom URL Schemes to handle the callback within your application. To do this, register your YOUR_PACKAGE_ID
as a URL scheme for your chosen platform. To learn more, read Defining a Custom URL Scheme for iOS, or Create Deep Links to App Content for Android.
Add the appUrlOpen
to your application's App
component and log in. The browser window should close once the user authenticates and logs in to your app.
Once users logs in with the Universal Login Page, they redirect back to your app via a URL with a custom URL scheme. The appUrlOpen
event must be handled within your app. You can call the handleRedirectCallback
method from the Auth0 SDK to initialize the authentication state.
You can only use this method on a redirect from Auth0. To verify success, check for the presence of the code
and state
parameters in the URL.
The Browser.close()
method should close the browser when this event is raised.
Note that the appUrlOpen
event callback is wrapped in ngZone.run
. Changes to observables that occur when handleRedirectCallback
runs are picked up by the Angular app. To learn more, read Using Angular with Capacitor. Otherwise, the screen doesn't update to show the authenticated state after log in.
This article assumes you will be using Custom URL Schemes to handle the callback within your application. To do this, register your YOUR_PACKAGE_ID
as a URL scheme for your chosen platform. To learn more, read Defining a Custom URL Scheme for iOS, or Create Deep Links to App Content for Android.
Add the appUrlOpen
to your application's App
component and log in. The browser window should close once the user authenticates and logs in to your app.
Sorry about that. Here's a couple things to double check:
check that the custom URL scheme is registered for your chosen platform. On iOS, define a custom URL scheme, or add an intent filter with your custom scheme for Android
if the event fires but you receive an error, check the logs in your Auth0 Dashboard for the error code
Sorry about that. Here's a couple things to double check:
check that the custom URL scheme is registered for your chosen platform. On iOS, define a custom URL scheme, or add an intent filter with your custom scheme for Android
if the event fires but you receive an error, check the logs in your Auth0 Dashboard for the error code
Auth0 allows you to quickly add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with an Ionic (React) & Capacitor application using the Auth0 React SDK.
+Auth0 allows you to quickly add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with an Ionic (React) & Capacitor application using the Auth0 React SDK.
## Getting started -This quickstart assumes you already have an Ionic application up and running with Capacitor. If not, check out the Using Capacitor with Ionic Framework guide to get started with a simple app, or clone our sample apps.
You should also be familiar with the Capacitor development workflow.
+This quickstart assumes you already have an Ionic application up and running with Capacitor. If not, check out the Using Capacitor with Ionic Framework guide to get started with a simple app, or clone our sample apps.
You should also be familiar with the Capacitor development workflow.
## Configure Auth0 -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.
Throughout this article, YOUR_PACKAGE_ID
is your application's package ID. This can be found and configured in the appId
field in your capacitor.config.ts
file. See Capacitor's Config schema for more info.
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to:
YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback
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.
If you are following along with our sample project, set this to:
YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback
.
To be able to make requests from your native application to Auth0, set the following Allowed Origins in your Application Settings.
If you are following along with our sample project, set this to capacitor://localhost, http://localhost
for iOS and Android respectively.
Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.
+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.
Throughout this article, YOUR_PACKAGE_ID
is your application's package ID. This can be found and configured in the appId
field in your capacitor.config.ts
file. See Capacitor's Config schema for more info.
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to:
YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback
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.
If you are following along with our sample project, set this to:
YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback
.
To be able to make requests from your native application to Auth0, set the following Allowed Origins in your Application Settings.
If you are following along with our sample project, set this to capacitor://localhost, http://localhost
for iOS and Android respectively.
Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.
## Install the Auth0 React SDK -Run the following command within your project directory to install the Auth0 React SDK:
npm install @auth0/auth0-react
The SDK exposes methods and variables that help you integrate Auth0 with your React application idiomatically using React Hooks or Higher-Order Components.
This quickstart and sample make use of some of Capacitor's official plugins. Install these into your app using the following command:
npm install @capacitor/browser @capacitor/app
@capacitor/browser
: Allows you to interact with the device's system browser and is used to open the URL to Auth0's authorization endpoint.
@capacitor/app
: Allows you to subscribe to high-level app events, useful for handling callbacks from Auth0.
Capacitor's Browser plugin on iOS uses SFSafariViewController
, which on iOS 11+ does not share cookies with Safari on the device. This means that SSO will not work on those devices. If you need SSO, please instead use a compatible plugin that uses ASWebAuthenticationSession.
Run the following command within your project directory to install the Auth0 React SDK:
npm install @auth0/auth0-react
The SDK exposes methods and variables that help you integrate Auth0 with your React application idiomatically using React Hooks or Higher-Order Components.
This quickstart and sample make use of some of Capacitor's official plugins. Install these into your app using the following command:
npm install @capacitor/browser @capacitor/app
@capacitor/browser
: Allows you to interact with the device's system browser and is used to open the URL to Auth0's authorization endpoint.
@capacitor/app
: Allows you to subscribe to high-level app events, useful for handling callbacks from Auth0.
Capacitor's Browser plugin on iOS uses SFSafariViewController
, which on iOS 11+ does not share cookies with Safari on the device. This means that SSO will not work on those devices. If you need SSO, please instead use a compatible plugin that uses ASWebAuthenticationSession.
Under the hood, the Auth0 React SDK uses React Context to manage the authentication state of your users. One way to integrate Auth0 with your React app is to wrap your root component with an Auth0Provider
you can import from the SDK.
The Auth0Provider
component takes the following props:
domain
: The domain
value present under the Settings of the application you created in your Auth0 Dashboard, or your custom domain if using Auth0's Custom Domains feature.
clientId
: The Client ID value present under the Settings of the application you created in your Auth0 Dashboard.
useRefreshTokens
: To use auth0-react with Ionic on Android and iOS, it's required to enable refresh tokens.
useRefreshTokensFallback
: To use auth0-react with Ionic on Android and iOS, it's required to disable the iframe fallback.
authorizationParams.redirect_uri
: The URL to where you'd like to redirect your users after they authenticate with Auth0.
To persist authentication after closing and reopening the application, you may want to set cacheLocation
to localstorage
when configuring the SDK, but please be aware of the risks of storing tokens in localstorage. Also, localstorage should be treated as transient in Capacitor app as the data might be recovered unexpectedly in certain circumstances. Please read the guidance on storage in the Capacitor docs.
Additionally, the SDK has the ability to use a custom cache implementation to store tokens, if you have a requirement to use a more secure and persistent storage mechanism.
Note that we recommend against using Capacitor's Storage plugin to store tokens, as this is backed by UserDefaults and SharedPreferences on iOS and Android respectively. Data stored using these APIs is not encrypted, not secure, and could also be synced to the cloud.
Add the Auth0Provider
component in a way that wraps your App
component, then run your application to verify that the SDK is initializing correctly and your application is not throwing any errors related to Auth0.
Sorry about that. Here's a couple things to double check:
ensure the correct application is selected
did you save after entering your URLs?
make sure the domain and Client ID imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
In a Capacitor application, the Capacitor's Browser plugin performs a redirect to the Auth0 Universal Login Page. Set the openUrl
parameter on the loginWithRedirect
function to use Browser.open
so that the URL is opened using the device's system browser component (SFSafariViewController on iOS, and Chrome Custom Tabs on Android).
By default, the SDK's loginWithRedirect
method uses window.location.href
to navigate to the login page in the default browser application on the user's device rather than the system browser component appropriate for the platform. The user would leave your application to authenticate and could make for a suboptimal user experience.
The loginWithRedirect
function tells the SDK to initiate the login flow, using the Browser.open
function to open the login URL with the platform's system browser component by setting the openUrl
parameter. This provides a way for your user to log in to your application. Users redirect to the login page at Auth0 and do not receive any errors.
In a Capacitor application, the Capacitor's Browser plugin performs a redirect to the Auth0 Universal Login Page. Set the openUrl
parameter on the loginWithRedirect
function to use Browser.open
so that the URL is opened using the device's system browser component (SFSafariViewController on iOS, and Chrome Custom Tabs on Android).
By default, the SDK's loginWithRedirect
method uses window.location.href
to navigate to the login page in the default browser application on the user's device rather than the system browser component appropriate for the platform. The user would leave your application to authenticate and could make for a suboptimal user experience.
The loginWithRedirect
function tells the SDK to initiate the login flow, using the Browser.open
function to open the login URL with the platform's system browser component by setting the openUrl
parameter. This provides a way for your user to log in to your application. Users redirect to the login page at Auth0 and do not receive any errors.
appUrlOpen
event must be handled within your app. You can call the handleRedirectCallback
method from the Auth0 SDK to initialize the authentication state.You can only use this method on a redirect from Auth0. To verify success, check for the presence of the code
and state
parameters in the URL.
The Browser.close()
method should close the browser when this event is raised.
This article assumes you will be using Custom URL Schemes to handle the callback within your application. To do this, register your YOUR_PACKAGE_ID
as a URL scheme for your chosen platform. To learn more, read Defining a Custom URL Scheme for iOS, or Create Deep Links to App Content for Android.
Add the appUrlOpen
to your application's App
component and log in. The browser window should close once the user authenticates and logs in to your app.
Once users logs in with the Universal Login Page, they redirect back to your app via a URL with a custom URL scheme. The appUrlOpen
event must be handled within your app. You can call the handleRedirectCallback
method from the Auth0 SDK to initialize the authentication state.
You can only use this method on a redirect from Auth0. To verify success, check for the presence of the code
and state
parameters in the URL.
The Browser.close()
method should close the browser when this event is raised.
This article assumes you will be using Custom URL Schemes to handle the callback within your application. To do this, register your YOUR_PACKAGE_ID
as a URL scheme for your chosen platform. To learn more, read Defining a Custom URL Scheme for iOS, or Create Deep Links to App Content for Android.
Add the appUrlOpen
to your application's App
component and log in. The browser window should close once the user authenticates and logs in to your app.
Sorry about that. Here's a couple things to double check:
check that the custom URL scheme is registered for your chosen platform. On iOS, define a custom URL scheme, or add an intent filter with your custom scheme on Android
if the event fires but you receive an error, check the logs in your Auth0 Dashboard for the reason for the error
Sorry about that. Here's a couple things to double check:
check that the custom URL scheme is registered for your chosen platform. On iOS, define a custom URL scheme, or add an intent filter with your custom scheme on Android
if the event fires but you receive an error, check the logs in your Auth0 Dashboard for the reason for the error
Now that users can log in, you need to configure a way to log out. Users must redirect to the Auth0 logout endpoint in the browser to clear their browser session. Again, Capacitor's Browser plugin should perform this redirect so that the user does not leave your app and receive a suboptimal experience.
To achieve this with Ionic and Capacitor in conjunction with the Auth0 SDK:
Construct the URL for your app Auth0 should use to redirect to after logout. This is a URL that uses your registered custom scheme and Auth0 domain. Add it to your Allowed Logout URLs configuration in the Auth0 Dashboard
Logout from the SDK by calling logout
, and pass your redirect URL back as the logoutParams.returnTo
parameter.
Set the openUrl
parameter to a callback that uses the Capacitor browser plugin to open the URL using Browser.open
.
Similar to the login step, if you do not set openUrl
when calling logout
, the SDK redirects the user to the logout URL using the default browser application on the device, which provides a suboptimal user experience.
Provide a way for your users to log out of your application. Verify that you redirect to Auth0 and then to the address you specified in the returnTo
parameter. Check that you are no longer logged in to your application.
Now that users can log in, you need to configure a way to log out. Users must redirect to the Auth0 logout endpoint in the browser to clear their browser session. Again, Capacitor's Browser plugin should perform this redirect so that the user does not leave your app and receive a suboptimal experience.
To achieve this with Ionic and Capacitor in conjunction with the Auth0 SDK:
Construct the URL for your app Auth0 should use to redirect to after logout. This is a URL that uses your registered custom scheme and Auth0 domain. Add it to your Allowed Logout URLs configuration in the Auth0 Dashboard
Logout from the SDK by calling logout
, and pass your redirect URL back as the logoutParams.returnTo
parameter.
Set the openUrl
parameter to a callback that uses the Capacitor browser plugin to open the URL using Browser.open
.
Similar to the login step, if you do not set openUrl
when calling logout
, the SDK redirects the user to the logout URL using the default browser application on the device, which provides a suboptimal user experience.
Provide a way for your users to log out of your application. Verify that you redirect to Auth0 and then to the address you specified in the returnTo
parameter. Check that you are no longer logged in to your application.
Auth0 allows you to quickly add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with an Ionic (Vue) & Capacitor application using the Auth0 Vue SDK.
+Auth0 allows you to quickly add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with an Ionic (Vue) & Capacitor application using the Auth0 Vue SDK.
## Getting started -This quickstart assumes you already have an Ionic application up and running with Capacitor. If not, check out the Using Capacitor with Ionic Framework guide to get started with a simple app, or clone our sample apps.
You should also be familiar with the Capacitor development workflow.
+This quickstart assumes you already have an Ionic application up and running with Capacitor. If not, check out the Using Capacitor with Ionic Framework guide to get started with a simple app, or clone our sample apps.
You should also be familiar with the Capacitor development workflow.
## Configure Auth0 -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.
Throughout this article, YOUR_PACKAGE_ID
is your application's package ID. This can be found and configured in the appId
field in your capacitor.config.ts
file. See Capacitor's Config schema for more info.
Use the interactive selector to create a new Auth0 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.
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
If you are following along with our sample project, set this to YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
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.
If you are following along with our sample project, set this to YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
.
To be able to make requests from your native application to Auth0, set the following Allowed Origins in your Application Settings.
If you are following along with our sample project, set this to capacitor://localhost, http://localhost
for iOS and Android respectively.
Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.
+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.
Throughout this article, YOUR_PACKAGE_ID
is your application's package ID. This can be found and configured in the appId
field in your capacitor.config.ts
file. See Capacitor's Config schema for more info.
Use the interactive selector to create a new Auth0 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.
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
If you are following along with our sample project, set this to YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
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.
If you are following along with our sample project, set this to YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
.
To be able to make requests from your native application to Auth0, set the following Allowed Origins in your Application Settings.
If you are following along with our sample project, set this to capacitor://localhost, http://localhost
for iOS and Android respectively.
Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.
## Install the Auth0 Vue SDK -Run the following command within your project directory to install the Auth0 Vue SDK:
npm install @auth0/auth0-vue
The SDK exposes several types that help you integrate Auth0 with your Vue application idiomatically, including a module and an authentication service.
This quickstart and sample make use of some of Capacitor's official plugins. Install these into your app using the following command:
npm install @capacitor/browser @capacitor/app
@capacitor/browser
- allows you to interact with the device's system browser and is used to open the URL to Auth0's authorizaction endpoint
@capacitor/app
- allows you to subscribe to high-level app events, useful for handling callbacks from Auth0
Capacitor's Browser plugin on iOS uses SFSafariViewController
, which on iOS 11+ does not share cookies with Safari on the device. This means that SSO will not work on those devices. If you need SSO, please instead use a compatible plugin that uses ASWebAuthenticationSession.
Run the following command within your project directory to install the Auth0 Vue SDK:
npm install @auth0/auth0-vue
The SDK exposes several types that help you integrate Auth0 with your Vue application idiomatically, including a module and an authentication service.
This quickstart and sample make use of some of Capacitor's official plugins. Install these into your app using the following command:
npm install @capacitor/browser @capacitor/app
@capacitor/browser
- allows you to interact with the device's system browser and is used to open the URL to Auth0's authorizaction endpoint
@capacitor/app
- allows you to subscribe to high-level app events, useful for handling callbacks from Auth0
Capacitor's Browser plugin on iOS uses SFSafariViewController
, which on iOS 11+ does not share cookies with Safari on the device. This means that SSO will not work on those devices. If you need SSO, please instead use a compatible plugin that uses ASWebAuthenticationSession.
The SDK exports createAuth0
, a composable that contains all the services required for the SDK to function. This composable should be registered with your application and be configured with your Auth0 domain and Client ID.
The createAuth0
composable takes the following configuration:
domain
: The domain
value present under the Settings of the application you created in the Auth0 Dashboard, or your custom domain if you are using Auth0's custom domains feature.
clientId
: The Client ID value present under the Settings of the application you created in the Auth0 Dashboard.
useRefreshTokens
: To use auth0-vue with Ionic on Android and iOS, it's required to enable refresh tokens.
useRefreshTokensFallback
: To use auth0-vue with Ionic on Android and iOS, it's required to disable the iframe fallback.
authorizationParams.redirect_uri
: The URL to redirect your users after they authenticate with Auth0.
To persist authentication after closing and reopening the application, you may want to set cacheLocation
to localstorage
when configuring the SDK, but please be aware of the risks of storing tokens in localstorage. Also, localstorage should be treated as transient in Capacitor app as the data might be recovered unexpectedly in certain circumstances. Please read the guidance on storage in the Capacitor docs.
Additionally, the SDK has the ability to use a custom cache implementation to store tokens, if you have a requirement to use a more secure and persistent storage mechanism.
Note that we recommend against using Capacitor's Storage plugin to store tokens, as this is backed by UserDefaults and SharedPreferences on iOS and Android respectively. Data stored using these APIs is not encrypted, not secure, and could also be synced to the cloud.
Now that you have configured your app with the Auth0 Vue SDK, run your application to verify that the SDK is initializing without error, and that your application runs as it did before.
Sorry about that. Here's a couple things to double check:
ensure the correct application is selected
did you save after entering your URLs?
make sure the domain and Client ID imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
In a Capacitor application, the Capacitor's Browser plugin performs a redirect to the Auth0 Universal Login Page. Set the openUrl
parameter on the loginWithRedirect
function to use Browser.open
so that the URL is opened using the device's system browser component (SFSafariViewController on iOS, and Chrome Custom Tabs on Android).
By default, the SDK's loginWithRedirect
method uses window.location.href
to navigate to the login page in the default browser application on the user's device rather than the system browser component appropriate for the platform. The user would leave your application to authenticate and could make for a suboptimal user experience.
The loginWithRedirect
function tells the SDK to initiate the login flow, using the Browser.open
function to open the login URL with the platform's system browser component by setting the openUrl
parameter. This provides a way for your user to log in to your application. Users redirect to the login page at Auth0 and do not receive any errors.
In a Capacitor application, the Capacitor's Browser plugin performs a redirect to the Auth0 Universal Login Page. Set the openUrl
parameter on the loginWithRedirect
function to use Browser.open
so that the URL is opened using the device's system browser component (SFSafariViewController on iOS, and Chrome Custom Tabs on Android).
By default, the SDK's loginWithRedirect
method uses window.location.href
to navigate to the login page in the default browser application on the user's device rather than the system browser component appropriate for the platform. The user would leave your application to authenticate and could make for a suboptimal user experience.
The loginWithRedirect
function tells the SDK to initiate the login flow, using the Browser.open
function to open the login URL with the platform's system browser component by setting the openUrl
parameter. This provides a way for your user to log in to your application. Users redirect to the login page at Auth0 and do not receive any errors.
appUrlOpen
event must be handled within your app. You can call the handleRedirectCallback
method from the Auth0 SDK to initialize the authentication state.You can only use this method on a redirect from Auth0. To verify success, check for the presence of the code
and state
parameters in the URL.
The Browser.close()
method should close the browser when this event is raised.
This article assumes you will be using Custom URL Schemes to handle the callback within your application. To do this, register your YOUR_PACKAGE_ID
as a URL scheme for your chosen platform. To learn more, read Defining a Custom URL Scheme for iOS, or Create Deep Links to App Content for Android.
Add the appUrlOpen
to your application's App
component setup and log in. The browser window should close once the user authenticates and logs in to your app.
Once users logs in with the Universal Login Page, they redirect back to your app via a URL with a custom URL scheme. The appUrlOpen
event must be handled within your app. You can call the handleRedirectCallback
method from the Auth0 SDK to initialize the authentication state.
You can only use this method on a redirect from Auth0. To verify success, check for the presence of the code
and state
parameters in the URL.
The Browser.close()
method should close the browser when this event is raised.
This article assumes you will be using Custom URL Schemes to handle the callback within your application. To do this, register your YOUR_PACKAGE_ID
as a URL scheme for your chosen platform. To learn more, read Defining a Custom URL Scheme for iOS, or Create Deep Links to App Content for Android.
Add the appUrlOpen
to your application's App
component setup and log in. The browser window should close once the user authenticates and logs in to your app.
Sorry about that. Here's a couple things to double check:
check that the custom URL scheme is registered for your chosen platform. On iOS, define a custom URL scheme, or add an intent filter with your custom scheme on Android
if the event fires but you receive an error, check the logs in your Auth0 Dashboard for the reason for the error
Sorry about that. Here's a couple things to double check:
check that the custom URL scheme is registered for your chosen platform. On iOS, define a custom URL scheme, or add an intent filter with your custom scheme on Android
if the event fires but you receive an error, check the logs in your Auth0 Dashboard for the reason for the error
Now that users can log in, you need to configure a way to log out. Users must redirect to the Auth0 logout endpoint in the browser to clear their browser session. Again, Capacitor's Browser plugin should perform this redirect so that the user does not leave your app and receive a suboptimal experience.
To achieve this with Ionic and Capacitor in conjunction with the Auth0 SDK:
Construct the URL for your app Auth0 should use to redirect to after logout. This is a URL that uses your registered custom scheme and Auth0 domain. Add it to your Allowed Logout URLs configuration in the Auth0 Dashboard
Logout from the SDK by calling logout
, and pass your redirect URL back as the logoutParams.returnTo
parameter.
Set the openUrl
parameter to a callback that uses the Capacitor browser plugin to open the URL using Browser.open
.
Similar to the login step, if you do not set openUrl
when calling logout
, the SDK redirects the user to the logout URL using the default browser application on the device, which provides a suboptimal user experience.
Provide a way for your users to log out of your application. Verify that you redirect to Auth0 and then to the address you specified in the returnTo
parameter. Check that you are no longer logged in to your application.
Now that users can log in, you need to configure a way to log out. Users must redirect to the Auth0 logout endpoint in the browser to clear their browser session. Again, Capacitor's Browser plugin should perform this redirect so that the user does not leave your app and receive a suboptimal experience.
To achieve this with Ionic and Capacitor in conjunction with the Auth0 SDK:
Construct the URL for your app Auth0 should use to redirect to after logout. This is a URL that uses your registered custom scheme and Auth0 domain. Add it to your Allowed Logout URLs configuration in the Auth0 Dashboard
Logout from the SDK by calling logout
, and pass your redirect URL back as the logoutParams.returnTo
parameter.
Set the openUrl
parameter to a callback that uses the Capacitor browser plugin to open the URL using Browser.open
.
Similar to the login step, if you do not set openUrl
when calling logout
, the SDK redirects the user to the logout URL using the default browser application on the device, which provides a suboptimal user experience.
Provide a way for your users to log out of your application. Verify that you redirect to Auth0 and then to the address you specified in the returnTo
parameter. Check that you are no longer logged in to your application.
user
property exposed by the useAuth0()
composable.Initializing the SDK is asynchronous, and you should guard the user profile by checking the isLoading
and user
properties. Once isLoading
is false
and user
has a value, the user profile can be used.
Provide a way for your users to see their user profile details within the app and verify you are able to retrieve and see your profile information on screen once you have logged in.
The Auth0 Vue SDK retrieves the user's profile associated with logged-in users in whatever component you need, such as their name or profile picture, to personalize the user interface. The profile information is available through the user
property exposed by the useAuth0()
composable.
Initializing the SDK is asynchronous, and you should guard the user profile by checking the isLoading
and user
properties. Once isLoading
is false
and user
has a value, the user profile can be used.
Provide a way for your users to see their user profile details within the app and verify you are able to retrieve and see your profile information on screen once you have logged in.
This guide demonstrates how to add authentication and access user profile information in any iOS / macOS app using the Auth0.swift SDK.
To use this quickstart, you need to:
Sign up for a free Auth0 account or log in to Auth0.
Have an existing iOS / macOS app that you want to integrate. Alternatively, you can view or download a sample app after logging in.
This guide demonstrates how to add authentication and access user profile information in any iOS / macOS app using the Auth0.swift SDK.
To use this quickstart, you need to:
Sign up for a free Auth0 account or log in to Auth0.
Have an existing iOS / macOS app that you want to integrate. Alternatively, you can view or download a sample app after logging in.
To use Auth0 services, you need an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the app you are developing.
Use the interactive selector to create a new Auth0 application or select an existing Native Auth0 application. Auth0 assigns every application an alphanumeric, unique Client ID that your app uses to call Auth0 APIs through the SDK.
Any settings you configure using this quickstart automatically update your Auth0 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 app instead.
Auth0 invokes the callback and logout URLs to redirect users back to your app. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and login URLs, users will not be able to log in and out of the app, and your app will produce an error.
On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links as callback and logout URLs. When enabled, Auth0.swift will fall back to using a custom URL scheme on older iOS / macOS versions.
This feature requires Xcode 15.3+ and a paid Apple Developer account.
Add the following URLs to Callback URLs and Logout URLs, depending on the platform of your app. If you have a custom domain, use this instead of your Auth0 tenant’s domain.
+To use Auth0 services, you need an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure how you want authentication to work for the app you are developing.
Use the interactive selector to create a new Auth0 application or select an existing Native Auth0 application. Auth0 assigns every application an alphanumeric, unique Client ID that your app uses to call Auth0 APIs through the SDK.
Any settings you configure using this quickstart automatically update your Auth0 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 app instead.
Auth0 invokes the callback and logout URLs to redirect users back to your app. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and login URLs, users will not be able to log in and out of the app, and your app will produce an error.
On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links as callback and logout URLs. When enabled, Auth0.swift will fall back to using a custom URL scheme on older iOS / macOS versions.
This feature requires Xcode 15.3+ and a paid Apple Developer account.
Add the following URLs to Callback URLs and Logout URLs, depending on the platform of your app. If you have a custom domain, use this instead of your Auth0 tenant’s domain.
https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback,
-Use the interactive selector to create a new Auth0 application or select an existing **Native** Auth0 application. Auth0 assigns every application an alphanumeric, unique Client ID that your app uses to call Auth0 APIs through the SDK.
-
-Any settings you configure using this quickstart automatically update your Auth0 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 app instead.
-
-### Configure callback and logout URLs
-
-Auth0 invokes the callback and logout URLs to redirect users back to your app. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and login URLs, users will not be able to log in and out of the app, and your app will produce an error.
-
-::: note
-On iOS 17.4+ and macOS 14.4+ it is possible to use Universal Links as callback and logout URLs. When enabled, Auth0.swift will fall back to using a custom URL scheme on older iOS / macOS versions.
-
-Whenever possible, Auth0 recommends using Universal Links 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).
-
-**This feature requires Xcode 15.3+ and a paid Apple Developer account**.
-:::
-
-Add the following URLs to **Callback URLs** and **Logout URLs**, depending on the platform of your app. If you have a custom domain, use this instead of your Auth0 tenant’s domain.
-
-#### iOS
-
-```text
-https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback,
YOUR_BUNDLE_IDENTIFIER://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback
-```
-
-#### macOS
-
-```text
-https://${account.namespace}/macos/YOUR_BUNDLE_IDENTIFIER/callback,
-YOUR_BUNDLE_IDENTIFIER://${account.namespace}/macos/YOUR_BUNDLE_IDENTIFIER/callback
-```
-
-For example, if your iOS bundle identifier was `com.example.MyApp` and your Auth0 domain was `example.us.auth0.com`, then this value would be:
-
-```text
-https://example.us.auth0.com/ios/com.example.MyApp/callback,
-com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
-```
-
-### Configure the associated domain
-
-::: warning
-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 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, and **App ID** to your app's bundle identifier.
+
-https://${account.namespace}/macos/YOUR_BUNDLE_IDENTIFIER/callback,
-This will add your app to your Auth0 tenant's `apple-app-site-association` file.
+YOUR_BUNDLE_IDENTIFIER://${account.namespace}/macos/YOUR_BUNDLE_IDENTIFIER/callback
-#### Add the associated domain capability
+
-In Xcode, go to the **Signing and Capabilities** tab of your app's target settings, and press the **+ Capability** button. Then select **Associated Domains**.
+For example, if your iOS bundle identifier was com.example.MyApp
and your Auth0 domain was 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
-Next, add the following entry under **Associated Domains**:
+
-```text
-webcredentials:${account.namespace}
-```
+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.
Go to the settings page 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 and App ID to your app's bundle identifier.
This will add your app to your Auth0 tenant's apple-app-site-association
file.
In Xcode, go to the Signing and Capabilities tab of your app's target settings, and press the + Capability button. Then select Associated Domains.
Next, add the following entry under Associated Domains:
webcredentials:labs-fundtraining.us.auth0.com
-If you have a custom domain, use this instead of your Auth0 tenant’s domain.
+
-::: note
-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.
-:::
+If you have a custom domain, use this instead of your Auth0 tenant’s domain.
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.
Then, select the dependency rule and press Add Package.
For further reference on SPM, check its official documentation.
Add the following line to your Podfile
:
pod 'Auth0', '~> 2.0'
+Then, select the dependency rule and press Add Package.
For further reference on SPM, check its official documentation.
Using Cocoapods
Add the following line to your Podfile
:
pod 'Auth0', '~> 2.0'
-Then, run pod install
.
For further reference on Cocoapods, check their official documentation.
Using Carthage
Add the following line to your Cartfile
:
github "auth0/Auth0.swift" ~> 2.0
+Then, run pod install
.
For further reference on Cocoapods, check their official documentation.
Using Carthage
Add the following line to your Cartfile
:
github "auth0/Auth0.swift" ~> 2.0
-Then, run carthage bootstrap --use-xcframeworks
.
For further reference on Carthage, check their official documentation.
+Then, run carthage bootstrap --use-xcframeworks
.
For further reference on Carthage, check their official documentation.
## Configure the SDK {{{ data-action="code" data-code="Auth0.plist" }}}
-The Auth0.swift SDK needs your Auth0 domain and Client ID. You can find these values in the settings page of your Auth0 application.
domain: The domain of your Auth0 tenant. If you have a custom domain, use this instead of your Auth0 tenant’s domain.
Client ID: The alphanumeric, unique ID of the Auth0 application you set up earlier in this quickstart.
Create a plist
file named Auth0.plist
in your app bundle containing the Auth0 domain and Client ID values.
You can also configure the SDK programmatically. Check the README to learn more.
iOS Swift Quickstart - Step 3 Checkpoint You configured the Auth0.swift SDK. Run your app to verify that it is not producing any errors related to the SDK.
+The Auth0.swift SDK needs your Auth0 domain and Client ID. You can find these values in the settings page of your Auth0 application.
domain: The domain of your Auth0 tenant. If you have a custom domain, use this instead of your Auth0 tenant’s domain.
Client ID: The alphanumeric, unique ID of the Auth0 application you set up earlier in this quickstart.
Create a plist
file named Auth0.plist
in your app bundle containing the Auth0 domain and Client ID values.
You can also configure the SDK programmatically. Check the README to learn more.
iOS Swift Quickstart - Step 3 Checkpoint You configured the Auth0.swift SDK. Run your app to verify that it is not producing any errors related to the SDK.
-### Using Carthage
-
-Add the following line to your `Cartfile`:
-
-```text
-github "auth0/Auth0.swift" ~> 2.0
-```
-
-Then, run `carthage bootstrap --use-xcframeworks`.
+ If your app produces errors related to the SDK:
Make sure you selected the correct Auth0 application
Verify you saved your URL updates
Ensure you set the Auth0 domain and Client ID correctly
Still having issues? Check out our documentation or visit our community page to get more help.
-::: note
-For further reference on Carthage, check their official documentation.
-:::
-
-## Configure the SDK {{{ data-action=code data-code="Auth0.plist" }}}
-
-The Auth0.swift SDK needs your Auth0 **domain** and **Client ID**. You can find these values in the settings page of your Auth0 application.
-
-- **domain**: The domain of your Auth0 tenant. If you have a custom domain, use this instead of your Auth0 tenant’s domain.
-- **Client ID**: The alphanumeric, unique ID of the Auth0 application you set up earlier in this quickstart.
-
-Create a `plist` file named `Auth0.plist` in your app bundle containing the Auth0 domain and Client ID values.
-
-::: note
-You can also configure the SDK programmatically. Check the README to learn more.
-:::
-
-::::checkpoint
-:::checkpoint-default
-You configured the Auth0.swift SDK. Run your app to verify that it is not producing any errors related to the SDK.
-:::
-
-:::checkpoint-failure
-If your app produces errors related to the SDK:
-- Make sure you selected the correct Auth0 application
-- Verify you saved your URL updates
-- Ensure you set the Auth0 domain and Client ID correctly
-
-Still having issues? Check out our documentation or visit our community page to get more help.
-:::
-::::
+
## Add login to your application {{{ data-action="code" data-code="MainView.swift#20:31" }}}
-Import the Auth0
module in the file where you want to present the login page. Then, present the Universal Login page in the action of your Login button.
You can use async/await or Combine instead of the callback-based API. Check the README to learn more.
iOS Swift Quickstart - Step 4 Checkpoint Press the Login button and verify that:
An alert box shows up asking for consent.
Choosing Continue opens the Universal Login page in a Safari modal.
You can log in or sign up using a username and password or a social provider.
The Safari modal closes automatically afterward.
+Import the Auth0
module in the file where you want to present the login page. Then, present the Universal Login page in the action of your Login button.
You can use async/await or Combine instead of the callback-based API. Check the README to learn more.
iOS Swift Quickstart - Step 4 Checkpoint Press the Login button and verify that:
An alert box shows up asking for consent.
Choosing Continue opens the Universal Login page in a Safari modal.
You can log in or sign up using a username and password or a social provider.
The Safari modal closes automatically afterward.
- If login fails or produces errors:
Verify you entered the correct callback URL
Ensure you set the Auth0 domain and Client ID correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ If login fails or produces errors:
Verify you entered the correct callback URL
Ensure you set the Auth0 domain and Client ID correctly
Still having issues? Check out our documentation or visit our community page to get more help.
## Add logout to your application {{{ data-action="code" data-code="MainView.swift#34:45" }}}
-Now that you can log in to your app, you need a way to log out. In the action of your Logout button, call the clearSession()
method to clear the Universal Login session cookie.
iOS Swift Quickstart - Step 5 Checkpoint Press the Logout button and verify that:
An alert box shows up asking for consent.
Choosing Continue opens a page in a Safari modal.
The Safari modal closes automatically soon after.
+Now that you can log in to your app, you need a way to log out. In the action of your Logout button, call the clearSession()
method to clear the Universal Login session cookie.
iOS Swift Quickstart - Step 5 Checkpoint Press the Logout button and verify that:
An alert box shows up asking for consent.
Choosing Continue opens a page in a Safari modal.
The Safari modal closes automatically soon after.
- If logout fails or produces errors:
Verify you entered the correct callback URL
Ensure you set the Auth0 domain and Client ID correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ If logout fails or produces errors:
Verify you entered the correct callback URL
Ensure you set the Auth0 domain and Client ID correctly
Still having issues? Check out our documentation or visit our community page to get more help.
## Access user profile information {{{ data-action="code" data-code="User.swift#11:14" }}}
-The Credentials
instance you obtained after logging in includes an ID token. The ID token contains the profile information associated with the logged-in user, such as their email and profile picture. You can use these details to personalize the user interface of your app.
The Auth0.swift SDK includes a utility for decoding JWTs like the ID token. Start by importing the JWTDecode
module in the file where you want to access the user profile information. Then, use the decode(jwt:)
method to decode the ID token and access the claims it contains.
You can retrieve the latest user information with the userInfo(withAccessToken:)
method. Check the EXAMPLES to learn more.
iOS Swift Quickstart - Step 6 Checkpoint Verify that you can access the email
, picture
, or any other claim after you have logged in.
+The Credentials
instance you obtained after logging in includes an ID token. The ID token contains the profile information associated with the logged-in user, such as their email and profile picture. You can use these details to personalize the user interface of your app.
The Auth0.swift SDK includes a utility for decoding JWTs like the ID token. Start by importing the JWTDecode
module in the file where you want to access the user profile information. Then, use the decode(jwt:)
method to decode the ID token and access the claims it contains.
You can retrieve the latest user information with the userInfo(withAccessToken:)
method. Check the EXAMPLES to learn more.
iOS Swift Quickstart - Step 6 Checkpoint Verify that you can access the email
, picture
, or any other claim after you have logged in.
- If you cannot access the user information:
Verify you imported the JWTDecode
module where you invoke the decode(jwt:)
method
Make sure you spelled your claims correctly
Still having issues? Check out our documentation or visit our community forums to get more help.
+ If you cannot access the user information:
Verify you imported the JWTDecode
module where you invoke the decode(jwt:)
method
Make sure you spelled your claims correctly
Still having issues? Check out our documentation or visit our community forums to get more help.
diff --git a/articles/quickstart/native/maui/interactive.md b/articles/quickstart/native/maui/interactive.md
index 7e7e0aa404..2cd149cf4d 100644
--- a/articles/quickstart/native/maui/interactive.md
+++ b/articles/quickstart/native/maui/interactive.md
@@ -5,24 +5,24 @@ interactive: true
files:
- files/MainPage.xaml
github:
- path: https://github.com/auth0-samples/auth0-maui-samples/tree/master/Sample
+ path: Sample
locale: en-US
---
# Add Login to Your MAUI Application
-Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any .NET MAUI application using the Auth0 SDKs for MAUI.
The MAUI SDK supports Android, iOS, macOS, and Windows. Continue reading for platform-specific configuration.
+Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any .NET MAUI application using the Auth0 SDKs for MAUI.
The MAUI SDK supports Android, iOS, macOS, and Windows. Continue reading for platform-specific configuration.
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to myapp://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.
If you are following along with our sample project, set this to myapp://callback
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to myapp://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.
If you are following along with our sample project, set this to myapp://callback
.
## Install the Auth0 SDK
-Auth0 provides a MAUI SDK to simplify the process of implementing Auth0 authentication in MAUI applications.
Use the NuGet Package Manager (Tools -> Library Package Manager -> Package Manager Console) to install the Auth0.OidcClient.MAUI
package.
Alternatively, you can use the NuGet Package Manager Console (Install-Package
) or the dotnet
CLI (dotnet add
).
Install-Package Auth0.OidcClient.MAUI
+Auth0 provides a MAUI SDK to simplify the process of implementing Auth0 authentication in MAUI applications.
Use the NuGet Package Manager (Tools -> Library Package Manager -> Package Manager Console) to install the Auth0.OidcClient.MAUI
package.
Alternatively, you can use the NuGet Package Manager Console (Install-Package
) or the dotnet
CLI (dotnet add
).
Install-Package Auth0.OidcClient.MAUI
@@ -39,15 +39,15 @@ locale: en-US
[IntentFilter(new[] { Intent.ActionView },
- Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable },
+ Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable },
- DataScheme = CALLBACK_SCHEME)]
+ DataScheme = CALLBACK_SCHEME)]
public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthenticatorCallbackActivity
{
- const string CALLBACK_SCHEME = "myapp";
+ const string CALLBACK_SCHEME = "myapp";
}
@@ -55,19 +55,19 @@ public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthent
The above activity will ensure the application can handle the myapp://callback
URL when Auth0 redirects back to the Android application after logging in.
Windows
To make sure it can properly reactivate your application after being redirected back to Auth0, you need to do two things:
Add the corresponding protocol to the Package.appxmanifest
. In this case, this is set to myapp
, but you can change this to whatever you like (ensure to update all relevant Auth0 URLs as well).
<Applications>
- <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
+ <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
- <Extensions>
+ <Extensions>
- <uap:Extension Category="windows.protocol">
+ <uap:Extension Category="windows.protocol">
- <uap:Protocol Name="myapp"/>
+ <uap:Protocol Name="myapp"/>
- </uap:Extension>
+ </uap:Extension>
- </Extensions>
+ </Extensions>
- </Application>
+ </Application>
</Applications>
@@ -77,13 +77,13 @@ public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthent
{
- if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
+ if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
- return;
+ return;
- this.InitializeComponent();
+ this.InitializeComponent();
}
@@ -98,21 +98,19 @@ public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthent
-var client = new Auth0Client(new Auth0ClientOptions
+ var client = new Auth0Client(new Auth0ClientOptions {
-{
-
- Domain = "${account.namespace}",
+ Domain = "${account.namespace}",
- ClientId = "${account.clientId}",
+ ClientId = "${account.clientId}",
- RedirectUri = "myapp://callback",
+ RedirectUri = "myapp://callback",
- PostLogoutRedirectUri = "myapp://callback",
+ PostLogoutRedirectUri = "myapp://callback",
- Scope = "openid profile email"
+ Scope = "openid profile email"
-});
+ });
@@ -120,7 +118,7 @@ var client = new Auth0Client(new Auth0ClientOptions
- Sorry about that. Here are a couple things to double-check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here are a couple things to double-check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -135,7 +133,7 @@ var client = new Auth0Client(new Auth0ClientOptions
- Sorry about that. Here's something to double-check:
you called LoginAsync
as expected
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's something to double-check:
you called LoginAsync
as expected
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -150,11 +148,11 @@ var client = new Auth0Client(new Auth0ClientOptions
- Sorry about that. Here are a couple things to double-check:
you configured the correct Logout URL
you called LogoutAsync
as expected.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here are a couple things to double-check:
you configured the correct Logout URL
you called LogoutAsync
as expected.
Still having issues? Check out our documentation or visit our community page to get more help.
## Show user profile information {{{ data-action="code" data-code="MainPage.xaml.cs#55:58" }}}
-Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project.
The Auth0 SDK for MAUI provides user information through the LoginResult.User
property.
+Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project.
The Auth0 SDK for MAUI provides user information through the LoginResult.User
property.
diff --git a/articles/quickstart/native/net-android-ios/interactive.md b/articles/quickstart/native/net-android-ios/interactive.md
index 7bd2c84c09..723d6a2e52 100644
--- a/articles/quickstart/native/net-android-ios/interactive.md
+++ b/articles/quickstart/native/net-android-ios/interactive.md
@@ -7,26 +7,26 @@ files:
- files/AppDelegate
- files/MyViewController
github:
- path: https://github.com/auth0-samples/auth0-xamarin-oidc-samples/tree/master/Quickstart/01-Login
+ path: Quickstart/01-Login
locale: en-US
---
# Add Login to Your .NET Android and iOS Application
-Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any .NET Android and iOS application using the Auth0 SDKs for Android and iOS.
This quickstart focuses on .NET Android and iOS, as they are the next generation of Xamarin.Android
and Xamarin.iOS
. If you are still using Xamarin.Android
and Xamarin.iOS
, you can follow this guide as the integration is identical, and the SDKs are compatible.
+
Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any .NET Android and iOS application using the Auth0 SDKs for Android and iOS.
This quickstart focuses on .NET Android and iOS, as they are the next generation of Xamarin.Android
and Xamarin.iOS
. If you are still using Xamarin.Android
and Xamarin.iOS
, you can follow this guide as the integration is identical, and the SDKs are compatible.
To use this quickstart, you’ll need to:
Sign up for a free Auth0 account or log in to Auth0.
Have a working Android or iOS project using .NET 6 (or above) that you want to integrate with. Alternatively, you can view or download a sample application after logging in.
## Configure Auth0
-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 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.
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.
If you are following along with our sample project, set this to one of the following URLs depending on your platform:
Android: YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback
iOS: YOUR_BUNDLE_ID://{yourDomain}/ios/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.
If you are following along with our sample project, set this to one of the following URLs depending on your platform:
Android: YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback
iOS: YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback
Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.
+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 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.
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.
If you are following along with our sample project, set this to one of the following URLs depending on your platform:
Android: YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback
iOS: YOUR_BUNDLE_ID://{yourDomain}/ios/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.
If you are following along with our sample project, set this to one of the following URLs depending on your platform:
Android: YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback
iOS: YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback
Lastly, be sure that the Application Type for your application is set to Native in the Application Settings.
## Install the Auth0 SDK
-Auth0 provides an Android and iOS SDK to simplify the process of implementing Auth0 authentication in .NET Android and iOS applications.
Use the NuGet Package Manager (Tools -> Library Package Manager -> Package Manager Console) to install the Auth0.OidcClient.AndroidX
or Auth0.OidcClient.iOS
package, depending on whether you are building an Android or iOS application.
Alternatively, you can use the NuGet Package Manager Console (Install-Package
) or the dotnet
CLI (dotnet add
).
Install-Package Auth0.OidcClient.AndroidX
+Auth0 provides an Android and iOS SDK to simplify the process of implementing Auth0 authentication in .NET Android and iOS applications.
Use the NuGet Package Manager (Tools -> Library Package Manager -> Package Manager Console) to install the Auth0.OidcClient.AndroidX
or Auth0.OidcClient.iOS
package, depending on whether you are building an Android or iOS application.
Alternatively, you can use the NuGet Package Manager Console (Install-Package
) or the dotnet
CLI (dotnet add
).
Install-Package Auth0.OidcClient.AndroidX
Install-Package Auth0.OidcClient.iOS
@@ -61,7 +61,7 @@ var client = new Auth0Client(new Auth0ClientOptions {
- Sorry about that. Here are a couple things to double-check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here are a couple things to double-check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -126,7 +126,7 @@ var client = new Auth0Client(new Auth0ClientOptions {
- Sorry about that. Here's something to double-check:
you called LoginAsync
as expected
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's something to double-check:
you called LoginAsync
as expected
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -141,7 +141,7 @@ var client = new Auth0Client(new Auth0ClientOptions {
- Sorry about that. Here are a couple things to double-check:
you configured the correct Logout URL
you called LogoutAsync
as expected.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here are a couple things to double-check:
you configured the correct Logout URL
you called LogoutAsync
as expected.
Still having issues? Check out our documentation or visit our community page to get more help.
To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure authentication in your project.
Use the interactive selector to create a new Auth0 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.
Auth0 invokes the callback and logout URLs to redirect users back to your application. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and logout URLs, users will not be able to log in and out of the app, and your application will produce an error.
Add the corresponding URL to Callback URLs and Logout URLs, according to your app's platform. If you are using a custom domain, use the value of your custom domain instead of your Auth0 tenant’s domain.
BUNDLE_IDENTIFIER.auth0://${account.namespace}/ios/BUNDLE_IDENTIFIER/callback
PACKAGE_NAME.auth0://${account.namespace}/android/PACKAGE_NAME/callback
If you are following along with our sample project, use the following value:
iOS: com.auth0samples.auth0://{yourDomain}/ios/com.auth0samples/callback
Android: com.auth0samples.auth0://{yourDomain}/android/com.auth0samples/callback
To use Auth0 services, you need to have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure authentication in your project.
Use the interactive selector to create a new Auth0 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.
Auth0 invokes the callback and logout URLs to redirect users back to your application. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and logout URLs, users will not be able to log in and out of the app, and your application will produce an error.
Add the corresponding URL to Callback URLs and Logout URLs, according to your app's platform. If you are using a custom domain, use the value of your custom domain instead of your Auth0 tenant’s domain.
BUNDLE_IDENTIFIER.auth0://${account.namespace}/ios/BUNDLE_IDENTIFIER/callback
PACKAGE_NAME.auth0://${account.namespace}/android/PACKAGE_NAME/callback
If you are following along with our sample project, use the following value:
iOS: com.auth0samples.auth0://{yourDomain}/ios/com.auth0samples/callback
Android: com.auth0samples.auth0://{yourDomain}/android/com.auth0samples/callback
In this section, you will learn how to install the React Native Auth0 module.
Please refer to the official documentation for additional details on React Native.
yarn add react-native-auth0
For further reference on yarn
, check their official documentation.
npm install react-native-auth0 --save
In this section, you will learn how to install the React Native Auth0 module.
Please refer to the official documentation for additional details on React Native.
yarn add react-native-auth0
For further reference on yarn
, check their official documentation.
npm install react-native-auth0 --save
The Auth0 package runs custom native code that must be configured at build time. Use Expo Config Plugin to achieve this.
The react-native-auth0
plugin will be added in the Expo config.
The Auth0 package runs custom native code that must be configured at build time. Use Expo Config Plugin to achieve this.
The react-native-auth0
plugin will be added in the Expo config.
You must generate the native code for the above configuration to be set. To do this, run the following command:
expo prebuild
You will be prompted to provide the Android package and iOS bundle identifier if they are not already present in the Expo config.
? What would you like your Android package name to be? > com.auth0samples # or your desired package name
+You must generate the native code for the above configuration to be set. To do this, run the following command:
expo prebuild
You will be prompted to provide the Android package and iOS bundle identifier if they are not already present in the Expo config.
? What would you like your Android package name to be? > com.auth0samples # or your desired package name
@@ -54,7 +54,7 @@ locale: en-US
- If your application did not launch successfully:
make sure the correct application is selected
did you save after entering your URLs?
ensure your domain and client ID values are correct
Still having issues? Check out our documentation or visit our community page to get more help.
+ If your application did not launch successfully:
make sure the correct application is selected
did you save after entering your URLs?
ensure your domain and client ID values are correct
Still having issues? Check out our documentation or visit our community page to get more help.
If your application did not launch successfully:
ensure you set the Allowed Callback URLs are correct
verify you saved your changes after entering your URLs
make sure the domain and client ID values are imported correctly
if using Android, ensure that the manifest placeholders have been set up correctly, otherwise the redirect back to your app may not work
Still having issues? Check out our documentation or visit our community page to get more help.
If your application did not launch successfully:
ensure you set the Allowed Callback URLs are correct
verify you saved your changes after entering your URLs
make sure the domain and client ID values are imported correctly
if using Android, ensure that the manifest placeholders have been set up correctly, otherwise the redirect back to your app may not work
Still having issues? Check out our documentation or visit our community page to get more help.
If your application did not log out successfully:
ensure the Allowed Logout URLs are set properly
verify you saved your changes after entering your URLs
Still having issues? Check out our documentation or visit our community page to get more help.
If your application did not log out successfully:
ensure the Allowed Logout URLs are set properly
verify you saved your changes after entering your URLs
Still having issues? Check out our documentation or visit our community page to get more help.
The useAuth0
hook exposes a user
object that contains information about the authenticated user. You can use this to access user profile information about the authenticated user that has been decoded from the ID token.
If a user has not been authenticated, this property will be null
.
Log in and inspect the user
property on the result. Verify the current user's profile information, such as email
or name
.
The useAuth0
hook exposes a user
object that contains information about the authenticated user. You can use this to access user profile information about the authenticated user that has been decoded from the ID token.
If a user has not been authenticated, this property will be null
.
Log in and inspect the user
property on the result. Verify the current user's profile information, such as email
or name
.
This Quickstart is for the React Native framework. To integrate Auth0 into your Expo application, refer to the Expo Quickstart.
+This Quickstart is for the React Native framework. To integrate Auth0 into your Expo application, refer to the Expo Quickstart.
## Configure Auth0 -To use Auth0 services, you must have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure authentication in your project.
Use the interactive selector to create a new Auth0 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.
To explore a complete configuration, review the sample application in your Dashboard.
Auth0 invokes the callback and logout URLs to redirect users back to your application. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and logout URLs, users will not be able to log in and out of the app, and your application will produce an error.
Add the corresponding URL to Callback URLs and Logout URLs, according to your app's platform. If you are using a custom domain, use the value of your custom domain instead of your Auth0 tenant’s domain.
BUNDLE_IDENTIFIER.auth0://${account.namespace}/ios/BUNDLE_IDENTIFIER/callback
+To use Auth0 services, you must have an application set up in the Auth0 Dashboard. The Auth0 application is where you will configure authentication in your project.
Configure an application
Use the interactive selector to create a new Auth0 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.
To explore a complete configuration, review the sample application in your Dashboard.
Configure callback and logout URLs
Auth0 invokes the callback and logout URLs to redirect users back to your application. Auth0 invokes the callback URL after authenticating the user and the logout URL after removing the session cookie. If you do not set the callback and logout URLs, users will not be able to log in and out of the app, and your application will produce an error.
Add the corresponding URL to Callback URLs and Logout URLs, according to your app's platform. If you are using a custom domain, use the value of your custom domain instead of your Auth0 tenant’s domain.
iOS
BUNDLE_IDENTIFIER.auth0://${account.namespace}/ios/BUNDLE_IDENTIFIER/callback
@@ -30,11 +30,11 @@ locale: en-US
## Install dependencies
-In this section, you will install the React Native Auth0 module.
Refer to the official documentation for additional details on React Native.
Yarn
yarn add react-native-auth0
+In this section, you will install the React Native Auth0 module.
Refer to the official documentation for additional details on React Native.
Yarn
yarn add react-native-auth0
-For further reference on yarn, check their official documentation.
npm
npm install react-native-auth0 --save
+For further reference on yarn, check their official documentation.
npm
npm install react-native-auth0 --save
@@ -53,9 +53,7 @@ pod install
## Integrate Auth0 in your application
-### Configure Android
-
-Open the `build.gradle` file in your application directory (typically at `android/app/build.gradle`) and add the following manifest placeholders. The value for `auth0Domain` should contain your Auth0 application settings [as configured above](#get-your-application-keys).
+First, you must provide a way for your users to log in. We recommend using the Auth0-hosted login page.

Configure Android
Open the build.gradle
file in your application directory (typically at android/app/build.gradle
) and add the following manifest placeholders. The value for auth0Domain
should contain your Auth0 application settings as configured above.
android {
defaultConfig {
@@ -87,7 +85,7 @@ Open the `build.gradle` file in your application directory (typically at `androi
-This file will be ios/<YOUR PROJECT>/AppDelegate.m
on applications using the old architecture.
Next, add a URLScheme using your App's bundle identifier.
In the ios
folder, open the Info.plist
and locate the value for CFBundleIdentifier
.
<key>CFBundleIdentifier</key>
+This file will be ios/<YOUR PROJECT>/AppDelegate.m
on applications using the old architecture.
Next, add a URLScheme using your App's bundle identifier.
In the ios
folder, open the Info.plist
and locate the value for CFBundleIdentifier
.
<key>CFBundleIdentifier</key>
<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
@@ -121,7 +119,7 @@ Open the `build.gradle` file in your application directory (typically at `androi
-If your application was generated using the React Native CLI, the default value of $(PRODUCT_BUNDLE_IDENTIFIER)
dynamically matches org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)
. For the sample app, this value matches com.auth0samples
.
In a later step, you will use this value to define the callback URLs below. You can change it using XCode with the following steps:
Open the ios/<YOUR PROJECT>.xcodeproj
file or run xed ios
on a Terminal from the app root.
Open your project's or desired target's Build Settings tab and find the section that contains "Bundle Identifier".
Replace the "Bundle Identifier" value with your desired application's bundle identifier name.
For additional information, please read react native docs.
+If your application was generated using the React Native CLI, the default value of $(PRODUCT_BUNDLE_IDENTIFIER)
dynamically matches org.reactjs.native.example.$(PRODUCT_NAME:rfc1034identifier)
. For the sample app, this value matches com.auth0samples
.
In a later step, you will use this value to define the callback URLs below. You can change it using XCode with the following steps:
Open the ios/<YOUR PROJECT>.xcodeproj
file or run xed ios
on a Terminal from the app root.
Open your project's or desired target's Build Settings tab and find the section that contains "Bundle Identifier".
Replace the "Bundle Identifier" value with your desired application's bundle identifier name.
For additional information, please read react native docs.
## Configure the Auth0Provider component {{{ data-action="code" data-code="app.js#46:48" }}}
@@ -136,7 +134,7 @@ Open the `build.gradle` file in your application directory (typically at `androi
-If your application did not launch successfully:
make sure the correct application is selected
did you save after entering your URLs?
ensure your domain and client ID values are correct
Still having issues? Check out our documentation or visit our community page to get more help.
+If your application did not launch successfully:make sure the correct application is selected
did you save after entering your URLs?
ensure your domain and client ID values are correct
Still having issues? Check out our documentation or visit our community page to get more help.
make sure the cor
-If your application did not launch successfully:
Ensure you set the Allowed Callback URLs are correct
Verify you saved your changes after entering your URLs
Make sure the domain and client ID values are imported correctly
If using Android, ensure you set up the manifest placeholders correctly, otherwise the redirect back to your app may not work
Still having issues? Check out our documentation or visit our community page to get more help.
If your application did not launch successfully:
Ensure you set the Allowed Callback URLs are correct
Verify you saved your changes after entering your URLs
Make sure the domain and client ID values are imported correctly
If using Android, ensure you set up the manifest placeholders correctly, otherwise the redirect back to your app may not work
Still having issues? Check out our documentation or visit our community page to get more help.
make sure the cor
-If your application did not log out successfully:
Ensure the Allowed Logout URLs are set properly
Verify you saved your changes after entering your URLs
Still having issues? Check out our documentation or visit our community page to get more help.
If your application did not log out successfully:
Ensure the Allowed Logout URLs are set properly
Verify you saved your changes after entering your URLs
Still having issues? Check out our documentation or visit our community page to get more help.
Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any WPF and WinForms application using the Auth0 SDKs for WPF and WinForms.
To use this quickstart, you’ll need to:
Sign up for a free Auth0 account or log in to Auth0.
Have a working WPF or WinForms project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.
Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any WPF and WinForms application using the Auth0 SDKs for WPF and WinForms.
To use this quickstart, you’ll need to:
Sign up for a free Auth0 account or log in to Auth0.
Have a working WPF or WinForms project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.
To use Auth0 services, you’ll 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 the project you are developing.
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://{yourDomain}:4200/mobile
.
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.
If you are following along with our sample project, set this to http://{yourDomain}:4200/mobile
.
To use Auth0 services, you’ll 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 the project you are developing.
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://{yourDomain}:4200/mobile
.
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.
If you are following along with our sample project, set this to http://{yourDomain}:4200/mobile
.
Auth0 provides a WPF and WinForms SDK to simplify the process of implementing Auth0 authentication in WPF and WinForms applications.
Use the NuGet Package Manager (Tools -> Library Package Manager -> Package Manager Console) to install the Auth0.OidcClient.WPF
or Auth0.OidcClient.WinForms
package, depending on whether you are building a WPF or Windows Forms application.
Alternatively, you can use the NuGet Package Manager Console (Install-Package
) or the dotnet
CLI (dotnet add
).
Install-Package Auth0.OidcClient.WPF
+Auth0 provides a WPF and WinForms SDK to simplify the process of implementing Auth0 authentication in WPF and WinForms applications.
Use the NuGet Package Manager (Tools -> Library Package Manager -> Package Manager Console) to install the Auth0.OidcClient.WPF
or Auth0.OidcClient.WinForms
package, depending on whether you are building a WPF or Windows Forms application.
Alternatively, you can use the NuGet Package Manager Console (Install-Package
) or the dotnet
CLI (dotnet add
).
Install-Package Auth0.OidcClient.WPF
Install-Package Auth0.OidcClient.WinForms
@@ -39,11 +39,11 @@ dotnet add Auth0.OidcClient.WinForms
## Instantiate the Auth0Client {{{ data-action="code" data-code="MainWindow.xaml.cs#13:22" }}}
-To integrate Auth0 into your application, instantiate an instance of the Auth0Client class, passing an instance of Auth0ClientOptions that contains your Auth0 Domain and Client ID.
By default, the SDK will leverage WebView2 for .NET6 and above, while relying on the older WebView on applications using any version that predates .NET6.
WPF/WinForms Quickstart - Step 3 Checkpoint Your Auth0Client
should now be properly instantiated. Run your application to verify that:
The Auth0Client
is instantiated correctly.
Your application is not throwing any errors related to Auth0.
+To integrate Auth0 into your application, instantiate an instance of the Auth0Client class, passing an instance of Auth0ClientOptions that contains your Auth0 Domain and Client ID.
By default, the SDK will leverage WebView2 for .NET6 and above, while relying on the older WebView on applications using any version that predates .NET6.
WPF/WinForms Quickstart - Step 3 Checkpoint Your Auth0Client
should now be properly instantiated. Run your application to verify that:
The Auth0Client
is instantiated correctly.
Your application is not throwing any errors related to Auth0.
- Sorry about that. Here are a couple things to double-check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here are a couple things to double-check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -54,7 +54,7 @@ dotnet add Auth0.OidcClient.WinForms
- Sorry about that. Here's something to double-check:
you called LoginAsync
as expected
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's something to double-check:
you called LoginAsync
as expected
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -65,7 +65,7 @@ dotnet add Auth0.OidcClient.WinForms
- Sorry about that. Here are a couple things to double-check:
you configured the correct Logout URL
you called LogoutAsync
as expected.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here are a couple things to double-check:
you configured the correct Logout URL
you called LogoutAsync
as expected.
Still having issues? Check out our documentation or visit our community page to get more help.
Sorry about that. Here are a couple things to double-check:
the LoginResult.IsError
is false
if the LoginResult.IsError
isn't false, be sure to check LoginResult.Error
for details.
Still having issues? Check out our documentation or visit our community page to get more help.
Sorry about that. Here are a couple things to double-check:
the LoginResult.IsError
is false
if the LoginResult.IsError
isn't false, be sure to check LoginResult.Error
for details.
Still having issues? Check out our documentation or visit our community page to get more help.
Visit the Angular Authentication By Example guide for a deep dive into implementing user authentication in Angular. This guide provides additional details on how to create a sign-up button, add route guards, and call a protected API from Angular.
Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any Angular application using the Auth0 Angular SDK.
To use this quickstart, you’ll need to:
Sign up for a free Auth0 account or log in to Auth0.
Have a working Angular project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.
Visit the Angular Authentication By Example guide for a deep dive into implementing user authentication in Angular. This guide provides additional details on how to create a sign-up button, add route guards, and call a protected API from Angular.
Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any Angular application using the Auth0 Angular SDK.
To use this quickstart, you’ll need to:
Sign up for a free Auth0 account or log in to Auth0.
Have a working Angular project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.
To use Auth0 services, you’ll 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 the project you are developing.
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:4200
.
+
To use Auth0 services, you’ll 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 the project you are developing.
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:4200
.
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.
If you are following along with our sample project, set this to http://localhost:4200
.
@@ -29,42 +29,42 @@ locale: en-US ## Install the Auth0 Angular SDK -
Auth0 provides an Angular SDK to simplify the process of implementing Auth0 authentication and authorization in Angular applications.
Install the Auth0 Angular SDK by running the following command in your terminal:
npm install @auth0/auth0-angular
The SDK exposes several types that help integrate Auth0 in an Angular application idiomatically, including a module and an authentication service.
+Auth0 provides an Angular SDK to simplify the process of implementing Auth0 authentication and authorization in Angular applications.
Install the Auth0 Angular SDK by running the following command in your terminal:
npm install @auth0/auth0-angular
The SDK exposes several types that help integrate Auth0 in an Angular application idiomatically, including a module and an authentication service.
## Register and providing Auth0 {{{ data-action="code" data-code="main.ts#7:13" }}} -The SDK exports provideAuth0
, which is a provide function that contains all the services required for the SDK to function. To register this with your application:
Open the main.ts
file.
Import the provideAuth0
function from the @auth0/auth0-angular
package.
Add provideAuth0
to the application by adding it to the providers
inside bootstrapApplication
.
Inject AuthService
into AppComponent
.
The provideAuth0
function takes the properties domain
and clientId
; the values of these properties correspond to the Domain and Client ID values that you can find under Settings in the Single-Page Application (SPA) that you registered with Auth0. On top of that, we configure authorizationParams.redirect_uri
, which allows Auth0 to redirect the user back to the specific URL after successfully authenticating.
If you are using a custom domain with Auth0, the value of the domain property is the value of your custom domain instead of the value reflected in the "Settings" tab.
The SDK exports provideAuth0
, which is a provide function that contains all the services required for the SDK to function. To register this with your application:
Open the main.ts
file.
Import the provideAuth0
function from the @auth0/auth0-angular
package.
Add provideAuth0
to the application by adding it to the providers
inside bootstrapApplication
.
Inject AuthService
into AppComponent
.
The provideAuth0
function takes the properties domain
and clientId
; the values of these properties correspond to the Domain and Client ID values that you can find under Settings in the Single-Page Application (SPA) that you registered with Auth0. On top of that, we configure authorizationParams.redirect_uri
, which allows Auth0 to redirect the user back to the specific URL after successfully authenticating.
If you are using a custom domain with Auth0, the value of the domain property is the value of your custom domain instead of the value reflected in the "Settings" tab.
Now that you have configured your Auth0 Application and the Auth0 Angular SDK, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect()
method from the AuthService
class to redirect users to the Auth0 Universal Login page where Auth0 can authenticate them. After a user successfully authenticates, they will be redirected to your application and the callback URL you set up earlier in this quickstart.
Create a login button in your application that calls loginWithRedirect()
when selected.
You should now be able to log in to your application.
Run your application, and select the login button. Verify that:
you can log in or sign up using a username and password.
your application redirects you to the Auth0 Universal Login page.
you are redirected to Auth0 for authentication.
Auth0 successfully redirects back to your application after authentication.
you do not receive any errors in the console related to Auth0.
Now that you have configured your Auth0 Application and the Auth0 Angular SDK, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect()
method from the AuthService
class to redirect users to the Auth0 Universal Login page where Auth0 can authenticate them. After a user successfully authenticates, they will be redirected to your application and the callback URL you set up earlier in this quickstart.
Create a login button in your application that calls loginWithRedirect()
when selected.
You should now be able to log in to your application.
Run your application, and select the login button. Verify that:
you can log in or sign up using a username and password.
your application redirects you to the Auth0 Universal Login page.
you are redirected to Auth0 for authentication.
Auth0 successfully redirects back to your application after authentication.
you do not receive any errors in the console related to Auth0.
Sorry about that. Here are a few things to double check:
make sure you configured the correct authorizationParams.redirect_uri
make sure you added theLoginButtonComponent
button to the module's declarations
Still having issues? To get more help, check out our documentation or visit our community page.
Sorry about that. Here are a few things to double check:
make sure you configured the correct authorizationParams.redirect_uri
make sure you added theLoginButtonComponent
button to the module's declarations
Still having issues? To get more help, check out our documentation or visit our community page.
Users who log in to your project will also need a way to log out. The SDK provides a logout()
method on the AuthService
class that you can use to log a user out of your app. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to your application and the logout URL you set up earlier in this quickstart.
Create a logout button in your application that calls logout()
when selected.
The SDK exposes an isAuthenticated$
observable on the AuthService
class that allows you to check whether a user is authenticated or not. You can render the login and logout buttons conditionally based on the value of the isAuthenticated$
observable. Alternatively, you can use a single button to combine both login and logout buttons as well as their conditional rendering.
You should now be able to log out of your application.
Run your application, log in, and select the logout button. Verify that:
you are redirected to Auth0's logout endpoint.
Auth0 successfully redirects back to your application and the correct logout URL.
you are no longer logged in to your application.
you do not receive any errors in the console related to Auth0.
Users who log in to your project will also need a way to log out. The SDK provides a logout()
method on the AuthService
class that you can use to log a user out of your app. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to your application and the logout URL you set up earlier in this quickstart.
Create a logout button in your application that calls logout()
when selected.
The SDK exposes an isAuthenticated$
observable on the AuthService
class that allows you to check whether a user is authenticated or not. You can render the login and logout buttons conditionally based on the value of the isAuthenticated$
observable. Alternatively, you can use a single button to combine both login and logout buttons as well as their conditional rendering.
You should now be able to log out of your application.
Run your application, log in, and select the logout button. Verify that:
you are redirected to Auth0's logout endpoint.
Auth0 successfully redirects back to your application and the correct logout URL.
you are no longer logged in to your application.
you do not receive any errors in the console related to Auth0.
Sorry about that. Here are a few things to double check:
make sure that you configured the logout URL as one of the Allowed Logout URLS in your application's Settings
check that you added the LogoutButtonComponent
to the module's declarations
inspect the application logs for further errors
Still having issues? To get more help, check out our documentation or visit our community page.
Sorry about that. Here are a few things to double check:
make sure that you configured the logout URL as one of the Allowed Logout URLS in your application's Settings
check that you added the LogoutButtonComponent
to the module's declarations
inspect the application logs for further errors
Still having issues? To get more help, check out our documentation or visit our community page.
Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to personalize the user interface by displaying a logged-in user’s name or profile picture.
The Auth0 Angular SDK provides user information through the user$
observable exposed by the AuthService
class. Because the user$
observable contains sensitive information and artifacts related to the user's identity, its availability depends on the user's authentication status. Fortunately, the user$
observable is configured to only emit values once the isAuthenticated$
observable is true, so there is no need to manually check the authentication state before accessing the user profile data.
The SDK also exposes an isAuthenticated$
observable on the AuthService
class that allows you to check whether a user is authenticated or not, which you can use to determine whether to show or hide UI elements, for example.
Review the UserProfileComponent
code in the interactive panel to see examples of how to use these functions.
You should now be able to view user profile information.
Run your application, and verify that:
user information displays correctly after you have logged in.
user information does not display after you have logged out.
Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to personalize the user interface by displaying a logged-in user’s name or profile picture.
The Auth0 Angular SDK provides user information through the user$
observable exposed by the AuthService
class. Because the user$
observable contains sensitive information and artifacts related to the user's identity, its availability depends on the user's authentication status. Fortunately, the user$
observable is configured to only emit values once the isAuthenticated$
observable is true, so there is no need to manually check the authentication state before accessing the user profile data.
The SDK also exposes an isAuthenticated$
observable on the AuthService
class that allows you to check whether a user is authenticated or not, which you can use to determine whether to show or hide UI elements, for example.
Review the UserProfileComponent
code in the interactive panel to see examples of how to use these functions.
You should now be able to view user profile information.
Run your application, and verify that:
user information displays correctly after you have logged in.
user information does not display after you have logged out.
Sorry about that. Here are a few things to double check:
make sure you are logged in
make sure you are trying to access an existing property such as user.name
make sure you added the UserProfileComponent
component to the correct module's declarations
Still having issues? To get more help, check out our documentation or visit our community page.
Sorry about that. Here are a few things to double check:
make sure you are logged in
make sure you are trying to access an existing property such as user.name
make sure you added the UserProfileComponent
component to the correct module's declarations
Still having issues? To get more help, check out our documentation or visit our community page.
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.
The Flutter SDK currently only supports Flutter applications running on Android, iOS, or Web platforms.
This quickstart assumes you already have a Flutter application up and running. If not, check out the Flutter "getting started" guides to get started with a simple app.
You should also be familiar with the Flutter command line tool.
+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.
The Flutter SDK currently only supports Flutter applications running on Android, iOS, or Web platforms.
This quickstart assumes you already have a Flutter application up and running. If not, check out the Flutter "getting started" guides to get started with a simple app.
You should also be familiar with the Flutter command line tool.
## Configure Auth0 -When you signed up for Auth0, a new application was created for you, or you could have created a new one. You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.
When using the Default App with a Native or Single Page Application, ensure to update the Token Endpoint Authentication Method to None
and set the Application Type to either SPA
or Native
.
You need the following information:
Domain
Client ID
If you download the sample from the top of this page, these details are filled out for you.
A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.
If you are following along with the sample project you downloaded from the top of this page, you should set the Allowed Callback URL to http://localhost:3000
.
A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnTo
query parameter. The logout URL for your app must be added to the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.
If you are following along with the sample project you downloaded from the top of this page, the logout URL you need to add to the Allowed Logout URLs field is http://localhost:3000
.
You need to add the URL for your app to the Allowed Web Origins field in your Application Settings. If you don't register your application URL here, the application will be unable to silently refresh the authentication tokens and your users will be logged out the next time they visit the application, or refresh the page.
If you are following along with the sample project you downloaded from the top of this page, you should set the Allowed Web Origins to http://localhost:3000
.
When you signed up for Auth0, a new application was created for you, or you could have created a new one. You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.
When using the Default App with a Native or Single Page Application, ensure to update the Token Endpoint Authentication Method to None
and set the Application Type to either SPA
or Native
.
You need the following information:
Domain
Client ID
If you download the sample from the top of this page, these details are filled out for you.
A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.
If you are following along with the sample project you downloaded from the top of this page, you should set the Allowed Callback URL to http://localhost:3000
.
A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnTo
query parameter. The logout URL for your app must be added to the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.
If you are following along with the sample project you downloaded from the top of this page, the logout URL you need to add to the Allowed Logout URLs field is http://localhost:3000
.
You need to add the URL for your app to the Allowed Web Origins field in your Application Settings. If you don't register your application URL here, the application will be unable to silently refresh the authentication tokens and your users will be logged out the next time they visit the application, or refresh the page.
If you are following along with the sample project you downloaded from the top of this page, you should set the Allowed Web Origins to http://localhost:3000
.
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.
Integrate Auth0 Universal Login in your Flutter Web app by using the Auth0Web
class. Redirect your users to the Auth0 Universal Login page using loginWithRedirect()
.
You will normally need to specify the redirectUrl
parameter to loginWithRedirect
. Omitting this will cause Auth0 to use the default login route, which is not configured by default.
When a user logs in, they are redirected back to your application. You are then able to access the ID and access tokens for this user by calling onLoad
during startup and handling the credentials that are given to you:
auth0.onLoad().then((final credentials) => setState(() {
+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.
Integrate Auth0 Universal Login in your Flutter Web app by using the Auth0Web
class. Redirect your users to the Auth0 Universal Login page using loginWithRedirect()
.
You will normally need to specify the redirectUrl
parameter to loginWithRedirect
. Omitting this will cause Auth0 to use the default login route, which is not configured by default.
When a user logs in, they are redirected back to your application. You are then able to access the ID and access tokens for this user by calling onLoad
during startup and handling the credentials that are given to you:
auth0.onLoad().then((final credentials) => setState(() {
// Handle or store credentials here
@@ -50,18 +50,18 @@ locale: en-US
- If your application did not launch successfully:
Ensure the Allowed Callback URLs are set properly
Verify you saved your changes after entering your URLs
Make sure the domain and client ID values are imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ If your application did not launch successfully:
Ensure the Allowed Callback URLs are set properly
Verify you saved your changes after entering your URLs
Make sure the domain and client ID values are imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
To log users out, redirect them to the Auth0 logout endpoint to clear their login session by calling the Auth0 Flutter SDK logout()
. Read more about logging out of Auth0.
You will normally want to specify returnToUrl
when calling logout
, otherwise Auth0 will default to the first URL in the Allowed Logout URLs list.
Add a button to your app that calls 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.
To log users out, redirect them to the Auth0 logout endpoint to clear their login session by calling the Auth0 Flutter SDK logout()
. Read more about logging out of Auth0.
You will normally want to specify returnToUrl
when calling logout
, otherwise Auth0 will default to the first URL in the Allowed Logout URLs list.
Add a button to your app that calls 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.
If your application did not log out successfully:
Ensure the Allowed Logout URLs are set properly
Verify you saved your changes after entering your URLs
Still having issues? Check out our documentation or visit our community page to get more help.
If your application did not log out successfully:
Ensure the Allowed Logout URLs are set properly
Verify you saved your changes after entering your URLs
Still having issues? Check out our documentation or visit our community page to get more help.
If your application did not return user profile information:
Verify the ID token is valid
Still having issues? Check out our documentation or visit our community page to get more help.
If your application did not return user profile information:
Verify the ID token is valid
Still having issues? Check out our documentation or visit our community page to get more help.
Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any React application using the Auth0 React SDK.
To use this quickstart, you’ll need to:
Sign up for a free Auth0 account or log in to Auth0.
Have a working React project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.
Visit the React Authentication By Example guide for a deep dive into implementing user authentication in React. This guide provides additional details on how to create a sign-up button, add route guards using React Router, and call a protected API from React.
Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any React application using the Auth0 React SDK. Test
To use this quickstart, you’ll need to:
Sign up for a free Auth0 account or log in to Auth0.
Have a working React project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.
Visit the React Authentication By Example guide for a deep dive into implementing user authentication in React. This guide provides additional details on how to create a sign-up button, add route guards using React Router, and call a protected API from React.
To use Auth0 services, you’ll 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 the project you are developing.
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
If you are following along with our sample project, set this to http://localhost:3000
.
To use Auth0 services, you’ll 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 the project you are developing.
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
If you are following along with our sample project, set this to http://localhost:3000
.
Auth0 provides a React SDK (auth0-react.js) to simplify the process of implementing Auth0 authentication and authorization in React apps.
Install the Auth0 React SDK by running the following commands in your terminal:
cd <your-project-directory>
+Auth0 provides a React SDK (auth0-react.js) to simplify the process of implementing Auth0 authentication and authorization in React apps.
Install the Auth0 React SDK by running the following commands in your terminal:
cd <your-project-directory>
npm install @auth0/auth0-react
-Configure the Auth0Provider component
For the SDK to function properly, you must set the following properties in the Auth0Provider component:
domain
: The domain of your Auth0 tenant. Generally, you can 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.
clientId
: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.
authorizationParams.redirect_uri
: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. You can also find this value in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.
React Quickstart - Step 2 Checkpoint Your Auth0Provider component should now be properly configured. Run your application to verify that:
The SDK is initializing correctly.
Your application is not throwing any errors related to Auth0.
+Configure the Auth0Provider component
For the SDK to function properly, you must set the following properties in the Auth0Provider component:
domain
: The domain of your Auth0 tenant. Generally, you can 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.
clientId
: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.
authorizationParams.redirect_uri
: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. You can also find this value in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.
React Quickstart - Step 2 Checkpoint Your Auth0Provider component should now be properly configured. Run your application to verify that:
The SDK is initializing correctly.
Your application is not throwing any errors related to Auth0.
- Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
## Add login to your application {{{ data-action="code" data-code="login.js" }}}
-Now that you have configured your Auth0 Application and the Auth0 React SDK, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect() method to create a login button that redirects users to the Auth0 Universal Login page. After a user successfully authenticates, they will be redirected to the callback URL you set up earlier in this quickstart.
This guide focuses on using the useAuth0()
custom React Hook. If you are using class components, check out these samples using the withAuth0()
higher-order component.
Create a new file in your application called login.js
for the login button component, and copy in the code from the interactive panel to the right, which contains the logic needed for login. Then, update your index.js
file to include the new login button.
React Quickstart - Step 3 Checkpoint You should now be able to log in or sign up using a username and password.
Click the login button and verify that:
Your React Application redirects you to the Auth0 Universal Login page.
You can log in or sign up.
Auth0 redirects you to your application using the value of the authorizationParams.redirect_uri
you used to configure the Auth0Provider.
+Now that you have configured your Auth0 Application and the Auth0 React SDK, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect() method to create a login button that redirects users to the Auth0 Universal Login page. After a user successfully authenticates, they will be redirected to the callback URL you set up earlier in this quickstart.
This guide focuses on using the useAuth0()
custom React Hook. If you are using class components, check out these samples using the withAuth0()
higher-order component.
Create a new file in your application called login.js
for the login button component, and copy in the code from the interactive panel to the right, which contains the logic needed for login. Then, update your index.js
file to include the new login button.
React Quickstart - Step 3 Checkpoint You should now be able to log in or sign up using a username and password.
Click the login button and verify that:
Your React Application redirects you to the Auth0 Universal Login page.
You can log in or sign up.
Auth0 redirects you to your application using the value of the authorizationParams.redirect_uri
you used to configure the Auth0Provider.
- Sorry about that. Here's a couple things to double check:
you configured the correct authorizationParams.redirect_uri
you added the Login button to the index.js
file
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
you configured the correct authorizationParams.redirect_uri
you added the Login button to the index.js
file
Still having issues? Check out our documentation or visit our community page to get more help.
## Add logout to your application {{{ data-action="code" data-code="logout.js" }}}
-Users who log in to your project will also need a way to log out. Create a logout button using the SDK’s logout() method. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to the logout URL you set up earlier in this quickstart.
Create a new file in your application called logout.js
for the logout button component, and copy in the code from the interactive panel, which contains the logic needed for logout. Then, update your index.js
file to include the logout button.
React Quickstart - Step 4 Checkpoint Run your application and click the logout button, verify that:
Your React application redirects you to the address you specified as one of the Allowed Logout URLs in your Application Settings.
You are no longer logged in to your application.
+Users who log in to your project will also need a way to log out. Create a logout button using the SDK’s logout() method. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to the logout URL you set up earlier in this quickstart.
Create a new file in your application called logout.js
for the logout button component, and copy in the code from the interactive panel, which contains the logic needed for logout. Then, update your index.js
file to include the logout button.
React Quickstart - Step 4 Checkpoint Run your application and click the logout button, verify that:
Your React application redirects you to the address you specified as one of the Allowed Logout URLs in your Application Settings.
You are no longer logged in to your application.
- Sorry about that. Here's a couple things to double check:
you configured the correct Logout URL
you added the Logout button to the index.js
file
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
you configured the correct Logout URL
you added the Logout button to the index.js
file
Still having issues? Check out our documentation or visit our community page to get more help.
## Show User Profile Information {{{ data-action="code" data-code="profile.js" }}}
-Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project.
The Auth0 React SDK provides user information through the user
property. Review the profile.js
code in the interactive panel to see an example of how to use it.
Because the user
property contains sensitive information related to the user's identity, its availability depends on the user's authentication status. To prevent render errors, you should always:
Use the isAuthenticated
property to determine whether Auth0 has authenticated the user before React renders any component that consumes the user
property.
Ensure that the SDK has finished loading by checking that isLoading
is false before accessing the isAuthenticated
property.
React Quickstart - Step 5 Checkpoint Verify that:
You can display the user.name
or any other user property within a component correctly after you have logged in.
+Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project.
The Auth0 React SDK provides user information through the user
property. Review the profile.js
code in the interactive panel to see an example of how to use it.
Because the user
property contains sensitive information related to the user's identity, its availability depends on the user's authentication status. To prevent render errors, you should always:
Use the isAuthenticated
property to determine whether Auth0 has authenticated the user before React renders any component that consumes the user
property.
Ensure that the SDK has finished loading by checking that isLoading
is false before accessing the isAuthenticated
property.
React Quickstart - Step 5 Checkpoint Verify that:
You can display the user.name
or any other user property within a component correctly after you have logged in.
- Sorry about that. Here's a couple things to double check:
you added the isLoading
check before accessing the isAuthenticated
property
you added the Profile
component to the index.js
file
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
you added the isLoading
check before accessing the isAuthenticated
property
you added the Profile
component to the index.js
file
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/spa/vanillajs/interactive.md b/articles/quickstart/spa/vanillajs/interactive.md
index eab7b5deba..6e52ab3a31 100644
--- a/articles/quickstart/spa/vanillajs/interactive.md
+++ b/articles/quickstart/spa/vanillajs/interactive.md
@@ -5,19 +5,19 @@ interactive: true
files:
- files/app
github:
- path: https://github.com/auth0-samples/auth0-javascript-samples/tree/master/01-Login
+ path: 01-Login
locale: en-US
---
# Add Login to Your JavaScript Application
-Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in a Single-Page Application (SPA) that uses plain JavaScript, using the Auth0 SPA SDK.
To use this quickstart, you’ll need to:
Sign up for a free Auth0 account or log in to Auth0.
Have a working project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.
This quickstart assumes you are adding Auth0 to a plain JavaScript application, as opposed to using a framework such as React or Angular.
+Auth0 allows you to add authentication to almost any application type quickly. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in a Single-Page Application (SPA) that uses plain JavaScript, using the Auth0 SPA SDK.
To use this quickstart, you’ll need to:
Sign up for a free Auth0 account or log in to Auth0.
Have a working project that you want to integrate with. Alternatively, you can view or download a sample application after logging in.
This quickstart assumes you are adding Auth0 to a plain JavaScript application, as opposed to using a framework such as React or Angular.
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
Configure Allowed Web Origins
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
If you are following along with our sample project, set this to http://localhost:3000
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
Configure Allowed Web Origins
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
If you are following along with our sample project, set this to http://localhost:3000
.
## Add the Auth0 SPA SDK
@@ -36,11 +36,11 @@ locale: en-US
## Add login to your application {{{ data-action="code" data-code="app.js#8:14" }}}
-Now that you have configured your Auth0 Application, added the Auth0 SPA SDK, and created the Auth0 client, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect()
method to redirect users to the Auth0 Universal Login page where Auth0 can authenticate them. After a user successfully authenticates, they will be redirected to the callback URL you set up earlier in this quickstart.
Create a login button in your application that calls loginWithRedirect()
when selected.
Javascript quickstart step 4 checkpoint You should now be able to log in to your application.
Run your application, and select the login button. Verify that:
you can log in or sign up using a username and password
your application redirects you to the Auth0 Universal Login page
you are redirected to Auth0 for authentication
Auth0 successfully redirects back to your application after authentication
you do not receive any errors in the console related to Auth0
+Now that you have configured your Auth0 Application, added the Auth0 SPA SDK, and created the Auth0 client, you need to set up login for your project. To do this, you will use the SDK’s loginWithRedirect()
method to redirect users to the Auth0 Universal Login page where Auth0 can authenticate them. After a user successfully authenticates, they will be redirected to the callback URL you set up earlier in this quickstart.
Create a login button in your application that calls loginWithRedirect()
when selected.
Javascript quickstart step 4 checkpoint You should now be able to log in to your application.
Run your application, and select the login button. Verify that:
you can log in or sign up using a username and password
your application redirects you to the Auth0 Universal Login page
you are redirected to Auth0 for authentication
Auth0 successfully redirects back to your application after authentication
you do not receive any errors in the console related to Auth0
- Sorry about that. Here are a few things to double check:
make sure that the correct application is selected
make sure you saved after entering your URLs
make sure the Auth0 client has been correctly configured with your Auth0 domain and client ID
Still having issues? To get more help, check out our documentation or visit our community page.
+ Sorry about that. Here are a few things to double check:
make sure that the correct application is selected
make sure you saved after entering your URLs
make sure the Auth0 client has been correctly configured with your Auth0 domain and client ID
Still having issues? To get more help, check out our documentation or visit our community page.
@@ -51,30 +51,30 @@ locale: en-US
- Sorry about that. Here are a few things to double check:
check that the redirect_uri
option has been configured to your application's URL
if you have an error
query parameter, inspect it to learn the cause of the error
Still having issues? To get more help, check out our documentation or visit our community page.
+ Sorry about that. Here are a few things to double check:
check that the redirect_uri
option has been configured to your application's URL
if you have an error
query parameter, inspect it to learn the cause of the error
Still having issues? To get more help, check out our documentation or visit our community page.
## Add logout to your application {{{ data-action="code" data-code="app.js#23:29" }}}
-Users who log in to your project will also need a way to log out. The Auth0 client provides a logout()
method that you can use to log a user out of your app. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to your application and the logout URL you set up earlier in this quickstart.
Create a logout button in your application that calls logout()
when selected.
The SDK exposes an isAuthenticated()
function that allows you to check whether a user is authenticated or not. You can render the login and logout buttons conditionally based on the value of the isAuthenticated()
function. Alternatively, you can use a single button to combine both login and logout buttons as well as their conditional rendering.
javascript quickstart step 6 checkpoint
+
Users who log in to your project will also need a way to log out. The Auth0 client provides a logout()
method that you can use to log a user out of your app. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to your application and the logout URL you set up earlier in this quickstart.
Create a logout button in your application that calls logout()
when selected.
The SDK exposes an isAuthenticated()
function that allows you to check whether a user is authenticated or not. You can render the login and logout buttons conditionally based on the value of the isAuthenticated()
function. Alternatively, you can use a single button to combine both login and logout buttons as well as their conditional rendering.
javascript quickstart step 6 checkpoint
You should now be able to log out of your application.
Run your application, log in, and select the logout button. Verify that:
you are redirected to Auth0's logout endpoint.
Auth0 successfully redirects back to your application and the correct logout URL.
you are no longer logged in to your application.
you do not receive any errors in the console related to Auth0.
- Sorry about that. Here are a few things to double check:
make sure that you configured the logout URL as one of the Allowed Logout URLS in your application's Settings
inspect the application logs for further errors
Still having issues? To get more help, check out our documentation or visit our community page.
+ Sorry about that. Here are a few things to double check:
make sure that you configured the logout URL as one of the Allowed Logout URLS in your application's Settings
inspect the application logs for further errors
Still having issues? To get more help, check out our documentation or visit our community page.
## Show user profile information {{{ data-action="code" data-code="app.js#31:45" }}}
-Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to personalize the user interface by displaying a logged-in user’s name or profile picture.
The Auth0 SPA SDK provides user information through the getUser()
function exposed by the Auth0 client. The Auth0 client also exposes an isAuthenticated()
function that allows you to check whether a user is authenticated or not, which you can use to determine whether to show or hide UI elements, for example. Review the code in the interactive panel to see examples of how to use these functions.
Javascript quickstart step 7 checkpoint You should now be able to view user profile information.
Run your application, and verify that:
user information displays correctly after you have logged in.
user information does not display after you have logged out.
+Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to personalize the user interface by displaying a logged-in user’s name or profile picture.
The Auth0 SPA SDK provides user information through the getUser()
function exposed by the Auth0 client. The Auth0 client also exposes an isAuthenticated()
function that allows you to check whether a user is authenticated or not, which you can use to determine whether to show or hide UI elements, for example. Review the code in the interactive panel to see examples of how to use these functions.
Javascript quickstart step 7 checkpoint You should now be able to view user profile information.
Run your application, and verify that:
user information displays correctly after you have logged in.
user information does not display after you have logged out.
- Sorry about that. Here are a few things to double check:
ensure that all the previous steps work without issue
check your code that manages the UI in response to the authentication state
inspect the application logs for further errors relating to silent authentication
Still having issues? To get more help, check out our documentation or visit our community page.
+ Sorry about that. Here are a few things to double check:
ensure that all the previous steps work without issue
check your code that manages the UI in response to the authentication state
inspect the application logs for further errors relating to silent authentication
Still having issues? To get more help, check out our documentation or visit our community page.
diff --git a/articles/quickstart/spa/vuejs/interactive.md b/articles/quickstart/spa/vuejs/interactive.md
index 8c73a299b4..79579ff02b 100644
--- a/articles/quickstart/spa/vuejs/interactive.md
+++ b/articles/quickstart/spa/vuejs/interactive.md
@@ -8,34 +8,34 @@ files:
- files/logout
- files/profile
github:
- path: https://github.com/auth0-samples/auth0-vue-samples/tree/master/01-Login
+ path: 01-Login
locale: en-US
---
# Add Login to Your Vue Application
-Auth0 allows you to add authentication to almost any application type. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any Vue application using the Auth0 Vue SDK.
This quickstart is designed for using Auth0 Vue with Vue 3 applications. If you are using Vue 2, please check out the Vue 2 Tutorial with Auth0 SPA SDK instead or visit the Vue.js Authentication 2 By Example guide.
To use this quickstart, you will need:
A free Auth0 account or log in to Auth0.
A working Vue project that you want to integrate with OR you can download a sample application after logging in.
+Auth0 allows you to add authentication to almost any application type. This guide demonstrates how to integrate Auth0, add authentication, and display user profile information in any Vue application using the Auth0 Vue SDK.
This quickstart is designed for using Auth0 Vue with Vue 3 applications. If you are using Vue 2, please check out the Vue 2 Tutorial with Auth0 SPA SDK instead or visit the Vue.js Authentication 2 By Example guide.
To use this quickstart, you will need:
A free Auth0 account or log in to Auth0.
A working Vue project that you want to integrate with OR you can download a sample application after logging in.
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
Configure Allowed Web Origins
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
If you are following along with our sample project, set this to http://localhost:3000
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
Configure Allowed Web Origins
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
If you are following along with our sample project, set this to http://localhost:3000
.
## Install the Auth0 Vue SDK {{{ data-action="code" data-code="index.js" }}}
-Auth0 provides a Vue SDK to simplify the process of implementing Auth0 authentication and authorization in Vue 3 apps.
Install the Auth0 Vue SDK by running the following commands in your terminal:
cd <your-project-directory>
+Auth0 provides a Vue SDK to simplify the process of implementing Auth0 authentication and authorization in Vue 3 apps.
Install the Auth0 Vue SDK by running the following commands in your terminal:
cd <your-project-directory>
npm install @auth0/auth0-vue
-Register the plugin
For the SDK to function, you must register the plugin with your Vue application using the following properties:
domain
: The domain of your Auth0 tenant. This value is in the Auth0 Dashboard under your Application's Settings in the Domain field. If you are using a custom domain, set this to the value of your custom domain instead.
clientId
: The ID of the Auth0 Application you set up earlier in this quickstart. Find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.
authorizationParams.redirect_uri
: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. This value is in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.
The plugin will register the SDK using both provide
and app.config.globalProperties
. This enables both the Composition API and Options API.
vue quickstart step 2 checkpoint The plugin is now configured. Run your application to verify that:
the SDK is initializing correctly
your application is not throwing any errors related to Auth0
+Register the plugin
For the SDK to function, you must register the plugin with your Vue application using the following properties:
domain
: The domain of your Auth0 tenant. This value is in the Auth0 Dashboard under your Application's Settings in the Domain field. If you are using a custom domain, set this to the value of your custom domain instead.
clientId
: The ID of the Auth0 Application you set up earlier in this quickstart. Find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.
authorizationParams.redirect_uri
: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. This value is in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.
The plugin will register the SDK using both provide
and app.config.globalProperties
. This enables both the Composition API and Options API.
vue quickstart step 2 checkpoint The plugin is now configured. Run your application to verify that:
the SDK is initializing correctly
your application is not throwing any errors related to Auth0
- If your application did not start successfully:
Verify you selected the correct application
Save your changes after entering your URLs
Verify the domain and Client ID imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ If your application did not start successfully:
Verify you selected the correct application
Save your changes after entering your URLs
Verify the domain and Client ID imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -46,14 +46,14 @@ npm install @auth0/auth0-vue
- If you were not able to log in using Auth0 Universal Login:
Verify you configured the correct authorizationParams.redirect_uri
Verify the domain and Client ID are set correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ If you were not able to log in using Auth0 Universal Login:
Verify you configured the correct authorizationParams.redirect_uri
Verify the domain and Client ID are set correctly
Still having issues? Check out our documentation or visit our community page to get more help.
## Add logout to your application {{{ data-action="code" data-code="logout.js" }}}
-Users who log in to your project will also need a way to log out. When users log out, your application will redirect them to your Auth0 logout endpoint, which will then redirect them to the specified logoutParams.returnTo
parameter.
Use the logout
function exposed on the return value of useAuth0
, which you can access in your component's setup
function, to log the user out of your application.
Using the Options API
With the Options API, you can use the same logout
method from the global $auth0
property through the this
accessor.
vue quickstart step 4 checkpoint Run your application and click the logout button, verify that:
your Vue application redirects you to the logoutParams.returnTo
address
you are no longer logged in to your application
+Users who log in to your project will also need a way to log out. When users log out, your application will redirect them to your Auth0 logout endpoint, which will then redirect them to the specified logoutParams.returnTo
parameter.
Use the logout
function exposed on the return value of useAuth0
, which you can access in your component's setup
function, to log the user out of your application.
Using the Options API
With the Options API, you can use the same logout
method from the global $auth0
property through the this
accessor.
vue quickstart step 4 checkpoint Run your application and click the logout button, verify that:
your Vue application redirects you to the logoutParams.returnTo
address
you are no longer logged in to your application
@@ -64,10 +64,10 @@ npm install @auth0/auth0-vue
## Show user profile information {{{ data-action="code" data-code="profile.js" }}}
-Next, you will configure how to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project. Once the user authenticates, the SDK extracts the user's profile information and stores it in memory. The application can access the user profile with the reactive user
property. To access this property, review your component's setup
function and find the userAuth0
return value.
The user
property contains sensitive information related to the user's identity. It is only available based on the user's authentication status. To prevent render errors, you should always:
use the isAuthenticated
property to determine whether Auth0 has authenticated the user before Vue renders any component that consumes the user
property.
ensure that the SDK has finished loading by checking that isLoading
is false before accessing the isAuthenticated
property.
Using the Options API
For the Options API, use the same reactive user
, isLoading
, and isAuthenticated
properties from the global $auth0
property through the this
accessor.
vue step 5 checkpoint Verify that:
you can display the user
or any of the user properties within a component correctly after you have logged in
+Next, you will configure how to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project. Once the user authenticates, the SDK extracts the user's profile information and stores it in memory. The application can access the user profile with the reactive user
property. To access this property, review your component's setup
function and find the userAuth0
return value.
The user
property contains sensitive information related to the user's identity. It is only available based on the user's authentication status. To prevent render errors, you should always:
use the isAuthenticated
property to determine whether Auth0 has authenticated the user before Vue renders any component that consumes the user
property.
ensure that the SDK has finished loading by checking that isLoading
is false before accessing the isAuthenticated
property.
Using the Options API
For the Options API, use the same reactive user
, isLoading
, and isAuthenticated
properties from the global $auth0
property through the this
accessor.
vue step 5 checkpoint Verify that:
you can display the user
or any of the user properties within a component correctly after you have logged in
- If you are having issues with the user
properties:
Verify you added the isLoading
check before accessing the isAuthenticated
property
Verify you added the isAuthenticated
check before accessing the user
property
Still having issues? Check out our documentation or visit our community page to get more help.
+ If you are having issues with the user
properties:
Verify you added the isLoading
check before accessing the isAuthenticated
property
Verify you added the isAuthenticated
check before accessing the user
property
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/webapp/apache/interactive.md b/articles/quickstart/webapp/apache/interactive.md
index 94d3234ae5..7fa4dd02c3 100644
--- a/articles/quickstart/webapp/apache/interactive.md
+++ b/articles/quickstart/webapp/apache/interactive.md
@@ -4,8 +4,6 @@ description: This tutorial demonstrates how to configure Apache to add authentic
interactive: true
files:
- files/auth_openidc
-github:
- path: https://github.com/zmartzone/mod_auth_openidc/releases
locale: en-US
---
@@ -17,7 +15,7 @@ locale: en-US
## Install and Enable mod_auth_openidc Module
-First, install the mod_auth_openidc
module for Apache.
You can get the binaries from GitHub and install them for your OS. If your OS isn't compatible with any of the binaries, you can still build it from source.
Once you've installed the module, enable it for Apache with the a2enmod
command. To learn more, read a2enmod on Ubuntu Manpage:
a2enmod auth_openidc
For Windows, you can use this Powershell script to get a2enmod
working on your system.
+First, install the mod_auth_openidc
module for Apache.
You can get the binaries from GitHub and install them for your OS. If your OS isn't compatible with any of the binaries, you can still build it from source.
Once you've installed the module, enable it for Apache with the a2enmod
command. To learn more, read a2enmod on Ubuntu Manpage:
a2enmod auth_openidc
For Windows, you can use this Powershell script to get a2enmod
working on your system.
## Configure the Module with Your Auth0 Account Information {{{ data-action="code" data-code="auth_openidc.conf#1:12" }}}
diff --git a/articles/quickstart/webapp/aspnet-core-blazor-server/interactive.md b/articles/quickstart/webapp/aspnet-core-blazor-server/interactive.md
index 98f0a6eff8..cd6cb2111d 100644
--- a/articles/quickstart/webapp/aspnet-core-blazor-server/interactive.md
+++ b/articles/quickstart/webapp/aspnet-core-blazor-server/interactive.md
@@ -8,7 +8,7 @@ files:
- files/Profile
- files/Program
github:
- path: https://github.com/auth0-samples/auth0-aspnetcore-blazor-server-samples/tree/main/Quickstart/Sample
+ path: Quickstart/Sample
locale: en-US
---
@@ -20,12 +20,12 @@ locale: en-US
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/
.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/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.
If you are following along with our sample project, set this to http://localhost:3000
.
## Install and Configure the SDK {{{ data-action="code" data-code="Program.cs" }}}
-Install from Nuget
To integrate Auth0 with Blazor Server you can use our SDK by installing the Auth0.AspNetCore.Authentication
Nuget package to your application.
Configure the middleware
To enable authentication in your Blazor Server application, use the middleware provided by the SDK. Go to the Program.cs
file and call builder.Services.AddAuth0WebAppAuthentication()
to register the SDK's middleware.
Ensure to configure the Domain
and ClientId
, these are required fields to ensure the SDK knows which Auth0 tenant and application it should use.
Make sure you have enabled authentication and authorization in your Program.cs
file.
+Install from Nuget
To integrate Auth0 with Blazor Server you can use our SDK by installing the Auth0.AspNetCore.Authentication
Nuget package to your application.
Configure the middleware
To enable authentication in your Blazor Server application, use the middleware provided by the SDK. Go to the Program.cs
file and call builder.Services.AddAuth0WebAppAuthentication()
to register the SDK's middleware.
Ensure to configure the Domain
and ClientId
, these are required fields to ensure the SDK knows which Auth0 tenant and application it should use.
Make sure you have enabled authentication and authorization in your Program.cs
file.
## Login {{{ data-action="code" data-code="Login.cshtml.cs" }}}
@@ -34,7 +34,7 @@ locale: en-US
- Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -45,7 +45,7 @@ locale: en-US
- Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -56,6 +56,6 @@ locale: en-US
- Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/webapp/aspnet-core/interactive.md b/articles/quickstart/webapp/aspnet-core/interactive.md
index 7230ff03f6..616cd153d6 100644
--- a/articles/quickstart/webapp/aspnet-core/interactive.md
+++ b/articles/quickstart/webapp/aspnet-core/interactive.md
@@ -7,7 +7,7 @@ files:
- files/appsettings
- files/AccountController
github:
- path: https://github.com/auth0-samples/auth0-aspnetcore-mvc-samples/tree/master/Quickstart/Sample
+ path: Quickstart/Sample
locale: en-US
---
@@ -19,12 +19,12 @@ locale: en-US
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/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.
If you are following along with our sample project, set this to http://localhost:3000
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/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.
If you are following along with our sample project, set this to http://localhost:3000
.
## Install and Configure the SDK {{{ data-action="code" data-code="Program.cs" }}}
-Install from Nuget
To integrate Auth0 with ASP.NET Core you can use our SDK by installing the Auth0.AspNetCore.Authentication
Nuget package to your application.
Configure the middleware
To enable authentication in your ASP.NET Core application, use the middleware provided by the SDK. Go to the Program.cs
file and call builder.Services.AddAuth0WebAppAuthentication()
to register the SDK's middleware.
Ensure to configure the Domain
and ClientId
, these are required fields to ensure the SDK knows which Auth0 tenant and application it should use.
Make sure you have enabled authentication and authorization in your Program.cs
file.
+Install from Nuget
To integrate Auth0 with ASP.NET Core you can use our SDK by installing the Auth0.AspNetCore.Authentication
Nuget package to your application.
Configure the middleware
To enable authentication in your ASP.NET Core application, use the middleware provided by the SDK. Go to the Program.cs
file and call builder.Services.AddAuth0WebAppAuthentication()
to register the SDK's middleware.
Ensure to configure the Domain
and ClientId
, these are required fields to ensure the SDK knows which Auth0 tenant and application it should use.
Make sure you have enabled authentication and authorization in your Program.cs
file.
## Login {{{ data-action="code" data-code="AccountController.cs" }}}
@@ -33,7 +33,7 @@ locale: en-US
- Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -44,7 +44,7 @@ locale: en-US
- Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -55,6 +55,6 @@ locale: en-US
- Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/webapp/aspnet-owin/interactive.md b/articles/quickstart/webapp/aspnet-owin/interactive.md
index ebd984644a..c1a61a7c79 100644
--- a/articles/quickstart/webapp/aspnet-owin/interactive.md
+++ b/articles/quickstart/webapp/aspnet-owin/interactive.md
@@ -7,7 +7,7 @@ files:
- files/Startup
- files/AccountController
github:
- path: https://github.com/auth0-samples/auth0-aspnet-owin-mvc-samples/tree/master/Quickstart/Sample
+ path: Quickstart/Sample
locale: en-US
---
@@ -19,7 +19,7 @@ locale: en-US
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/
.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/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.
If you are following along with our sample project, set this to http://localhost:3000
.
## Configure the project {{{ data-action="code" data-code="Web.config" }}}
@@ -30,7 +30,7 @@ Install-Package Microsoft.Owin.Security.Cookies
-Issues occur when configuring the OWIN cookie middleware and System.Web cookies at the same time. To learn more, read System.Web cookie integration issues doc to mitigate these problems.
Configure the credentials
For the SDK to function properly, set the following properties in Web.config
:
auth0:Domain
: The domain of your Auth0 tenant. You can find this in the Auth0 Dashboard under your application's Settings in the Domain field. If you are using a custom domain, set this to the value of your custom domain instead.
auth0:ClientId
: The ID of the Auth0 application you created in Auth0 Dashboard. You can find this in the Auth0 Dashboard under your application's Settings in the Client ID field.
+Issues occur when configuring the OWIN cookie middleware and System.Web cookies at the same time. To learn more, read System.Web cookie integration issues doc to mitigate these problems.
Configure the credentials
For the SDK to function properly, set the following properties in Web.config
:
auth0:Domain
: The domain of your Auth0 tenant. You can find this in the Auth0 Dashboard under your application's Settings in the Domain field. If you are using a custom domain, set this to the value of your custom domain instead.
auth0:ClientId
: The ID of the Auth0 application you created in Auth0 Dashboard. You can find this in the Auth0 Dashboard under your application's Settings in the Client ID field.
## Configure the middleware {{{ data-action="code" data-code="Startup.cs#18:74" }}}
@@ -44,7 +44,7 @@ Install-Package Microsoft.Owin.Security.Cookies
- Sorry about that. Here are a couple of things to double-check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here are a couple of things to double-check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -55,7 +55,7 @@ Install-Package Microsoft.Owin.Security.Cookies
- Sorry about that. Here are a couple of things to double-check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here are a couple of things to double-check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are configured correctly
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -66,6 +66,6 @@ Install-Package Microsoft.Owin.Security.Cookies
- Sorry about that. Here are a couple things to double-check:
make sure the correct application is selected
make sure the domain and client ID are configured correctly
Did you set openid profile email
as the scope?
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here are a couple things to double-check:
make sure the correct application is selected
make sure the domain and client ID are configured correctly
Did you set openid profile email
as the scope?
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/webapp/django/interactive.md b/articles/quickstart/webapp/django/interactive.md
index 3f1adde192..e49db760a7 100644
--- a/articles/quickstart/webapp/django/interactive.md
+++ b/articles/quickstart/webapp/django/interactive.md
@@ -8,19 +8,19 @@ files:
- files/webappexample/urls
- files/webappexample/views
github:
- path: https://github.com/auth0-samples/auth0-django-web-app/tree/master/01-Login
+ path: 01-Login
locale: en-US
---
# Add Login to your Django Application
-Auth0 allows you to add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with a Python Django application using the Authlib SDK.
+Auth0 allows you to add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with a Python Django application using the Authlib SDK.
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/
.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/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.
If you are following along with our sample project, set this to http://localhost:3000
.
## Install dependencies
@@ -63,7 +63,7 @@ AUTH0_DOMAIN=${account.namespace}
## Setup your application {{{ data-action="code" data-code="webappexample/views.py#1:18" }}}
-To begin creating your application, open the webappexample/views.py
file in your IDE.
Import all the libraries your application needs.
Now you can configure Authlib to handle your application's authentication with Auth0.
Learn more about the configuration options available for Authlib's OAuth register()
method from their documentation.
+To begin creating your application, open the webappexample/views.py
file in your IDE.
Import all the libraries your application needs.
Now you can configure Authlib to handle your application's authentication with Auth0.
Learn more about the configuration options available for Authlib's OAuth register()
method from their documentation.
## Setup your route handlers {{{ data-action="code" data-code="webappexample/views.py#20:52" }}}
@@ -89,10 +89,10 @@ python3 manage.py runserver 3000
-Your application should now be ready to open from your browser at http://localhost:3000.
Django - Step 10 - Run your application - Checkpoint Visit http://localhost:3000 to verify. You should find a login button routing to Auth0 for login, then back to your application to see your profile information.
+Your application should now be ready to open from your browser at http://localhost:3000.
Django - Step 10 - Run your application - Checkpoint Visit http://localhost:3000 to verify. You should find a login button routing to Auth0 for login, then back to your application to see your profile information.
- If your application did not start successfully:
Verify any errors in the console.
Verify the domain and Client ID imported correctly.
Verify your tenant configuration.
Still having issues? Check out our documentation or visit our community page to get more help.
+ If your application did not start successfully:
Verify any errors in the console.
Verify the domain and Client ID imported correctly.
Verify your tenant configuration.
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/webapp/express/interactive.md b/articles/quickstart/webapp/express/interactive.md
index 9bb9f18b72..5af2d2416d 100644
--- a/articles/quickstart/webapp/express/interactive.md
+++ b/articles/quickstart/webapp/express/interactive.md
@@ -5,7 +5,7 @@ interactive: true
files:
- files/server
github:
- path: https://github.com/auth0-samples/auth0-express-webapp-sample/tree/master/01-Login
+ path: 01-Login
locale: en-US
---
@@ -17,50 +17,32 @@ locale: en-US
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/
.
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.
If you are following along with our sample project, set this to http://localhost:3000/
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/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.
If you are following along with our sample project, set this to http://localhost:3000/
.
## Install the Express OpenID Connect SDK {{{ data-action="code" data-code="server.js#2:16" }}}
-Your application will need the express-openid-connect
package which is an Auth0-maintained OIDC-compliant SDK for Express.
Install the Express OpenID Connect SDK by running the following commands in your terminal:
cd <your-project-directory>
+Your application will need the express-openid-connect
package which is an Auth0-maintained OIDC-compliant SDK for Express.
Install the Express OpenID Connect SDK by running the following commands in your terminal:
cd <your-project-directory>
npm install express-openid-connect
-```
-### Configure Router
-The Express OpenID Connect library provides the `auth` router in order to attach authentication routes to your application. You will need to configure the router with the following configuration keys:
+
-- `authRequired` - Controls whether authentication is required for all routes
-- `auth0Logout` - Uses Auth0 logout feature
-- `baseURL` - The URL where the application is served
-- `secret` - A long, random string
-- `issuerBaseURL` - The Domain as a secure URL found in your Application settings
-- `clientID` - The Client ID found in your Application settings
+Configure Router
The Express OpenID Connect library provides the auth
router in order to attach authentication routes to your application. You will need to configure the router with the following configuration keys:
authRequired
- Controls whether authentication is required for all routes.
auth0Logout
- Uses Auth0 logout feature.
baseURL
- The URL where the application is served.
secret
- A long, random string.
issuerBaseURL
- The Domain as a secure URL found in your Application settings.
clientID
- The Client ID found in your Application settings.
For additional configuration options visit the API documentation.
You can generate a suitable string for LONG_RANDOM_STRING
using openssl rand -hex 32
on the command line.
Express - Step 2 - Install the Express OpenID Connect SDK - Checkpoint A user can now log into your application by visiting the /login
route provided by the library. If you are running your project on localhost:3000
, that link would be http://localhost:3000/login
.
-For additional configuration options visit the API documentation.
-
-:::note
-You can generate a suitable string for `LONG_RANDOM_STRING` using `openssl rand -hex 32` on the command line.
-:::
+
-::::checkpoint
-:::checkpoint-default
-A user can now log into your application by visiting the `/login` route provided by the library. If you are running your project on `localhost:3000` that link would be `http://localhost:3000/`.
-:::
-:::checkpoint-failure
-Sorry about that. You should check the error details on the Auth0 login page to make sure you have entered the callback URL correctly.
+ Sorry about that. You should check the error details on the Auth0 login page to make sure you have entered the callback URL correctly.
Still having issues? Check out our documentation or visit our community page to get more help.
-Still having issues? Check out our documentation or visit our community page to get more help.
-:::
-::::
+
## Display User Profile {{{ data-action="code" data-code="server.js#25:28" }}}
-To display the user's profile, your application should provide a protected route.
Add the requiresAuth
middleware for routes that require authentication. Any route using this middleware will check for a valid user session and, if one does not exist, it will redirect the user to log in.
Express - Step 3 - Display User Profile - Checkpoint A user can log out of your application by visiting the /logout
route provided by the library. If you are running your project on localhost:3000
, that link would be http://localhost:3000/logout
.
+To display the user's profile, your application should provide a protected route.
Add the requiresAuth
middleware for routes that require authentication. Any route using this middleware will check for a valid user session and, if one does not exist, it will redirect the user to log in.
Express - Step 3 - Display User Profile - Checkpoint A user can log out of your application by visiting the /logout
route provided by the library. If you are running your project on localhost:3000
, that link would be http://localhost:3000/logout
.
- Sorry about that. You should check that you configured the logout URL correctly.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. You should check that you configured the logout URL correctly.
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/webapp/golang/interactive.md b/articles/quickstart/webapp/golang/interactive.md
index a621fc3149..51c1a8b663 100644
--- a/articles/quickstart/webapp/golang/interactive.md
+++ b/articles/quickstart/webapp/golang/interactive.md
@@ -14,7 +14,7 @@ files:
- files/router
- files/user
github:
- path: https://github.com/auth0-samples/auth0-golang-web-app/tree/master/01-Login
+ path: 01-Login
locale: en-US
---
@@ -26,12 +26,12 @@ locale: en-US
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/
.
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.
If you are following along with our sample project, set this to http://localhost:3000
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/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.
If you are following along with our sample project, set this to http://localhost:3000
.
## Install dependencies {{{ data-action="code" data-code="go.mod" }}}
-Create a go.mod
file to list all the dependencies in your application.
To integrate Auth0 in a Go application, add the coreos/go-oidc/v3
and x/oauth2
packages.
In addition to the OIDC and OAuth2 packages, add joho/godotenv
, gin-gonic/gin
, and gin-contrib/sessions
.
This example uses gin
for routing, but you can use whichever router you want.
Save the go.mod
file with the necessary dependencies and install them using the following command in your terminal:
go mod download
+Create a go.mod
file to list all the dependencies in your application.
To integrate Auth0 in a Go application, add the coreos/go-oidc/v3
and x/oauth2
packages.
In addition to the OIDC and OAuth2 packages, add joho/godotenv
, gin-gonic/gin
, and gin-contrib/sessions
.
This example uses gin
for routing, but you can use whichever router you want.
Save the go.mod
file with the necessary dependencies and install them using the following command in your terminal:
go mod download
@@ -45,12 +45,12 @@ locale: en-US
## Configure OAuth2 and OpenID Connect packages {{{ data-action="code" data-code="auth.go" }}}
-Next, configure the OAuth2 and OpenID Connect packages.
Create a file called auth.go
in the platform/authenticator
folder. In this package, create a method to configure and return OAuth2 and OIDC clients, and another one to verify an ID Token.
+Next, configure the OAuth2 and OpenID Connect packages.
Create a file called auth.go
in the platform/authenticator
folder. In this package, create a method to configure and return OAuth2 and OIDC clients, and another one to verify an ID Token.
## Set up your application routes {{{ data-action="code" data-code="router.go" }}}
-Create a file called router.go
in the platform/router
folder. In this package, create a method to configure and return our routes using github.com/gin-gonic/gin. You will be passing an instance of Authenticator
to the method, for use with the login
and callback
handlers.
+Create a file called router.go
in the platform/router
folder. In this package, create a method to configure and return our routes using github.com/gin-gonic/gin. You will be passing an instance of Authenticator
to the method, for use with the login
and callback
handlers.
## Add login to your application {{{ data-action="code" data-code="login.go" }}}
@@ -70,7 +70,7 @@ locale: en-US
## Add logout to your application {{{ data-action="code" data-code="logout.go" }}}
-To log the user out, clear the data from the session and redirect the user to the Auth0 logout endpoint. You can find more information about this in the logout documentation.
Create a file called logout.go
in the folder web/app/logout
, and add the function Handler
to redirect the user to Auth0's logout endpoint.
The returnTo
URL needs to be in the list of Allowed Logout URLs in the settings section of the application, For more information, see Redirect Users After Logout.
Create a file called user.js
in the folder web/static/js
, and add the code to remove the cookie from a logged-in user.
+To log the user out, clear the data from the session and redirect the user to the Auth0 logout endpoint. You can find more information about this in the logout documentation.
Create a file called logout.go
in the folder web/app/logout
, and add the function Handler
to redirect the user to Auth0's logout endpoint.
The returnTo
URL needs to be in the list of Allowed Logout URLs in the settings section of the application, For more information, see Redirect Users After Logout.
Create a file called user.js
in the folder web/static/js
, and add the code to remove the cookie from a logged-in user.
## Protect routes {{{ data-action="code" data-code="isAuthenticated.go" }}}
diff --git a/articles/quickstart/webapp/java-ee/interactive.md b/articles/quickstart/webapp/java-ee/interactive.md
index da9f06eb97..edd4e1a132 100644
--- a/articles/quickstart/webapp/java-ee/interactive.md
+++ b/articles/quickstart/webapp/java-ee/interactive.md
@@ -9,7 +9,7 @@ files:
- files/src/main/java/com/auth0/example/web/HomeServlet
- files/src/main/java/com/auth0/example/web/LogoutServlet
github:
- path: https://github.com/auth0-samples/auth0-java-ee-sample/tree/master/01-Login
+ path: 01-Login
locale: en-US
---
@@ -21,12 +21,12 @@ locale: en-US
## Configure Auth0
-Get Your Application Keys
When you signed up for Auth0, a new application was created for you, or you could have created a new one. You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.

You need the following information:
Domain
Client ID
Client Secret
If you download the sample from the top of this page, these details are filled out for you.
Configure Callback URLs
A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.
If you are following along with the sample project you downloaded from the top of this page, the callback URL you need to add to the Allowed Callback URLs field is http://localhost:3000/callback
.
Configure Logout URLs
A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnTo
query parameter. The logout URL for your app must be added to the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.
If you are following along with the sample project you downloaded from the top of this page, the logout URL you need to add to the Allowed Logout URLs field is http://localhost:3000/
.
+Get Your Application Keys
When you signed up for Auth0, a new application was created for you, or you could have created a new one. You will need some details about that application to communicate with Auth0. You can get these details from the Application Settings section in the Auth0 dashboard.

You need the following information:
Domain
Client ID
Client Secret
If you download the sample from the top of this page, these details are filled out for you.
Configure Callback URLs
A callback URL is a URL in your application where Auth0 redirects the user after they have authenticated. The callback URL for your app must be added to the Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.
If you are following along with the sample project you downloaded from the top of this page, the callback URL you need to add to the Allowed Callback URLs field is http://localhost:3000/callback
.
Configure Logout URLs
A logout URL is a URL in your application that Auth0 can return to after the user has been logged out of the authorization server. This is specified in the returnTo
query parameter. The logout URL for your app must be added to the Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.
If you are following along with the sample project you downloaded from the top of this page, the logout URL you need to add to the Allowed Logout URLs field is http://localhost:3000/
.
## Configure Java EE to use Auth0 {{{ data-action="code" data-code="src/main/webapp/WEB-INF/web.xml" }}}
-Set up dependencies
To integrate your Java EE application with Auth0, add the following dependencies:
javax.javaee-api: The Java EE 8 API necessary to write applications using Java EE 8. The actual implementation is provided by the application container, so it does not need to be included in the WAR file.
javax.security.enterprise: The Java EE 8 Security API that enables handling security concerns in an EE application. Like the javax.javaee-api
dependency, the implementation is provided by the application container, so is not included in the WAR file.
auth0-java-mvc-commons: The Auth0 Java MVC SDK allows you to use Auth0 with Java for server-side MVC web applications. It generates the Authorize URL that your application needs to call in order to authenticate a user using Auth0.
If you are using Maven, add these dependencies to your pom.xml
:
<!-- pom.xml -->
+Set up dependencies
To integrate your Java EE application with Auth0, add the following dependencies:
javax.javaee-api: The Java EE 8 API necessary to write applications using Java EE 8. The actual implementation is provided by the application container, so it does not need to be included in the WAR file.
javax.security.enterprise: The Java EE 8 Security API that enables handling security concerns in an EE application. Like the javax.javaee-api
dependency, the implementation is provided by the application container, so is not included in the WAR file.
auth0-java-mvc-commons: The Auth0 Java MVC SDK allows you to use Auth0 with Java for server-side MVC web applications. It generates the Authorize URL that your application needs to call in order to authenticate a user using Auth0.
If you are using Maven, add these dependencies to your pom.xml
:
<!-- pom.xml -->
<dependency>
@@ -76,7 +76,7 @@ implementation 'com.auth0:mvc-auth-commons:1. '
-Configure your Java EE application
The sample that accompanies this tutorial is written using JSP and tested with the WildFly application server. You may need to adjust some of the steps if you working with a different application container or technologies.
Your Java EE application needs some information in order to authenticate users with your Auth0 application. The deployment descriptor web.xml
file can be used to store this information, though you could store them in a different secured location.
This information will be used to configure the auth0-java-mvc-commons library to enable users to login to your application. To learn more about the library, including its various configuration options, see the README of the library.
+Configure your Java EE application
The sample that accompanies this tutorial is written using JSP and tested with the WildFly application server. You may need to adjust some of the steps if you working with a different application container or technologies.
Your Java EE application needs some information in order to authenticate users with your Auth0 application. The deployment descriptor web.xml
file can be used to store this information, though you could store them in a different secured location.
This information will be used to configure the auth0-java-mvc-commons library to enable users to login to your application. To learn more about the library, including its various configuration options, see the README of the library.
@@ -101,7 +101,7 @@ implementation 'com.auth0:mvc-auth-commons:1. '
## Configure Java EE Security {{{ data-action="code" data-code="src/main/java/com/auth0/example/security/Auth0AuthenticationConfig.java" }}}
-The Java EE 8 Security API introduced the HttpAuthenticationMechanism
interface to enable applications to obtain a user's credentials. Default implementations exist for Basic and form-based authentication, and it provides an easy way to configure a custom authentication strategy.
To authenticate with Auth0, provide custom implementations of the following interfaces:
HttpAuthenticationMechanism: Responsible for handling the authentication workflow for users returning from Auth0. (JavaDoc).
IdentityStore: Responsible for validating the user's credentials (JavaDoc).
CallerPrincipal: Represents the caller principal of the current HTTP request (JavaDoc).
Credential: Represents the credential the caller will use to authenticate (JavaDoc).
First, make your Auth0 settings available to the application by creating an @ApplicationScoped bean to retrieve the values from the web context and make them available via getters.
Next, create a custom CallerPrincipal
that represents the caller of the current request:
// src/main/java/com/auth0/example/security/Auth0JwtPrincipal.java
+The Java EE 8 Security API introduced the HttpAuthenticationMechanism
interface to enable applications to obtain a user's credentials. Default implementations exist for Basic and form-based authentication, and it provides an easy way to configure a custom authentication strategy.
To authenticate with Auth0, provide custom implementations of the following interfaces:
HttpAuthenticationMechanism: Responsible for handling the authentication workflow for users returning from Auth0. (JavaDoc).
IdentityStore: Responsible for validating the user's credentials (JavaDoc).
CallerPrincipal: Represents the caller principal of the current HTTP request (JavaDoc).
Credential: Represents the credential the caller will use to authenticate (JavaDoc).
First, make your Auth0 settings available to the application by creating an @ApplicationScoped bean to retrieve the values from the web context and make them available via getters.
Next, create a custom CallerPrincipal
that represents the caller of the current request:
// src/main/java/com/auth0/example/security/Auth0JwtPrincipal.java
@@ -161,7 +161,7 @@ class Auth0JwtCredential implements Credential {
-You now have defined the classes that represent a calling principal and credential. Next, create a custom implementation of IdentityStore
. This class will be responsible for validating the user's credentials:
// src/main/java/com/auth0/example/security/Auth0JwtIdentityStore.java
+You now have defined the classes that represent a calling principal and credential. Next, create a custom implementation of IdentityStore
. This class will be responsible for validating the user's credentials:
// src/main/java/com/auth0/example/security/Auth0JwtIdentityStore.java
@@ -193,7 +193,7 @@ public class Auth0JwtIdentityStore implements IdentityStore {
-If the credential
is an Auth0Credential
, the calling user is authenticated and valid, so a CredentialValidationResult
created with the credential is returned to indicate success. If it is not an Auth0Credential
, return CredentialValidationResult.NOT_VALIDATED_RESULT
.
Before implementing the HttpAuthenticationMechanism
interface that will use all these collaborators, create a bean that will provide a configured instance of the AuthenticationController
from the Auth0 Java MVC SDK. The AuthenticationController
is used to build the authorization URL where users will login, and handle the token exchange to authenticate users.
If your Auth0 Application is configured to use the RS256 signing algorithm (the default when creating a new Auth0 Application), you need to configure a JwkProvider
to fetch the public key used to verify the token's signature. See the jwks-rsa-java repository to learn about additional configuration options.
If your Auth0 Application is configured to use the HS256 signing algorithm, there is no need to configure the JwkProvider
.
To learn more about the available signing algorithms, refer to the documentation.
The sample below shows how to configure the AuthenticationController
for use with the RS256 signing algorithm:
// src/main/java/com/auth0/example/security/Auth0AuthenticationProvider.java
+If the credential
is an Auth0Credential
, the calling user is authenticated and valid, so a CredentialValidationResult
created with the credential is returned to indicate success. If it is not an Auth0Credential
, return CredentialValidationResult.NOT_VALIDATED_RESULT
.
Before implementing the HttpAuthenticationMechanism
interface that will use all these collaborators, create a bean that will provide a configured instance of the AuthenticationController
from the Auth0 Java MVC SDK. The AuthenticationController
is used to build the authorization URL where users will login, and handle the token exchange to authenticate users.
If your Auth0 Application is configured to use the RS256 signing algorithm (the default when creating a new Auth0 Application), you need to configure a JwkProvider
to fetch the public key used to verify the token's signature. See the jwks-rsa-java repository to learn about additional configuration options.
If your Auth0 Application is configured to use the HS256 signing algorithm, there is no need to configure the JwkProvider
.
To learn more about the available signing algorithms, refer to the documentation.
The sample below shows how to configure the AuthenticationController
for use with the RS256 signing algorithm:
// src/main/java/com/auth0/example/security/Auth0AuthenticationProvider.java
@@ -297,12 +297,12 @@ public class Auth0AuthenticationMechanism implements HttpAuthenticationMechanism
-The class overrides the validateRequest
method, which is called on every request to our application, and is responsible for notifying the container of the authentication status.
This sample uses the Authorization Code Flow to exchange an Authorization Code for a token during the authentication flow. If this request is to the /callback
endpoint and contains the code
request parameter, it does a few important things:
Calls the handle
method of the AuthenticationController
to exchange the Authorization Code for an ID token and an access token.
Uses the ID token to create a new Auth0Credential
.
Calls the validate
method of the custom IdentityStore
implementation to obtain the validation result.
Notifies the application container of the login status.
If the requested resource is not /callback
, return httpMessageContext.doNothing()
to allow the request processing to continue. You will see shortly how to use the authentication information when triggering authentication and displaying web views.
Finally, note that the @AutoApplySession
annotation has been added to allow the container to create a session for the authenticated user.
+The class overrides the validateRequest
method, which is called on every request to our application, and is responsible for notifying the container of the authentication status.
This sample uses the Authorization Code Flow to exchange an Authorization Code for a token during the authentication flow. If this request is to the /callback
endpoint and contains the code
request parameter, it does a few important things:
Calls the handle
method of the AuthenticationController
to exchange the Authorization Code for an ID token and an access token.
Uses the ID token to create a new Auth0Credential
.
Calls the validate
method of the custom IdentityStore
implementation to obtain the validation result.
Notifies the application container of the login status.
If the requested resource is not /callback
, return httpMessageContext.doNothing()
to allow the request processing to continue. You will see shortly how to use the authentication information when triggering authentication and displaying web views.
Finally, note that the @AutoApplySession
annotation has been added to allow the container to create a session for the authenticated user.
## Trigger authentication {{{ data-action="code" data-code="src/main/java/com/auth0/example/web/LoginServlet.java" }}}
-To enable a user to log in, create a Servlet that will handle requests to the /login
path.
The LoginController
is responsible for redirecting the request to the proper authorization URL, where the user can authenticate with Auth0. It uses the AuthenticationController
from the Auth0 Java MVC SDK to build the correct authorization URL, using the configuration values injected via Auth0AuthenticationConfig
. By default, this sample requests the "openid profile email"
scopes, to allow the application to retrieve basic profile information from the authenticated user. You can read more about these scopes in the OpenID Connect Scopes documentation.
Once the user has entered their credentials and authorized the requested permissions, Auth0 will issue a request to the callbackUrl
, and include a code
query parameter which can be exchanged for an ID token and an access token. Recall that the Auth0HttpAuthenticationMechanism
created above handles this exchange so that it can notify the application container of authentication status. This allows the Servlet that handles requests to the /callback
path to simply forward the request on to the originally requested resource prior to logging in, or simply redirect to the home page:
// src/main/com/auth0/example/web/CallbackServlet.java
+To enable a user to log in, create a Servlet that will handle requests to the /login
path.
The LoginController
is responsible for redirecting the request to the proper authorization URL, where the user can authenticate with Auth0. It uses the AuthenticationController
from the Auth0 Java MVC SDK to build the correct authorization URL, using the configuration values injected via Auth0AuthenticationConfig
. By default, this sample requests the "openid profile email"
scopes, to allow the application to retrieve basic profile information from the authenticated user. You can read more about these scopes in the OpenID Connect Scopes documentation.
Once the user has entered their credentials and authorized the requested permissions, Auth0 will issue a request to the callbackUrl
, and include a code
query parameter which can be exchanged for an ID token and an access token. Recall that the Auth0HttpAuthenticationMechanism
created above handles this exchange so that it can notify the application container of authentication status. This allows the Servlet that handles requests to the /callback
path to simply forward the request on to the originally requested resource prior to logging in, or simply redirect to the home page:
// src/main/com/auth0/example/web/CallbackServlet.java
@@ -337,7 +337,7 @@ public class CallbackServlet extends HttpServlet {
## Display user information {{{ data-action="code" data-code="src/main/java/com/auth0/example/web/HomeServlet.java" }}}
-You can use the Auth0JwtPrincipal
to get profile information for the authenticated user. The HomeServlet.java
code sample demonstrates how to use the claims on the ID token to set profile data as a request attribute.
You can then use that profile information in your view to display information about the user:
<!-- src/main/webapp/WEB-INF/jsp/fragments/navbar.jspf -->
+You can use the Auth0JwtPrincipal
to get profile information for the authenticated user. The HomeServlet.java
code sample demonstrates how to use the claims on the ID token to set profile data as a request attribute.
You can then use that profile information in your view to display information about the user:
<!-- src/main/webapp/WEB-INF/jsp/fragments/navbar.jspf -->
@@ -399,7 +399,7 @@ public class CallbackServlet extends HttpServlet {
## Run the sample
-To build and run the sample, execute the wildfly:run Maven goal to start an embedded WildFly application server with this application deployed to it. See the WildFly Maven Plugin documentation for more information.
If you are using Linux or MacOS:
./mvnw clean wildfly:run
+To build and run the sample, execute the wildfly:run Maven goal to start an embedded WildFly application server with this application deployed to it. See the WildFly Maven Plugin documentation for more information.
If you are using Linux or MacOS:
./mvnw clean wildfly:run
diff --git a/articles/quickstart/webapp/java-spring-boot/interactive.md b/articles/quickstart/webapp/java-spring-boot/interactive.md
index f56ec70bb7..7f78b1680b 100644
--- a/articles/quickstart/webapp/java-spring-boot/interactive.md
+++ b/articles/quickstart/webapp/java-spring-boot/interactive.md
@@ -9,24 +9,24 @@ files:
- files/HomeController
- files/SecurityConfigWithLogout
github:
- path: https://github.com/auth0-samples/auth0-spring-boot-login-samples/tree/master/mvc-login
+ path: mvc-login
locale: en-US
---
# Add Login to your Spring Web Application
-Using Spring WebFlux?
This tutorial uses Spring MVC. If you are using Spring WebFlux, the steps to add authentication are similar, but some implementation details are different. Refer to the Spring Boot WebFlux Sample Code to see how to integrate Auth0 with your Spring Boot WebFlux application.
+Using Spring WebFlux?
This tutorial uses Spring MVC. If you are using Spring WebFlux, the steps to add authentication are similar, but some implementation details are different. Refer to the Spring Boot WebFlux Sample Code to see how to integrate Auth0 with your Spring Boot WebFlux application.
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to
http://localhost:3000/login/oauth2/code/okta
.
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.
If you are following along with our sample project, set this to
http://localhost:3000
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to
http://localhost:3000/login/oauth2/code/okta
.
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.
If you are following along with our sample project, set this to
http://localhost:3000
.
## Configure Sprint Boot application
-Add Spring dependencies
To integrate your Spring Boot application with Auth0, include the Okta Spring Boot Starter in your application's dependencies.
This guide uses Thymeleaf and the Spring Security integration module for the view layer. If you are using a different view technology, the Spring Security configuration and components remain the same.
If you're using Gradle, you can include these dependencies as shown below.
plugins {
+Add Spring dependencies
To integrate your Spring Boot application with Auth0, include the Okta Spring Boot Starter in your application's dependencies.
This guide uses Thymeleaf and the Spring Security integration module for the view layer. If you are using a different view technology, the Spring Security configuration and components remain the same.
If you're using Gradle, you can include these dependencies as shown below.
plugins {
id 'java'
@@ -125,7 +125,7 @@ implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect'
## Configure Spring Security {{{ data-action="code" data-code="application.yml" }}}
-The Okta Spring Boot Starter makes it easy to configure your application with Auth0. The sample below uses an application.yml
file, though you can also use properties files or any of the other supported externalization mechanisms.
#src/main/resources/application.yml
+The Okta Spring Boot Starter makes it easy to configure your application with Auth0. The sample below uses an application.yml
file, though you can also use properties files or any of the other supported externalization mechanisms.
#src/main/resources/application.yml
@@ -158,7 +158,7 @@ server:
## Add login to your application {{{ data-action="code" data-code="SecurityConfig.java" }}}
-To enable user login with Auth0, create a class that will register a SecurityFilterChain, and add the @Configuration
annotation.
You can configure the HttpSecurity instance to require authentication on all or certain paths. For example, to require authentication on all paths except the home page:
http.authorizeHttpRequests(authorize -> authorize
+To enable user login with Auth0, create a class that will register a SecurityFilterChain, and add the @Configuration
annotation.
You can configure the HttpSecurity instance to require authentication on all or certain paths. For example, to require authentication on all paths except the home page:
http.authorizeHttpRequests(authorize -> authorize
.requestMatchers("/").permitAll()
@@ -178,18 +178,18 @@ server:
## Add controller {{{ data-action="code" data-code="HomeController.java" }}}
-Create a controller to handle the incoming request. This controller renders the index.html
page. When the user authenticates, the application retrieves the users's profile information attributes to render the page.
spring boot step 6 checkpoint When you click the login link, verify the application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.
+Create a controller to handle the incoming request. This controller renders the index.html
page. When the user authenticates, the application retrieves the users's profile information attributes to render the page.
spring boot step 6 checkpoint When you click the login link, verify the application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.
- 
Auth0 enables the Google social provider by default on new tenants and offers you developer keys to test logging in with social identity providers. However, these developer keys have some limitations that may cause your application to behave differently. For more details on what this behavior may look like and how to fix it, consult the Test Social Connections with Auth0 Developer Keys document.
+ 
Auth0 enables the Google social provider by default on new tenants and offers you developer keys to test logging in with social identity providers. However, these developer keys have some limitations that may cause your application to behave differently. For more details on what this behavior may look like and how to fix it, consult the Test Social Connections with Auth0 Developer Keys document.
## Add logout to your application {{{ data-action="code" data-code="SecurityConfigWithLogout.java" }}}
-Now that users can log into your application, they need a way to log out. By default, when logout is enabled, Spring Security will log the user out of your application and clear the session. To enable successful logout of Auth0, you can provide a LogoutHandler
to redirect users to your Auth0 logout endpoint (https://{yourDomain}/v2/logout
) and then immediately redirect them to your application.
In the SecurityConfig
class, provide a LogoutHandler
that redirects to the Auth0 logout endpoint, and configure the HttpSecurity
to add the logout handler
spring boot step 7 checkpoint When you click logout link, the application should redirect you to the address you specified as one of the "Allowed Logout URLs" in the "Settings" and you are no longer logged in to your application.
+Now that users can log into your application, they need a way to log out. By default, when logout is enabled, Spring Security will log the user out of your application and clear the session. To enable successful logout of Auth0, you can provide a LogoutHandler
to redirect users to your Auth0 logout endpoint (https://{yourDomain}/v2/logout
) and then immediately redirect them to your application.
In the SecurityConfig
class, provide a LogoutHandler
that redirects to the Auth0 logout endpoint, and configure the HttpSecurity
to add the logout handler
spring boot step 7 checkpoint When you click logout link, the application should redirect you to the address you specified as one of the "Allowed Logout URLs" in the "Settings" and you are no longer logged in to your application.
diff --git a/articles/quickstart/webapp/java/interactive.md b/articles/quickstart/webapp/java/interactive.md
index 4043517a9f..8ed2921eff 100644
--- a/articles/quickstart/webapp/java/interactive.md
+++ b/articles/quickstart/webapp/java/interactive.md
@@ -10,7 +10,7 @@ files:
- files/HomeServlet
- files/LogoutServlet
github:
- path: https://github.com/auth0-samples/auth0-servlet-sample/tree/master/01-Login
+ path: 01-Login
locale: en-US
---
@@ -22,12 +22,12 @@ locale: en-US
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/
.
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.
If you are following along with our sample project, set this to http://localhost:3000/
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/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.
If you are following along with our sample project, set this to http://localhost:3000/
.
## Integrate Auth0 in your application
-Setup dependencies
To integrate your Java application with Auth0, add the following dependencies:
javax.servlet-api
: is the library that allows you to create Java Servlets. You then need to add a Server dependency like Tomcat or Gretty, which one is up to you. Check our sample code for more information.
auth0-java-mvc-commons: is the Java library that allows you to use Auth0 with Java for server-side MVC web apps. It generates the Authorize URL that you need to call in order to authenticate and validates the result received on the way back to finally obtain the Auth0 Tokens that identify the user.
If you are using Gradle, add them to your build.gradle
:
// build.gradle
+Setup dependencies
To integrate your Java application with Auth0, add the following dependencies:
javax.servlet-api
: is the library that allows you to create Java Servlets. You then need to add a Server dependency like Tomcat or Gretty, which one is up to you. Check our sample code for more information.
auth0-java-mvc-commons: is the Java library that allows you to use Auth0 with Java for server-side MVC web apps. It generates the Authorize URL that you need to call in order to authenticate and validates the result received on the way back to finally obtain the Auth0 Tokens that identify the user.
If you are using Gradle, add them to your build.gradle
:
// build.gradle
@@ -67,21 +67,9 @@ compile 'com.auth0:mvc-auth-commons:1.+'W
## Configure your Java application {{{ data-action="code" data-code="web.xml" }}}
-Your Java App needs some information in order to authenticate against your Auth0 account. The samples read this information from the deployment descriptor file `src/main/webapp/WEB-INF/web.xml`, but you could store them anywhere else.
-This information will be used to configure the **auth0-java-mvc-commons** library to enable users to login to your application. To learn more about the library, including its various configuration options, see the library's documentation.
+Your Java App needs some information in order to authenticate against your Auth0 account. The samples read this information from the deployment descriptor file src/main/webapp/WEB-INF/web.xml
, but you could store them anywhere else.
This information will be used to configure the auth0-java-mvc-commons library to enable users to login to your application. To learn more about the library, including its various configuration options, see the library's documentation.
Check populated attributes
If you downloaded this sample using the Download Sample button, the domain
, clientId
and clientSecret
attributes will be populated for you. You should verify that the values are correct, especially if you have multiple Auth0 applications in your account.
Project structure
The example project, which can be downloaded using the Download Sample button, has the following structure:
- src
-
-::: panel Check populated attributes
-If you downloaded this sample using the **Download Sample** button, the `domain`, `clientId` and `clientSecret` attributes will be populated for you. You should verify that the values are correct, especially if you have multiple Auth0 applications in your account.
-:::
-
-### Project structure
-
-The example project, which can be downloaded using the **Download Sample** button, has the following structure:
-
-```text
-- src
-- main
---- java
@@ -123,7 +111,7 @@ The example project, which can be downloaded using the **Download Sample** butto
## Create the AuthenticationController {{{ data-action="code" data-code="AuthenticationControllerProvider.java#5:26" }}}
-To enable users to authenticate, create an instance of the AuthenticationController
provided by the auth0-java-mvc-commons
SDK using the domain
, clientId
, and clientSecret
. The sample shows how to configure the component for use with tokens signed using the RS256 asymmetric signing algorithm, by specifying a JwkProvider
to fetch the public key used to verify the token's signature. See the jwks-rsa-java repository to learn about additional configuration options. If you are using HS256, there is no need to configure the JwkProvider
.
The AuthenticationController
does not store any context, and is inteded to be reused. Unneccessary creation may result in additonal resources being created which could impact performance.
+To enable users to authenticate, create an instance of the AuthenticationController
provided by the auth0-java-mvc-commons
SDK using the domain
, clientId
, and clientSecret
. The sample shows how to configure the component for use with tokens signed using the RS256 asymmetric signing algorithm, by specifying a JwkProvider
to fetch the public key used to verify the token's signature. See the jwks-rsa-java repository to learn about additional configuration options. If you are using HS256, there is no need to configure the JwkProvider
.
The AuthenticationController
does not store any context, and is inteded to be reused. Unneccessary creation may result in additonal resources being created which could impact performance.
## Login Redirection {{{ data-action="code" data-code="LoginServlet.java#21:23" }}}
@@ -142,24 +130,14 @@ The example project, which can be downloaded using the **Download Sample** butto
## Handle logout {{{ data-action="code" data-code="LogoutServlet.java#13:30" }}}
-To properly handle logout, we need to clear the session and log the user out of Auth0. This is handled in the `LogoutServlet` of our sample application.
-First, we clear the session by calling `request.getSession().invalidate()`. We then construct the logout URL, being sure to include the `returnTo` query parameter, which is where the user will be redirected to after logging out. Finally, we redirect the response to our logout URL.
+To properly handle logout, we need to clear the session and log the user out of Auth0. This is handled in the LogoutServlet
of our sample application.
First, we clear the session by calling request.getSession().invalidate()
. We then construct the logout URL, being sure to include the returnTo
query parameter, which is where the user will be redirected to after logging out. Finally, we redirect the response to our logout URL.
-## Run the sample {{{ data-action=code data-code="LogoutServlet.java#13:30" }}}
+## Run the sample
-To run the sample from a terminal, change the directory to the root folder of the project and execute the following line:
-```bash
-./gradlew clean appRun
-```
+To run the sample from a terminal, change the directory to the root folder of the project and execute the following line:
./gradlew clean app
-After a few seconds, the application will be accessible on `http://localhost:3000/`. Try to access the protected resource http://localhost:3000/portal/home and note how you're redirected by the `Auth0Filter` to the Auth0 Login Page. The widget displays all the social and database connections that you have defined for this application in the dashboard.
-
-
-
-After a successful authentication, you'll be able to see the home page contents.
-
-
+
-Log out by clicking the **logout** button at the top right of the home page.
+After a few seconds, the application will be accessible on http://localhost:3000/
. Try to access the protected resource http://localhost:3000/portal/home and note how you're redirected by the Auth0Filter
to the Auth0 Login Page. The widget displays all the social and database connections that you have defined for this application in the dashboard.

After a successful authentication, you'll be able to see the home page contents.

Log out by clicking the logout button at the top right of the home page.
diff --git a/articles/quickstart/webapp/laravel/interactive.md b/articles/quickstart/webapp/laravel/interactive.md
index 2078a374eb..070da053e0 100644
--- a/articles/quickstart/webapp/laravel/interactive.md
+++ b/articles/quickstart/webapp/laravel/interactive.md
@@ -5,57 +5,249 @@ interactive: true
files:
- files/routes/web
github:
- path: https://github.com/auth0-samples/laravel/tree/bf356d877b5dae566286fc8400da94b8b4b0ac76/sample
+ path: sample
locale: en-US
---
# Add Login to Your Laravel Application
-Auth0's Laravel SDK allows you to quickly add authentication, user profile management, and routing access control to your Laravel application. This guide demonstrates how to integrate Auth0 with a new (or existing) Laravel 9 or 10 application.
+Auth0's Laravel SDK allows you to quickly add authentication, user profile management, and routing access control to your Laravel application. This guide demonstrates how to integrate Auth0 with a new (or existing) Laravel 9 or 10 application.
Test Change
## Laravel Installation
-If you do not already have a Laravel application set up, open a shell to a suitable directory for a new project and run the following command:
composer create-project --prefer-dist laravel/laravel auth0-laravel-app ^9.0
All the commands in this guide assume you are running them from the root of your Laravel project, directory so you should cd
into the new project directory:
cd auth0-laravel-app
+If you do not already have a Laravel application set up, open a shell to a suitable directory for a new project and run the following command:
composer create-project --prefer-dist laravel/laravel auth0-laravel-app ^9.0
+
+
+
+All the commands in this guide assume you are running them from the root of your Laravel project, directory so you should cd
into the new project directory:
cd auth0-laravel-app
+
+
+
+
## SDK Installation
-Run the following command within your project directory to install the Auth0 Laravel SDK:
composer require auth0/login:^7.8 --update-with-all-dependencies
Then generate an SDK configuration file for your application:
php artisan vendor:publish --tag auth0
+Run the following command within your project directory to install the Auth0 Laravel SDK:
composer require auth0/login:^7.8 --update-with-all-dependencies
+
+
+
+Then generate an SDK configuration file for your application:
php artisan vendor:publish --tag auth0
+
+
+
+
## SDK Configuration
-Run the following command from your project directory to download the Auth0 CLI:
curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
Then authenticate the CLI with your Auth0 account, choosing "as a user" when prompted:
./auth0 login
Next, create a new application with Auth0:
You should also create a new API:
This produces two files in your project directory that configure the SDK.
As these files contain credentials it's important to treat these as sensitive. You should ensure you do not commit these to version control. If you're using Git, you should add them to your .gitignore
file:
echo ".auth0.*.json" >> .gitignore
+Run the following command from your project directory to download the Auth0 CLI:
curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
+
+
+
+Then authenticate the CLI with your Auth0 account, choosing "as a user" when prompted:
./auth0 login
+
+
+
+Next, create a new application with Auth0:
./auth0 apps create \
+
+ --name "My Laravel Application" \
+
+ --type "regular" \
+
+ --auth-method "post" \
+
+ --callbacks "http://localhost:8000/callback" \
+
+ --logout-urls "http://localhost:8000" \
+
+ --reveal-secrets \
+
+ --no-input \
+
+ --json > .auth0.app.json
+
+
+
+You should also create a new API:
./auth0 apis create \
+
+ --name "My Laravel Application's API" \
+
+ --identifier "https://github.com/auth0/laravel-auth0" \
+
+ --offline-access \
+
+ --no-input \
+
+ --json > .auth0.api.json
+
+
+
+This produces two files in your project directory that configure the SDK.
As these files contain credentials it's important to treat these as sensitive. You should ensure you do not commit these to version control. If you're using Git, you should add them to your .gitignore
file:
echo ".auth0.*.json" >> .gitignore
+
+
+
+
## Login Routes
-The SDK automatically registers all the necessary routes for your application's users to authenticate.
If you require more control over these, or if they conflict with existing routes in your application, you can manually register the SDK's controllers instead. Please see the SDK's README for advanced integrations.
+The SDK automatically registers all the necessary routes for your application's users to authenticate.
+
+
+
+**Routes**
+
+**Purpose**
+
+
+
+
+
+
+
+
+
+/login
+
+Initiates the authentication flow.
+
+
+
+
+
+/logout
+
+Logs the user out.
+
+
+
+
+
+/callback
+
+Handles the callback from Auth0.
+
+
+
+
+
+
If you require more control over these, or if they conflict with existing routes in your application, you can manually register the SDK's controllers instead. Please see the SDK's README for advanced integrations.
## Access Control {{{ data-action="code" data-code="routes/web.php#6:12" }}}
-Laravel's authentication facilities use "guards" to define how users are authenticated for each request. You can use the Auth0 SDK's authentication guard to restrict access to your application's routes.
To require users to authenticate before accessing a route, you can use Laravel's auth
middleware.
You can also require authenticated users to have specific permissions by combining this with Laravel's can
middleware.
+Laravel's authentication facilities use "guards" to define how users are authenticated for each request. You can use the Auth0 SDK's authentication guard to restrict access to your application's routes.
To require users to authenticate before accessing a route, you can use Laravel's auth
middleware.
Route::get('/private', function () {
+
+ return response('Welcome! You are logged in.');
+
+})->middleware('auth');
+
+
+
+You can also require authenticated users to have specific permissions by combining this with Laravel's can
middleware.
Route::get('/scope', function () {
+
+ return response('You have `read:messages` permission, and can therefore access this resource.');
+
+})->middleware('auth')->can('read:messages');
+
+
+
+
## User Information {{{ data-action="code" data-code="routes/web.php#14:24" }}}
-Information about the authenticated user is available through Laravel's Auth
Facade, or the auth()
helper function.
For example, to retrieve the user's identifier and email address:
+Information about the authenticated user is available through Laravel's Auth
Facade, or the auth()
helper function.
For example, to retrieve the user's identifier and email address:
Route::get('/', function () {
+
+ if (! auth()->check()) {
+
+ return response('You are not logged in.');
+
+ }
+
+
+
+ $user = auth()->user();
+
+ $name = $user->name ?? 'User';
+
+ $email = $user->email ?? '';
+
+
+
+ return response("Hello {$name}! Your email address is {$email}.");
+
+});;
+
+
+
+
## User Management {{{ data-action="code" data-code="routes/web.php#26:43" }}}
-You can update user information using the Auth0 Management API. All Management endpoints are accessible through the SDK's management()
method.
Before making Management API calls you must enable your application to communicate with the Management API. This can be done from the Auth0 Dashboard's API page, choosing Auth0 Management API
, and selecting the 'Machine to Machine Applications' tab. Authorize your Laravel application, and then click the down arrow to choose the scopes you wish to grant.
For the following example, in which we will update a user's metadata and assign a random favorite color, you should grant the read:users
and update:users
scopes. A list of API endpoints and the required scopes can be found in the Management API documentation.
A quick reference guide of all the SDK's Management API methods is available here.
+You can update user information using the Auth0 Management API. All Management endpoints are accessible through the SDK's management()
method.
Before making Management API calls you must enable your application to communicate with the Management API. This can be done from the Auth0 Dashboard's API page, choosing Auth0 Management API
, and selecting the 'Machine to Machine Applications' tab. Authorize your Laravel application, and then click the down arrow to choose the scopes you wish to grant.
For the following example, in which we will update a user's metadata and assign a random favorite color, you should grant the read:users
and update:users
scopes. A list of API endpoints and the required scopes can be found in the Management API documentation.
use Auth0\Laravel\Facade\Auth0;
+
+
+
+Route::get('/colors', function () {
+
+ $endpoint = Auth0::management()->users();
+
+
+
+ $colors = ['red', 'blue', 'green', 'black', 'white', 'yellow', 'purple', 'orange', 'pink', 'brown'];
+
+
+
+ $endpoint->update(
+
+ id: auth()->id(),
+
+ body: [
+
+ 'user_metadata' => [
+
+ 'color' => $colors[random_int(0, count($colors) - 1)]
+
+ ]
+
+ ]
+
+ );
+
+
+
+ $metadata = $endpoint->get(auth()->id());
+
+ $metadata = Auth0::json($metadata);
+
+
+
+ $color = $metadata['user_metadata']['color'] ?? 'unknown';
+
+ $name = auth()->user()->name;
+
+
+
+ return response("Hello {$name}! Your favorite color is {$color}.");
+
+})->middleware('auth');
+
+
+
+A quick reference guide of all the SDK's Management API methods is available here.
## Run the Application
-You are now ready to start your Laravel application, so it can accept requests:
php artisan serve
Laravel - Step 8 - Run the Application - Checkpoint Open your web browser and try accessing the following routes:
http://localhost:8000 to see the public route.
http://localhost:8000/private to be prompted to authenticate.
http://localhost:8000 to see the public route, now authenticated.
http://localhost:8000/scope to check if you have the read:messages
permission.
http://localhost:8000/update to update the user's profile.
http://localhost:8000/logout to log out.
+You are now ready to start your Laravel application, so it can accept requests:
php artisan serve
Laravel - Step 8 - Run the Application - Checkpoint Open your web browser and try accessing the following routes:
http://localhost:8000 to see the public route.
http://localhost:8000/private to be prompted to authenticate.
http://localhost:8000 to see the public route, now authenticated.
http://localhost:8000/scope to check if you have the read:messages
permission.
http://localhost:8000/update to update the user's profile.
http://localhost:8000/logout to log out.
- Additional Reading
User Repositories and Models extends the Auth0 Laravel SDK to use custom user models, and how to store and retrieve users from a database.
Hooking Events covers how to listen for events raised by the Auth0 Laravel SDK, to fully customize the behavior of your integration.
Management API support is built into the Auth0 Laravel SDK, allowing you to interact with the Management API from your Laravel application.
+ Additional Reading
User Repositories and Models extends the Auth0 Laravel SDK to use custom user models, and how to store and retrieve users from a database.
Hooking Events covers how to listen for events raised by the Auth0 Laravel SDK, to fully customize the behavior of your integration.
Management API support is built into the Auth0 Laravel SDK, allowing you to interact with the Management API from your Laravel application.
diff --git a/articles/quickstart/webapp/nextjs/01-login.md b/articles/quickstart/webapp/nextjs/01-login.md
index 74d19680bc..7bffa91d5f 100644
--- a/articles/quickstart/webapp/nextjs/01-login.md
+++ b/articles/quickstart/webapp/nextjs/01-login.md
@@ -14,7 +14,7 @@ useCase: quickstart
---
-<%= include('../_includes/_getting_started', { library: 'Next.js', callback: 'http://localhost:3000/auth/callback' }) %>
+<%= include('../_includes/_getting_started', { library: 'Next.js', callback: 'http://localhost:3000/api/auth/callback' }) %>
<%= include('../../../_includes/_logout_url', { returnTo: 'http://localhost:3000' }) %>
@@ -23,133 +23,98 @@ useCase: quickstart
Run the following command within your project directory to install the Auth0 Next.js SDK:
```sh
-npm install @auth0/nextjs-auth0
+npm install @auth0/nextjs-auth0@3
```
The SDK exposes methods and variables that help you integrate Auth0 with your Next.js application using Route Handlers on the backend and React Context with React Hooks on the frontend.
### Configure the SDK
-In the root directory of your project, create the file `.env.local` with the following environment variables:
+In the root directory of your project, add the file `.env.local` with the following environment variables:
```sh
AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
-APP_BASE_URL='http://localhost:3000'
-AUTH0_DOMAIN='https://${account.namespace}'
+AUTH0_BASE_URL='http://localhost:3000'
+AUTH0_ISSUER_BASE_URL='https://${account.namespace}'
AUTH0_CLIENT_ID='${account.clientId}'
AUTH0_CLIENT_SECRET='${account.clientSecret}'
-'If your application is API authorized add the variables AUTH0_AUDIENCE and AUTH0_SCOPE'
-AUTH0_AUDIENCE='your_auth_api_identifier'
-AUTH0_SCOPE='openid profile email read:shows'
```
- `AUTH0_SECRET`: A long secret value used to encrypt the session cookie. You can generate a suitable string using `openssl rand -hex 32` on the command line.
-- `APP_BASE_URL`: The base URL of your application
-- `AUTH0_DOMAIN`: The URL of your Auth0 tenant domain
-- `AUTH0_CLIENT_ID`: Your Auth0 application's Client ID
-- `AUTH0_CLIENT_SECRET`: Your Auth0 application's Client Secret
+- `AUTH0_BASE_URL`: The base URL of your application.
+- `AUTH0_ISSUER_BASE_URL`: The URL of your Auth0 tenant domain. If you are using a Custom Domain with Auth0, set this to the value of your Custom Domain instead of the value reflected in the "Settings" tab.
+- `AUTH0_CLIENT_ID`: Your Auth0 application's Client ID.
+- `AUTH0_CLIENT_SECRET`: Your Auth0 application's Client Secret.
-The SDK will read these values from the Node.js process environment and configure itself automatically.
+The SDK will read these values from the Node.js process environment and automatically configure itself.
-::: note
-Manually add the values for `AUTH0_AUDIENCE` and `AUTH_SCOPE` to the file `lib/auth0.js`. These values are not configured automatically.
-If you are using a Custom Domain with Auth0, set `AUTH0_DOMAIN` to the value of your Custom Domain instead of the value reflected in the application "Settings" tab.
-:::
+### Add the dynamic API route handler
-### Create the Auth0 SDK Client
+Create a file at `app/api/auth/[auth0]/route.js`. This is your Route Handler file with a Dynamic Route Segment.
-Create a file at `lib/auth0.js` to add an instance of the Auth0 client. This instance provides methods for handling authentication, sesssions and user data.
+Then, import the `handleAuth` method from the SDK and call it from the `GET` export.
```javascript
-// lib/auth0.js
-
-import { Auth0Client } from "@auth0/nextjs-auth0/server";
-
-// Initialize the Auth0 client
-export const auth0 = new Auth0Client({
- // Options are loaded from environment variables by default
- // Ensure necessary environment variables are properly set
- // domain: process.env.AUTH0_DOMAIN,
- // clientId: process.env.AUTH0_CLIENT_ID,
- // clientSecret: process.env.AUTH0_CLIENT_SECRET,
- // appBaseUrl: process.env.APP_BASE_URL,
- // secret: process.env.AUTH0_SECRET,
-
- authorizationParameters: {
- // In v4, the AUTH0_SCOPE and AUTH0_AUDIENCE environment variables for API authorized applications are no longer automatically picked up by the SDK.
- // Instead, we need to provide the values explicitly.
- scope: process.env.AUTH0_SCOPE,
- audience: process.env.AUTH0_AUDIENCE,
- }
-});
+// app/api/auth/[auth0]/route.js
+import { handleAuth } from '@auth0/nextjs-auth0';
+
+export const GET = handleAuth();
```
-### Add the Authentication Middleware
+This creates the following routes:
-The Next.js Middleware allows you to run code before a request is completed.
-Create a `middleware.ts` file. This file is used to enforce authentication on specific routes.
+- `/api/auth/login`: The route used to perform login with Auth0.
+- `/api/auth/logout`: The route used to log the user out.
+- `/api/auth/callback`: The route Auth0 will redirect the user to after a successful login.
+- `/api/auth/me`: The route to fetch the user profile from.
-```javascript
-import type { NextRequest } from "next/server";
-import { auth0 } from "./lib/auth0";
+::: note
+This QuickStart targets the Next.js App Router. If you're using the Pages Router, check out the example in the SDK's README.
+:::
-export async function middleware(request: NextRequest) {
- return await auth0.middleware(request);
-}
+### Add the `UserProvider` component
-export const config = {
- matcher: [
- /*
- * Match all request paths except for the ones starting with:
- * - _next/static (static files)
- * - _next/image (image optimization files)
- * - favicon.ico, sitemap.xml, robots.txt (metadata files)
- */
- "/((?!_next/static|_next/image|favicon.ico|sitemap.xml|robots.txt).*)",
- ],
-};
-```
+On the frontend side, the SDK uses React Context to manage the authentication state of your users. To make that state available to all your pages, you need to override the Root Layout component and wrap the `` tag with a `UserProvider` in the file `app/layout.jsx`.
-The `middleware` function intercepts incoming requests and applies Auth0's authentication logic. The `matcher` configuration ensures that the middleware runs on all routes except for static files and metadata.
+Create the file `app/layout.jsx` as follows:
-#### Auto-configured routes
+```jsx
+// app/layout.jsx
+import { UserProvider } from '@auth0/nextjs-auth0/client';
-Using the SDK's middleware auto-configures the following routes:
+export default function RootLayout({ children }) {
+ return (
+
+
+ {children}
+
+
+ );
+}
+```
-- `/auth/login`: The route to perform login with Auth0
-- `/auth/logout`: The route to log the user out
-- `/auth/callback`: The route Auth0 will redirect the user to after a successful login
-- `/auth/profile`: The route to fetch the user profile
-- `/auth/access-token`: The route to verify the user's session and return an access token (which automatically refreshes if a refresh token is available)
-- `/auth/backchannel-logout`: The route to receive a `logout_token` when a configured Back-Channel Logout initiator occurs
+The authentication state exposed by `UserProvider` can be accessed in any Client Component using the `useUser()` hook.
-:::note
-The `/auth/access-token` route is enabled by default, but is only neccessary when the access token is needed on the client-side. If this isn't something you need, you can disable this endpoint by setting `enableAccessTokenEndpoint` to `false`.
+:::panel Checkpoint
+Now that you have added the dynamic route and `UserProvider`, run your application to verify that your application is not throwing any errors related to Auth0.
:::
## Add Login to Your Application
-Users can now log in to your application at `/auth/login` route provided by the SDK. Use an **anchor tag** to add a link to the login route to redirect your users to the Auth0 Universal Login Page, where Auth0 can authenticate them. Upon successful authentication, Auth0 redirects your users back to your application.
-
-```html
-Login
-```
+Users can now log in to your application by visiting the `/api/auth/login` route provided by the SDK. Add a link that points to the login route using an **anchor tag**. Clicking it redirects your users to the Auth0 Universal Login Page, where Auth0 can authenticate them. Upon successful authentication, Auth0 will redirect your users back to your application.
:::note
-Next.js suggests using Link components instead of anchor tags, but since these are API routes and not pages, anchor tags are needed.
+Next linting rules might suggest using the `Link` component instead of an anchor tag. The `Link` component is meant to perform client-side transitions between pages. As the link points to an API route and not to a page, you should keep it as an anchor tag.
:::
+```html
+Login
+```
+
:::panel Checkpoint
-Add the login link to your application. Select it and verify that your Next.js application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.
+Add the login link to your application. When you click it, verify that your Next.js application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.
Once that's complete, verify that Auth0 redirects back to your application.
-
-If you are following along with the sample app project from the top of this page, run the command:
-
-```sh
-npm i && npm run dev
-```
-and visit http://localhost:3000 in your browser.
:::

@@ -158,14 +123,14 @@ and visit http://localhost:3000 in your browser.
## Add Logout to Your Application
-Now that you can log in to your Next.js application, you need a way to log out. Add a link that points to the `/auth/logout` API route. To learn more, read Log Users out of Auth0 with OIDC Endpoint.
+Now that you can log in to your Next.js application, you need a way to log out. Add a link that points to the `/api/auth/logout` API route. Clicking it redirects your users to your Auth0 logout endpoint (`https://YOUR_DOMAIN/v2/logout`) and then immediately redirects them back to your application.
```html
-Logout
+Logout
```
:::panel Checkpoint
-Add the logout link to your application. When you select it, verify that your Next.js application redirects you to the address you specified as one of the "Allowed Logout URLs" in the application "Settings".
+Add the logout link to your application. When you click it, verify that your Next.js application redirects you to the address you specified as one of the "Allowed Logout URLs" in the "Settings".
:::
## Show User Profile Information
@@ -179,24 +144,22 @@ The profile information is available through the `user` property exposed by the
```jsx
'use client';
-export default function Profile() {
- const { user, isLoading } = useUser();
+import { useUser } from '@auth0/nextjs-auth0/client';
+
+export default function ProfileClient() {
+ const { user, error, isLoading } = useUser();
+
+ if (isLoading) return Loading...;
+ if (error) return {error.message};
+
return (
- <>
- {isLoading && Loading...
}
- {user && (
-
-
- {user.name}
- {user.email}
- {JSON.stringify(user, null, 2)}
-
- )}
- >
+ user && (
+
+
+ {user.name}
+ {user.email}
+
+ )
);
}
```
@@ -212,19 +175,32 @@ The `user` property contains sensitive information and artifacts related to the
The profile information is available through the `user` property exposed by the `getSession` function. Take this Server Component as an example of how to use it:
```jsx
-import { auth0 } from "@/lib/auth0";
+import { getSession } from '@auth0/nextjs-auth0';
export default async function ProfileServer() {
- const { user } = await auth0.getSession();
- return ( user && (
{user.name}
{user.email}
) );
-}
+ const { user } = await getSession();
+ return (
+ user && (
+
+
+ {user.name}
+ {user.email}
+
+ )
+ );
+}
```
:::panel Checkpoint
Verify that you can display the `user.name` or any other `user` property within a component correctly after you have logged in.
-:::
+:::
## What's next?
-We put together a few examples on how to use nextjs-auth0 for more advanced use cases.
+We put together a few examples of how to use nextjs-auth0 in more advanced use cases:
+
+- Protecting a Server Side Rendered (SSR) Page
+- Protecting a Client Side Rendered (CSR) Page
+- Protect an API Route
+- Access an External API from an API Route
diff --git a/articles/quickstart/webapp/nextjs/download.md b/articles/quickstart/webapp/nextjs/download.md
index b80e4d475b..e1adb730a4 100644
--- a/articles/quickstart/webapp/nextjs/download.md
+++ b/articles/quickstart/webapp/nextjs/download.md
@@ -4,7 +4,7 @@ To run the sample follow these steps:
1) Set the **Allowed Callback URLs** in the Application Settings to
```text
-http://localhost:3000/auth/callback
+http://localhost:3000/api/auth/callback
```
2) Set **Allowed Logout URLs** in the Application Settings to
diff --git a/articles/quickstart/webapp/nextjs/files/.env.md b/articles/quickstart/webapp/nextjs/files/.env.md
index 515f3b4950..e4de060766 100644
--- a/articles/quickstart/webapp/nextjs/files/.env.md
+++ b/articles/quickstart/webapp/nextjs/files/.env.md
@@ -6,7 +6,7 @@ language:
```
AUTH0_SECRET='use [openssl rand -hex 32] to generate a 32 bytes value'
APP_BASE_URL='http://localhost:3000'
-AUTH0_ISSUER_BASE_URL='https://${account.namespace}'
+AUTH0_DOMAIN='https://${account.namespace}'
AUTH0_CLIENT_ID='${account.clientId}'
AUTH0_CLIENT_SECRET='${account.clientSecret}'
```
diff --git a/articles/quickstart/webapp/nextjs/index.yml b/articles/quickstart/webapp/nextjs/index.yml
index 2fc7d9d1fc..ad6a5b3b9a 100644
--- a/articles/quickstart/webapp/nextjs/index.yml
+++ b/articles/quickstart/webapp/nextjs/index.yml
@@ -23,7 +23,7 @@ seo_alias: nextjs
show_releases: true
show_steps: true
requirements:
- - Next.js 15.2.4+
+ - Next.js 13.4+
default_article: 01-login
articles:
- 01-login
diff --git a/articles/quickstart/webapp/nextjs/interactive.md b/articles/quickstart/webapp/nextjs/interactive.md
index 9ce73ba2a8..12be362c62 100644
--- a/articles/quickstart/webapp/nextjs/interactive.md
+++ b/articles/quickstart/webapp/nextjs/interactive.md
@@ -8,7 +8,7 @@ files:
- files/src/middleware
- files/src/app/page
github:
- path: https://github.com/auth0-samples/auth0-nextjs-samples/tree/main/Sample-01
+ path: Sample-01
locale: en-US
---
@@ -20,22 +20,17 @@ locale: en-US
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/auth/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.
If you are following along with our sample project, set this to http://localhost:3000
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/auth/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.
If you are following along with our sample project, set this to http://localhost:3000
.
## Install the Auth0 Next.js v4 SDK
-Run the following command within your project directory to install the Auth0 Next.js SDK:
-```sh
-npm i @auth0/nextjs-auth0
-```
-
-The SDK exposes methods and variables that help you integrate Auth0 with your Next.js application using Route Handlers on the backend and React Context with React Hooks on the frontend.
+Run the following command within your project directory to install the Auth0 Next.js SDK:
npm i @auth0/nextjs-auth0
The SDK exposes methods and variables that help you integrate Auth0 with your Next.js application using Route Handlers on the backend and React Context with React Hooks on the frontend.
## Configure the SDK {{{ data-action="code" data-code=".env.local" }}}
-In the root directory of your project, add the file .env.local
with the following environment variables:
AUTH0_SECRET
: A long secret value used to encrypt the session cookie. You can generate a suitable string using openssl rand -hex 32
on the command line.
APP_BASE_URL
: The base URL of your application.
AUTH0_ISSUER_BASE_URL
: The URL of your Auth0 tenant domain. If you are using a Custom Domain with Auth0, set this to the value of your Custom Domain instead of the value reflected in the "Settings" tab.
AUTH0_CLIENT_ID
: Your Auth0 application's Client ID.
AUTH0_CLIENT_SECRET
: Your Auth0 application's Client Secret.
The SDK will read these values from the Node.js process environment and automatically configure itself.
+In the root directory of your project, add the file .env.local
with the following environment variables:
AUTH0_SECRET
: A long secret value used to encrypt the session cookie. You can generate a suitable string using openssl rand -hex 32
on the command line.
APP_BASE_URL
: The base URL of your application.
AUTH0_DOMAIN
: The URL of your Auth0 tenant domain. If you are using a Custom Domain with Auth0, set this to the value of your Custom Domain instead of the value reflected in the "Settings" tab.
AUTH0_CLIENT_ID
: Your Auth0 application's Client ID.
AUTH0_CLIENT_SECRET
: Your Auth0 application's Client Secret.
The SDK will read these values from the Node.js process environment and automatically configure itself.
## Create the Auth0 SDK Client {{{ data-action="code" data-code="src/lib/auth0.ts" }}}
@@ -55,10 +50,10 @@ The SDK exposes methods and variables that help you integrate Auth0 with your Ne
## Run Your Application
-Run this command to start your Next.js development server:
npm run dev
Visit the url http://localhost:3000
in your browser.
You will see:
A Sign up and Log in button if the user is not authenticated.
A welcome message and a Log out button if the user is authenticated.
Checkpoint Run Your application.
Verify that your Next.js application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.
Once that's complete, verify that Auth0 redirects back to your application.
+Run this command to start your Next.js development server:
npm run dev
Visit the url http://localhost:3000
in your browser.
You will see:
A Sign up and Log in button if the user is not authenticated.
A welcome message and a Log out button if the user is authenticated.
Checkpoint Run Your application.
Verify that your Next.js application redirects you to the Auth0 Universal Login page and that you can now log in or sign up using a username and password or a social provider.
Once that's complete, verify that Auth0 redirects back to your application.
- Sorry about that. Here's a couple of things to double check:
are your environment variables populated correctly?
make sure that "Allowed Callback URLs" is configured correctly in your tenant
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple of things to double check:
are your environment variables populated correctly?
make sure that "Allowed Callback URLs" is configured correctly in your tenant
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/webapp/nginx-plus/interactive.md b/articles/quickstart/webapp/nginx-plus/interactive.md
index 85e6a01551..21f5b36f6e 100644
--- a/articles/quickstart/webapp/nginx-plus/interactive.md
+++ b/articles/quickstart/webapp/nginx-plus/interactive.md
@@ -7,8 +7,6 @@ files:
- files/openid_connection_configuration
- files/openid_connect
- files/frontend
-github:
- path: https://github.com/nginxinc/nginx-openid-connect
locale: en-US
---
@@ -42,7 +40,7 @@ locale: en-US
-Next, add your tenant’s logout URL to your openid_connect_configuration.conf
file.
+Next, add your tenant’s logout URL to your openid_connect_configuration.conf
file.
## Configure Accept-Encoding header for token and JWKS endpoints {{{ data-action="code" data-code="openid_connect.server_conf" }}}
diff --git a/articles/quickstart/webapp/php/interactive.md b/articles/quickstart/webapp/php/interactive.md
index 7f4905f4b5..b24126c7d2 100644
--- a/articles/quickstart/webapp/php/interactive.md
+++ b/articles/quickstart/webapp/php/interactive.md
@@ -10,7 +10,7 @@ files:
- files/router
- files/callback
github:
- path: https://github.com/auth0-samples/auth0-php-web-app/tree/main/app
+ path: app
locale: en-US
---
@@ -22,12 +22,12 @@ locale: en-US
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/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.
If you are following along with our sample project, set this to http://localhost:3000
.
Configure Allowed Web Origins
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
If you are following along with our sample project, set this to http://localhost:3000
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/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.
If you are following along with our sample project, set this to http://localhost:3000
.
Configure Allowed Web Origins
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
If you are following along with our sample project, set this to http://localhost:3000
.
## Install the Auth0 PHP SDK {{{ data-action="code" data-code="index.php" }}}
-Auth0 provides a PHP SDK (Auth0-PHP) to simplify the process of implementing Auth0 authentication and authorization in PHP apps.
The Auth0 PHP SDK requires PSR-17 and PSR-18 compatible HTTP libraries to be installed for managing network requests. If you don't have libraries available, you can install reliable choices by running the following commands in your terminal:
cd <your-project-directory>
+Auth0 provides a PHP SDK (Auth0-PHP) to simplify the process of implementing Auth0 authentication and authorization in PHP apps.
The Auth0 PHP SDK requires PSR-17 and PSR-18 compatible HTTP libraries to be installed for managing network requests. If you don't have libraries available, you can install reliable choices by running the following commands in your terminal:
cd <your-project-directory>
composer require symfony/http-client nyholm/psr7
@@ -37,7 +37,7 @@ composer require symfony/http-client nyholm/psr7
-Configure the Auth0 SDK
Create a new file in your application called index.php
, and copy in the code from the interactive panel to the right under the index.php tab.
For the SDK to function properly, you must set the following properties in the Auth0 SDK during initialization:
domain
: The domain of your Auth0 tenant. Generally, you can 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.
clientId
: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.
clientSecret
: The secret of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client Secret field.
redirectUri
: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. You can also find this value in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.
cookieSecret
: A long secret value used to encrypt the session cookie. You can generate a suitable string by running openssl rand -hex 32
in your terminal.
PHP Step 2 Checkpoint Your Auth0 SDK should now be properly configured. Run your application to verify that:
The SDK is initializing correctly.
Your application is not throwing any errors related to Auth0.
+Configure the Auth0 SDK
Create a new file in your application called index.php
, and copy in the code from the interactive panel to the right under the index.php tab.
For the SDK to function properly, you must set the following properties in the Auth0 SDK during initialization:
domain
: The domain of your Auth0 tenant. Generally, you can 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.
clientId
: The ID of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client ID field.
clientSecret
: The secret of the Auth0 Application you set up earlier in this quickstart. You can find this in the Auth0 Dashboard under your Application's Settings in the Client Secret field.
redirectUri
: The URL in your application that you would like Auth0 to redirect users to after they have authenticated. This corresponds to the callback URL you set up earlier in this quickstart. You can also find this value in the Auth0 Dashboard under your Application's Settings in the Callback URLs field. Make sure what you enter in your code matches what you set up earlier or your users will see an error.
cookieSecret
: A long secret value used to encrypt the session cookie. You can generate a suitable string by running openssl rand -hex 32
in your terminal.
PHP Step 2 Checkpoint Your Auth0 SDK should now be properly configured. Run your application to verify that:
The SDK is initializing correctly.
Your application is not throwing any errors related to Auth0.
@@ -61,28 +61,28 @@ composer require symfony/http-client nyholm/psr7
- Sorry about that. Here's a couple things to double check:
You configured the correct redirectUri
.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
You configured the correct redirectUri
.
Still having issues? Check out our documentation or visit our community page to get more help.
## Add logout to your application {{{ data-action="code" data-code="logout.php" }}}
-Users who log in to your project will also need a way to log out. We will handle a logout button using the SDK’s logout()
method. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to the logout URL you set up earlier in this quickstart.
Create a new file in your application called logout.php
for handling the process, and copy in the code from the interactive panel, which contains the logic needed for logout. Then, update your index.php
file to include the logout button.
PHP Section 5 Checkpoint Run your application and click the logout button, verify that:
Your application redirects you to the address you specified as one of the Allowed Logout URLs in your Application Settings.
You are no longer logged in to your application.
+Users who log in to your project will also need a way to log out. We will handle a logout button using the SDK’s logout()
method. When users log out, they will be redirected to your Auth0 logout endpoint, which will then immediately redirect them to the logout URL you set up earlier in this quickstart.
Create a new file in your application called logout.php
for handling the process, and copy in the code from the interactive panel, which contains the logic needed for logout. Then, update your index.php
file to include the logout button.
PHP Section 5 Checkpoint Run your application and click the logout button, verify that:
Your application redirects you to the address you specified as one of the Allowed Logout URLs in your Application Settings.
You are no longer logged in to your application.
- Sorry about that. Here's a couple things to double check:
You configured the correct Logout URL.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
You configured the correct Logout URL.
Still having issues? Check out our documentation or visit our community page to get more help.
## Show User Profile Information {{{ data-action="code" data-code="profile.php" }}}
-Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project.
The Auth0 PHP SDK provides user information through the getCredentials()
method. Review the profile.php
code in the interactive panel to see an example of how to use it.
Because the method contains sensitive information related to the user's identity, its availability depends on the user's authentication status. To prevent render errors, you should always check if the getCredentials()
method returns an object
or null
to determine whether Auth0 has authenticated the user before your application consumes the results.
Php section 6 Checkpoint Verify that:
You can display the nickname
or any other user property correctly after you have logged in.
+Now that your users can log in and log out, you will likely want to be able to retrieve the profile information associated with authenticated users. For example, you may want to be able to display a logged-in user’s name or profile picture in your project.
The Auth0 PHP SDK provides user information through the getCredentials()
method. Review the profile.php
code in the interactive panel to see an example of how to use it.
Because the method contains sensitive information related to the user's identity, its availability depends on the user's authentication status. To prevent render errors, you should always check if the getCredentials()
method returns an object
or null
to determine whether Auth0 has authenticated the user before your application consumes the results.
Php section 6 Checkpoint Verify that:
You can display the nickname
or any other user property correctly after you have logged in.
- Sorry about that. Here's a couple things to double check:
You created the profile.php
file and are logged in.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here's a couple things to double check:
You created the profile.php
file and are logged in.
Still having issues? Check out our documentation or visit our community page to get more help.
diff --git a/articles/quickstart/webapp/python/interactive.md b/articles/quickstart/webapp/python/interactive.md
index 546b91f9d5..f4718d9568 100644
--- a/articles/quickstart/webapp/python/interactive.md
+++ b/articles/quickstart/webapp/python/interactive.md
@@ -6,19 +6,19 @@ files:
- files/server
- files/templates/home
github:
- path: https://github.com/auth0-samples/auth0-python-web-app/tree/master/01-Login
+ path: 01-Login
locale: en-US
---
# Add Login to Your Python Flask Application
-Auth0 allows you to add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with a Python Flask application using the Authlib SDK.
+Auth0 allows you to add authentication and gain access to user profile information in your application. This guide demonstrates how to integrate Auth0 with a Python Flask application using the Authlib SDK.
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/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.
If you are following along with our sample project, set this to http://localhost:3000
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/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.
If you are following along with our sample project, set this to http://localhost:3000
.
## Install dependencies
@@ -65,7 +65,7 @@ APP_SECRET_KEY=
## Setup your application {{{ data-action="code" data-code="templates/home.html" }}}
-Next, set up your application. Create a server.py
file in your project directory - this file will contain your application logic.
Import all the libraries your application needs.
Load the configuration .env
file you made in the previous step.
Configure Authlib to handle your application's authentication with Auth0. To learn more about the configuration options available for Authlib's OAuth register()
method from their documentation.
+Next, set up your application. Create a server.py
file in your project directory - this file will contain your application logic.
Import all the libraries your application needs.
Load the configuration .env
file you made in the previous step.
Configure Authlib to handle your application's authentication with Auth0. To learn more about the configuration options available for Authlib's OAuth register()
method from their documentation.
## Setup your routes {{{ data-action="code" data-code="server.py" }}}
@@ -84,10 +84,10 @@ APP_SECRET_KEY=
-Python Step 7 Checkpoint Visit http://localhost:3000 to verify. You should find a login button routing to Auth0 for login, then back to your application to see your profile information.
+Python Step 7 Checkpoint Visit http://localhost:3000 to verify. You should find a login button routing to Auth0 for login, then back to your application to see your profile information.
- If your application did not start successfully:
Verify any errors in the console.
Verify the domain and Client ID imported correctly.
Verify your tenant configuration.
Still having issues? Check out our documentation or visit our community page to get more help
+ If your application did not start successfully:
Verify any errors in the console.
Verify the domain and Client ID imported correctly.
Verify your tenant configuration.
Still having issues? Check out our documentation or visit our community page to get more help
diff --git a/articles/quickstart/webapp/rails/interactive.md b/articles/quickstart/webapp/rails/interactive.md
index 680d7f6677..9e73fd88ea 100644
--- a/articles/quickstart/webapp/rails/interactive.md
+++ b/articles/quickstart/webapp/rails/interactive.md
@@ -9,7 +9,7 @@ files:
- files/routes
- files/secured
github:
- path: https://github.com/auth0-samples/auth0-rubyonrails-sample/tree/master/sample
+ path: sample
locale: en-US
---
@@ -21,12 +21,12 @@ locale: en-US
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/auth/auth0/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.
If you are following along with our sample project, set this to http://localhost:3000
.
Configure Allowed Web Origins
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
If you are following along with our sample project, set this to http://localhost:3000
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
If you are following along with our sample project, set this to http://localhost:3000/auth/auth0/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.
If you are following along with our sample project, set this to http://localhost:3000
.
Configure Allowed Web Origins
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
If you are following along with our sample project, set this to http://localhost:3000
.
## Add dependencies
-Use omniauth-auth0
, a custom OmniAuth strategy, to handle the authentication flow.
Add the following dependencies to your Gemfile
:
gem 'omniauth-auth0', '~> 3.0'
+Use omniauth-auth0
, a custom OmniAuth strategy, to handle the authentication flow.
Add the following dependencies to your Gemfile
:
gem 'omniauth-auth0', '~> 3.0'
gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authentication requests
@@ -42,12 +42,12 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authenticati
## Configure the OmniAuth middleware {{{ data-action="code" data-code="auth0.rb" }}}
-Create the following initializer file ./config/initializers/auth0.rb
and configure the OmniAuth middleware with the configuration file you created in the previous step.
Ensure that callback_path
matches the value given in the "Allowed Callback URLs" setting in your Auth0 application.
+Create the following initializer file ./config/initializers/auth0.rb
and configure the OmniAuth middleware with the configuration file you created in the previous step.
Ensure that callback_path
matches the value given in the "Allowed Callback URLs" setting in your Auth0 application.
## Add an Auth0 controller {{{ data-action="code" data-code="auth0_controller.rb" }}}
-Create an Auth0 controller to handle the authentication callback, logout
action, and methods for constructing the logout URL.
Run the command: rails generate controller auth0 callback failure logout --skip-assets --skip-helper --skip-routes --skip-template-engine
.
Inside the callback method, assign the hash of user information - returned as request.env['omniauth.auth']
- to the active session.
To configure logout, clear all the objects stored within the session by calling the reset_session
method within the logout
action. Then, redirect to the Auth0 logout endpoint. To learn more about reset_session
, read Ruby on Rails ActionController documentation.
+Create an Auth0 controller to handle the authentication callback, logout
action, and methods for constructing the logout URL.
Run the command: rails generate controller auth0 callback failure logout --skip-assets --skip-helper --skip-routes --skip-template-engine
.
Inside the callback method, assign the hash of user information - returned as request.env['omniauth.auth']
- to the active session.
To configure logout, clear all the objects stored within the session by calling the reset_session
method within the logout
action. Then, redirect to the Auth0 logout endpoint. To learn more about reset_session
, read Ruby on Rails ActionController documentation.
## Configure routes {{{ data-action="code" data-code="routes.rb" }}}
@@ -56,14 +56,14 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authenticati
- Sorry about that. Please double-check that the previous steps completed without error.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Please double-check that the previous steps completed without error.
Still having issues? Check out our documentation or visit our community page to get more help.
## Add login to your application
-A user can now log into your application by visiting the /auth/auth0
endpoint.
To prevent forged authentication requests, use the link_to
or button_to
helper methods with the :post
method.
<!-- Place a login button anywhere on your application -->
+A user can now log into your application by visiting the /auth/auth0
endpoint.
To prevent forged authentication requests, use the link_to
or button_to
helper methods with the :post
method.
<!-- Place a login button anywhere on your application -->
\${ "<\%= button_to 'Login', '/auth/auth0', method: :post %>" }
@@ -73,7 +73,7 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authenticati
- Sorry about that. Here are a couple of things you can check:
Ensure that the correct URLs have been set in your Auth0 application as per the first step in this quickstart
Check that all the required gems installed correctly
Check that the routes have been set up and the Auth0 configuration has been set up in your app
Check the logs for any other errors or messages that may have prevented login from working
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here are a couple of things you can check:
Ensure that the correct URLs have been set in your Auth0 application as per the first step in this quickstart
Check that all the required gems installed correctly
Check that the routes have been set up and the Auth0 configuration has been set up in your app
Check the logs for any other errors or messages that may have prevented login from working
Still having issues? Check out our documentation or visit our community page to get more help.
@@ -90,15 +90,14 @@ gem 'omniauth-rails_csrf_protection', '~> 1.0' # prevents forged authenticati
- Sorry about that. Here are a couple of things you can check:
Ensure that the correct URLs have been set in your Auth0 client as per the first step in this quickstart
Check that the routes have been set up and the Auth0 configuration has been set up in your app
Check the logs for any other errors or messages that may have prevented login from working
Still having issues? Check out our documentation or visit our community page to get more help.
+ Sorry about that. Here are a couple of things you can check:
Ensure that the correct URLs have been set in your Auth0 client as per the first step in this quickstart
Check that the routes have been set up and the Auth0 configuration has been set up in your app
Check the logs for any other errors or messages that may have prevented login from working
Still having issues? Check out our documentation or visit our community page to get more help.
## Show user profile information {{{ data-action="code" data-code="routes.rb" }}}
-To display the user's profile, your application should provide a protected route. You can use a Concern to control access to routes that can be shared across multiple controllers. The concern should automatically redirect to Auth0 when the user is unauthenticated. Otherwise, the concern should return the current user profile.
-To display the user's profile, your application should provide a protected route. You can use a Concern to control access to routes that can be shared across multiple controllers. The concern should automatically redirect to Auth0 when the user is unauthenticated. Otherwise, the concern should return the current user profile.
Once you have a Concern, include it in any controller that requires a logged-in user. You can then access the user from the session session[:userinfo]
as in the following example:
class DashboardController < ApplicationController
+To display the user's profile, your application should provide a protected route. You can use a Concern to control access to routes that can be shared across multiple controllers. The concern should automatically redirect to Auth0 when the user is unauthenticated. Otherwise, the concern should return the current user profile.
Once you have a Concern, include it in any controller that requires a logged-in user. You can then access the user from the session session[:userinfo]
as in the following example:
class DashboardController < ApplicationController
include Secured
diff --git a/fr-ca/articles/quickstart/backend/acul/interactive.md b/fr-ca/articles/quickstart/backend/acul/interactive.md
index 4fb2d96313..cae5bcb1fd 100644
--- a/fr-ca/articles/quickstart/backend/acul/interactive.md
+++ b/fr-ca/articles/quickstart/backend/acul/interactive.md
@@ -7,7 +7,7 @@ files:
- files/auth_config
- files/index
github:
- path: https://github.com/auth0-samples/auth0-react-samples/tree/master/Sample-01
+ path: Sample-01
locale: fr-CA
---
@@ -19,12 +19,12 @@ locale: fr-CA
## Configure Auth0
-To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000
.
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.
Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000
.
Configure Allowed Web Origins
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000
.
+To use Auth0 services, you’ll 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 the project you are developing.
Configure an application
Use the interactive selector to create a new Auth0 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.
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.
Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000
.
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.
Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000
.
Configure Allowed Web Origins
An Allowed Web Origin is a URL that you want to be allowed to access to your authentication flow. This must contain the URL of your project. If not properly set, your project will be unable to silently refresh authentication tokens, so your users will be logged out the next time they visit your application or refresh a page.
Si vous suivez notre exemple de projet, définissez cette URL comme suit : http://localhost:3000
.
## Configure ACUL for Login ID screen {{{ data-action="code" data-code="settings.json" }}}
-Use Auth0 CLI to enable ACLU Login ID screen in your tenant.
+
Use Auth0 CLI to enable ACLU Login ID screen in your tenant.
@@ -55,11 +55,11 @@ npm install
-ACUL Login ID screen Step 2 - Checkpoint Open your application (default: http://localhost:3000)
Select the Log In button on the sample app
You should be redirected to your Auth0 domain
After selecting Log In, you should see a blank page.
This is expected! It means Auth0 is trying to load your custom UI assets, which we have not created yet.
+Étape 2 : Point de contrôle – Écran d’identification de connexion ACUL Ouvrez votre application (par défaut : http://localhost:3000)
Sélectionnez le bouton Log In (Connexion) sur l’exemple d’application
Vous devriez être redirigé vers votre domaine Auth0
Connectez-vous, vous devriez voir une page blanche.
C’est normal! Cela signifie qu’Auth0 tente de charger vos ressources d’interface utilisateur personnalisées, que nous n’avons pas encore créées.
- If you see the default Auth0 page instead of a blank page:
Check if your custom domain is properly configured.
Ensure your application is using the custom domain.
+ Si vous voyez la page Auth0 par défaut au lieu d’une page vierge :
Vérifiez si votre domaine personnalisé est correctement configuré.
Assurez-vous que votre application utilise le domaine personnalisé.
@@ -76,7 +76,7 @@ npm install
-2. Change directory to the auth0-acul-react-boilerplate
folder and install the application and the ACUL JS SDK.
// open the directory where you git clone the boilerplate
+2. Change directory to the auth0-acul-react-boilerplate
folder and install the application and the ACUL JS SDK.
// open the directory where you git clone the boilerplate
cd auth0-acul-react-boilerplate && npm i
@@ -96,17 +96,17 @@ npm install @auth0/auth0-acul-js
-The assets are served from localhost during development.
For production, you'll need to serve these assets from a CDN or static hosting service.
ACUL Login ID screen quickstart step 4 checkpoint After selecting Log In, you are greeted with a “Hello World”
page.
+The assets are served from localhost during development.
For production, you'll need to serve these assets from a CDN or static hosting service.
Démarrage rapide – Étape 4 : Point de contrôle – Écran d’identification de connexion ACUL Après avoir sélectionné Log In (Connexion), vous êtes accueilli par une page « Bonjour tout le monde »
.
- Make sure to have installed the ACUL JS SDK after installing the boilerplate application.
+ Assurez-vous d’avoir installé la trousse SDK ACUL JS après avoir installé l’application standard.
Build the ACUL Login ID screen
Change directory to the auth0-acul-react-boilerplate/src/screens/loginId/
and edit the index.tsx
file.
Rebuild the application with the following command:
npm run build
-ACUL Login ID screen quickstart step 4 rebuild the app checkpoint Select Log In.
You should now see a customized login page as shown below:
+Démarrage rapide – Étape 4 : Point de contrôle Recréer l’application – Écran d’identification de connexion ACUL Sélectionnez Log In (Connexion).
Vous devriez maintenant voir une page de connexion personnalisée semblable à celle-ci :
diff --git a/fr-ca/articles/quickstart/backend/aspnet-core-webapi/interactive.md b/fr-ca/articles/quickstart/backend/aspnet-core-webapi/interactive.md
index 481e4a0979..30c22c3878 100644
--- a/fr-ca/articles/quickstart/backend/aspnet-core-webapi/interactive.md
+++ b/fr-ca/articles/quickstart/backend/aspnet-core-webapi/interactive.md
@@ -1,6 +1,6 @@
---
title: Ajouter une autorisation à votre application API ASP.NET Core Web
-description: Ce tutoriel explique comment ajouter une autorisation à une application API ASP.NET Core Web en utilisant le logiciel médiateur JWT standard.
+description: Ce tutoriel explique comment ajouter une autorisation à une application API ASP.NET Core Web en utilisant le logiciel médiateur JWT standard.
interactive: true
files:
- files/appsettings
@@ -9,21 +9,21 @@ files:
- files/HasScopeRequirement
- files/ApiController
github:
- path: https://github.com/auth0-samples/auth0-aspnetcore-webapi-samples/tree/master/Quickstart/01-Authorization
+ path: Quickstart/01-Authorization
locale: fr-CA
---
# Ajouter une autorisation à votre application API ASP.NET Core Web
-Auth0 vous permet d’ajouter rapidement l’authentification et d’accéder aux informations relatives au profil de l’utilisateur dans presque tous les types d’applications. Ce guide explique comment intégrer Auth0 à n’importe quelle application API ASP.NET Web, nouvelle ou ancienne, à l’aide du package Microsoft.AspNetCore.Authentication.JwtBearer
.
Si vous n'avez pas encore créé d’API dans votre tableau Auth0 dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.
Vous pouvez également lire notre guide de démarrage, qui vous aidera à configurer votre première API via Auth0 Dashboard.
Notez que chaque API dans Auth0 est configurée à l’aide d’un identifiant d’API; votre code d’application utilisera l’identifiant d’API comme Audience pour valider le jeton d’accès.
Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d'applications OAuth 2.0.
+Auth0 vous permet d’ajouter rapidement l’authentification et d’accéder aux informations relatives au profil de l’utilisateur dans presque tous les types d’applications. Ce guide explique comment intégrer Auth0 à n’importe quelle application API ASP.NET Web, nouvelle ou existante, à l’aide du package Microsoft.AspNetCore.Authentication.JwtBearer
.
Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration.
Vous pouvez également consulter notre guide de démarrage, qui vous aidera à configurer votre première API via Auth0 Dashboard.
Notez que chaque API dans Auth0 est configurée à l’aide d’un identifiant d’API; votre code d’application utilisera l’identifiant d’API comme Public pour valider le jeton d’accès.
Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.
## Définir les autorisations
-Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et accorder un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API du Auth0 Dashboard. L’exemple suivant utilise la permission read:messages
.
+Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et accorder un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API d’Auth0 Dashboard. L’exemple suivant utilise la permission read:messages
.
-## Installer des dépendances
+## Installer les dépendances
Pour permettre à votre application de valider les jetons d’accès, ajoutez une référence au package NuGet Microsoft.AspNetCore.Authentication.JwtBearer
:
Install-Package Microsoft.AspNetCore.Authentication.JwtBearer
@@ -35,44 +35,44 @@ locale: fr-CA
## Configurer le logiciel médiateur {{{ data-action="code" data-code="Program.cs" }}}
-Configurer le logiciel médiateur d’authentification en le configurant dans le fichier Program.cs
de votre application :
Enregistrez les services d’authentification en appelant la méthode AddAuthentication
. Configurez JwtBearerDefaults.AuthenticationScheme
comme schéma par défaut.
Enregistrez le schéma d’authentification du porteur JWT en faisant un appel à la méthode AddJwtBearer
. Configurez votre domaine Auth0 comme autorité et votre identifiant API Auth0 comme public, et assurez-vous que votre domaine Auth0 et votre identifiant API sont définis dans le fichier appsettings.json de votre application.
+
Configurez le logiciel médiateur d’authentification dans le fichier Program.cs
de votre application :
Enregistrez les services d’authentification en appelant la méthode AddAuthentication
. Configurez JwtBearerDefaults.AuthenticationScheme
comme schéma par défaut.
Enregistrez le schéma d’authentification du porteur JWT en faisant un appel à la méthode AddJwtBearer
. Configurez votre domaine Auth0 comme autorité et votre identifiant API Auth0 comme public, et assurez-vous que votre domaine Auth0 et votre identifiant API sont définis dans le fichier appsettings.json de votre application.
-
Dans certains cas, le jeton d’accès n’aura pas de sub
demande; dans ce cas, le nom User.Identity.Name
sera null
. Si vous souhaitez mapper une demande différente à User.Identity.Name
, ajoutez-la aux options.TokenValidationParameters
dans l’appel AddJwtBearer()
.
Ajoutez l’authentification et l’autorisation du logiciel médiateur au pipeline de logiciel médiateur en ajoutant des appels aux méthodes UseAuthentication
et UseAuthorization
sous la méthode var app = builder. Build();
.
+Dans certains cas, le jeton d’accès n’aura pas de sub
demande; dans ce cas, le nom User.Identity.Name
sera null
. Si vous souhaitez mapper une demande différente à User.Identity.Name
, ajoutez-la aux options.TokenValidationParameters
dans l’appel AddJwtBearer()
.
.Ajoutez l’authentification et l’autorisation de le logiciel médiateur au pipeline du logiciel médiateur en ajoutant des appels aux méthodes UseAuthentication
et UseAuthorization
sous la méthode var app = builder.Build();
.
## Valider les permissions {{{ data-action="code" data-code="HasScopeHandler.cs" }}}
-Pour s’assurer qu’un jeton d’accès contient les permissions adéquates, utilisez Policy-Based Authorization (Autorisation basée sur une politique) dans ASP.NET Core :
Créez une nouvelle exigence d’autorisation appelée HasScopeRequirement
, qui vérifiera si la demande de scope
émise par votre locataire Auth0 est présente et, le cas échéant, vérifiera que la demande contient la permission demandée.
Dans la méthode var builder = WebApplication.CreateBuilder(args);
du fichier Program.cs
, ajoutez un appel à la méthode app.AddAuthorization
.
Ajoutez des politiques pour les permissions en appelant AddPolicy
pour chaque permission.
Enregistrez un singleton pour la classe HasScopeHandler
.
+Pour s’assurer qu’un jeton d’accès contient les permissions adéquates, utilisez Policy-Based Authorization (Autorisation basée sur une politique) dans ASP.NET Core :
Créez une nouvelle exigence d’autorisation appelée HasScopeRequirement
, qui vérifiera si la demande de scope
émise par votre locataire Auth0 est présente et, le cas échéant, vérifiera que la demande contient la permission demandée.
Dans la méthode var builder = WebApplication.CreateBuilder(args);
du fichier Program.cs
, ajoutez un appel à la méthode app.AddAuthorization
.
Ajoutez des politiques pour les permissions en appelant AddPolicy
pour chaque permission.
Enregistrez un singleton pour la classe HasScopeHandler
.
-## Protéger les points de terminaison des API {{{ data-action="code" data-code="ApiController.cs" }}}
+## Protéger les points de terminaison des API {{{ data-action="code" data-code="ApiController.cs" }}}
-Le logiciel médiateur JWT s’intègre aux mécanismes d’authentification et d’autorisation standard de ASP.NET Core.
Pour sécuriser un terminal, ajoutez l’attribut [Authorize]
à votre action de contrôleur (ou à tout le contrôleur si vous souhaitez protéger toutes ses actions).
Lors de la sécurisation des points de terminaison qui nécessitent des permissions spécifiques, assurez-vous que la bonne permission est présente dans access_token
. Pour ce faire, ajoutez l’attribut Authorize
à l’action Scoped
et passez read:messages
comme paramètre de la policy
.
+Le logiciel médiateur JWT s’intègre aux mécanismes d’authentification et d’autorisation standard de ASP.NET Core.
Pour sécuriser un point de terminaison, ajoutez l’attribut [Authorize]
à votre action de contrôleur (ou à tout le contrôleur si vous souhaitez protéger toutes ses actions).
Lors de la sécurisation des points de terminaison qui nécessitent des permissions particulières, assurez-vous que la bonne permission est présente dans access_token
. Pour ce faire, ajoutez l’attribut Authorize
à l’action Scoped
et passez read:messages
comme paramètre de la policy
.
## Appeler votre API
-La façon dont vous appelez votre API dépend du type d’application que vous développez et du cadre que vous utilisez. Pour en savoir plus, lire le Guide rapide de l’application concernée :
Obtenir un jeton d’accès
Quel que soit le type d’application que vous développez ou le cadre que vous utilisez, vous aurez besoin d’un token d’accès pour appeler votre API.
Si vous appelez votre API à partir d’une application à page unique (SPA) ou native, vous recevrez un jeton d’accès une fois l’autorisation obtenue.
Si vous appelez l’API à partir d’un outil de ligne de commande ou d’un autre service sans identifiants utilisateur, utilisez le Flux Identifiants client. Pour ce faire, enregistrez une Application de communication entre machines et incluez les valeurs suivantes à votre requête :
Identificateur client comme paramètre client_id
.
Secret client comme paramètre client_secret
.
Identificateur API (la même valeur utilisée pour configurer l'intergiciel plus tôt dans ce guide rapide) comme paramètre audience
.
Pour en savoir plus sur l’obtention de l’identificateur client et du secret client pour votre application de communication entre machines, lisez la section Paramètres de l’application.
Exemple de requête
+La façon dont vous appelez votre API dépend du type d’application que vous développez et du cadre que vous utilisez. Pour en savoir plus, lire le Guide rapide de l’application concernée :
Obtenir un jeton d’accès
Quel que soit le type d’application que vous développez ou le cadre que vous utilisez, vous aurez besoin d’un jeton d’accès pour appeler votre API.
Si vous appelez votre API à partir d’une application à page unique (SPA) ou native, vous recevrez un jeton d’accès une fois l’autorisation obtenue.
Si vous appelez l’API à partir d’un outil de ligne de commande ou d’un autre service sans identifiants utilisateur, utilisez le Flux des identifiants client d’OAuth. Pour ce faire, enregistrez une Application de communication entre machines et incluez les valeurs suivantes à votre requête :
ID client comme paramètre client_id
.
Secret client comme paramètre client_secret
.
Identifiant API (la même valeur utilisée pour configurer l’intergiciel plus tôt dans ce guide rapide) comme paramètre audience
.
Pour en savoir plus sur l’obtention de l’identificateur client et du secret client pour votre application de communication entre machines, lisez la section Paramètres de l’application.
Exemple de demande
- curl --request post \
+ curl --request post \
--url 'https://${account.namespace}/oauth/token' \
- --header 'content-type: application/x-www-form-urlencoded'
var client = new RestClient("https://${account.namespace}/oauth/token");
+ --header 'content-type: application/x-www-form-urlencoded'
var client = new RestClient("https://${account.namespace}/oauth/token");
var request = new RestRequest(Method.POST);
request.AddHeader("content-type", "application/x-www-form-urlencoded");
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
@@ -120,11 +120,11 @@ func main() {
-}
HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/token")
+}
HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/token")
.header("content-type", "application/x-www-form-urlencoded")
- .asString();
var axios = require("axios").default;
+ .asString();
var axios = require("axios").default;
@@ -148,7 +148,7 @@ axios.request(options).then(function (response) {
console.error(error);
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
@@ -188,7 +188,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
}];
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
@@ -236,7 +236,7 @@ if ($err) {
echo $response;
-}
import http.client
+}
import http.client
@@ -258,7 +258,7 @@ data = res.read()
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
require 'net/http'
@@ -286,7 +286,7 @@ request["content-type"] = 'application/x-www-form-urlencoded'
response = http.request(request)
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
@@ -330,27 +330,27 @@ dataTask.resume()
-Appeler un point de terminaison sécurisé
Maintenant que vous avez un jeton d’accès, vous pouvez l’utiliser pour appeler des points de terminaisonAPI sécurisés. Lorsque vous appelez un point de terminaison sécurisé, vous devez inclure le jeton d’accès en tant que jeton de porteur dans l’en-tête Authorization (Autorisation) de la requête. Par exemple, vous pouvez faire une requête au point de terminaison /api/private
:
+Appeler un point de terminaison sécurisé
Maintenant que vous avez un jeton d’accès, vous pouvez l’utiliser pour appeler des points de terminaison API sécurisés. Lorsque vous appelez un point de terminaison sécurisé, vous devez inclure le jeton d’accès en tant que jeton de porteur dans l’en-tête Authorization de la requête. Par exemple, vous pouvez faire une requête au point de terminaison /api/private
:
- curl --request get \
+ curl --request get \
--url http://localhost:3010/api/private \
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN'
var client = new RestClient("http://localhost:3010/api/private");
+ --header 'authorization: Bearer YOUR_ACCESS_TOKEN'
var client = new RestClient("http://localhost:3010/api/private");
var request = new RestRequest(Method.GET);
request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN");
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
@@ -398,11 +398,11 @@ func main() {
-}
HttpResponse<String> response = Unirest.get("http://localhost:3010/api/private")
+}
HttpResponse<String> response = Unirest.get("http://localhost:3010/api/private")
.header("authorization", "Bearer YOUR_ACCESS_TOKEN")
- .asString();
var axios = require("axios").default;
+ .asString();
var axios = require("axios").default;
@@ -426,7 +426,7 @@ axios.request(options).then(function (response) {
console.error(error);
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
@@ -466,7 +466,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
}];
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
@@ -516,7 +516,7 @@ if ($err) {
echo $response;
-}
import http.client
+}
import http.client
@@ -538,7 +538,7 @@ data = res.read()
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
require 'net/http'
@@ -560,7 +560,7 @@ request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN'
response = http.request(request)
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
@@ -604,10 +604,10 @@ dataTask.resume()
-Appelez le point de terminaison /api/private-scoped
de manière similaire, mais assurez-vous que les autorisations API sont configurées correctement et que le jeton d’accès inclut la permission read:messages
.
Guide rapide ASP.NET API - Étape 6 Point de contrôle Vous devriez maintenant pouvoir appeler les points de terminaison /api/private
et /api/private
.
Exécutez votre application et vérifiez que :
GET /api/private
est disponible pour les demandes authentifiées.
GET /api/private-scoped
est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages
.
+Appelez le point de terminaison /api/private-scoped
de manière similaire, mais assurez-vous que les autorisations API sont configurées correctement et que le jeton d’accès inclut la permission read:messages
.
Guide rapide ASP.NET API - Étape 6 - Point de contrôle Vous devriez maintenant pouvoir appeler les points de terminaison /api/private
et /api/private-scoped
.
Exécutez votre application et vérifiez que :
GET /api/private
est disponible pour les demandes authentifiées.
GET /api/private-scoped
est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages
.
- Sorry about that. Here are a few things to double check:
make sure ValidIssuer
and ValidAudience
are configured correctly
make sure the token is added as the Authorization
header
check that the token has the correct scopes (you can use jwt.io to verify)
Still having issues? To get more help, check out our documentation or visit our community page.
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
assurez-vous que ValidIssuer
et ValidAudience
sont correctement configurés
assurez-vous que le jeton est ajouté en tant qu’en-tête de l'authorisation
vérifiez que le jeton a les permissions adéquates (vous pouvez utiliser jwt.io pour vérifier)
Vous rencontrez toujours des problèmes? Pour obtenir de l’aide, consultez notre documentation ou la page de notre communauté.
diff --git a/fr-ca/articles/quickstart/backend/django/interactive.md b/fr-ca/articles/quickstart/backend/django/interactive.md
index f7bdce9932..7437d521f2 100644
--- a/fr-ca/articles/quickstart/backend/django/interactive.md
+++ b/fr-ca/articles/quickstart/backend/django/interactive.md
@@ -7,19 +7,19 @@ files:
- files/apiexample/views
- files/apiexample/urls
github:
- path: https://github.com/auth0-samples/auth0-django-api/tree/master/01-Authorization
+ path: 01-Authorization
locale: fr-CA
---
# Ajouter une autorisation à votre application API Django
-Ce guide explique comment intégrer Auth0 à n’importe quelle API Python, nouvelle ou ancienne, développée avec Django.
Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.
Vous pouvez également lire notre guide de démarrage, qui vous aidera à configurer votre première API via Auth0 Dashboard.
Toute API dans Auth0 est configurée à l’aide d’un identifiant d’API que votre code d’application utilisera comme Audience pour valider le jeton d’accès.
Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d'applications OAuth 2.0.
+Ce guide explique comment intégrer Auth0 à n’importe quelle API Python, nouvelle ou ancienne, développée avec Django.
Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.
Vous pouvez également lire notre guide de démarrage, qui vous aidera à configurer votre première API via Auth0 Dashboard.
Toute API dans Auth0 est configurée à l’aide d’un identifiant d’API que votre code d’application utilisera comme Audience pour valider le jeton d’accès.
Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.
## Définir les autorisations
-Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et accorder un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API du Auth0 Dashboard. L’exemple suivant utilise la permission read:messages
.
+Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et accorder un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API du Auth0 Dashboard. L’exemple suivant utilise la permission read:messages
.
## Configurer Django pour utiliser Auth0
@@ -31,7 +31,7 @@ locale: fr-CA
## Créer le validateur JWT {{{ data-action="code" data-code="apiexample/validator.py" }}}
-Vous utiliserez une bibliothèque appelée Authlib pour créer un ResourceProtector, qui est un type de Django view decorator (Décorateur de vue Django) qui protège vos ressources (vues API) avec un validateur donné.
Le validateur vérifiera le jeton d’accès que vous passez à la ressource en vérifiant qu’il a une signature et des demandes valides.
Vous pouvez utiliser le validateur JWTBearerTokenValidator
d’AuthLib avec quelques ajustements pour vous assurer qu’il est conforme à nos exigences de validation des jetons d’accès.
Pour créer votre Auth0JWTBearerTokenValidator
, vous devez le passer à votre domaine
et à votre public
(Identificateur API). Il obtiendra alors la clé publique nécessaire pour vérifier la signature du jeton et la passera à la classe JWTBearerTokenValidator
.
Vous remplacerez ensuite les claims_options
de la classe pour vous assurer que les demandes expiry
, audience
et issue
du jeton sont validées selon nos exigences.
Créez le fichier apiexample/validator.py
en utilisant le code du panneau interactif.
+Vous utiliserez une bibliothèque appelée Authlib pour créer un ResourceProtector, qui est un type de Django view decorator (Décorateur de vue Django) qui protège vos ressources (vues API) avec un validateur donné.
Le validateur vérifiera le jeton d’accès que vous passez à la ressource en vérifiant qu’il a une signature et des demandes valides.
Vous pouvez utiliser le validateur JWTBearerTokenValidator
d’AuthLib avec quelques ajustements pour vous assurer qu’il est conforme à nos exigences de validation des jetons d’accès.
Pour créer votre Auth0JWTBearerTokenValidator
, vous devez le passer à votre domaine
et à votre public
(Identificateur API). Il obtiendra alors la clé publique nécessaire pour vérifier la signature du jeton et la passera à la classe JWTBearerTokenValidator
.
Vous remplacerez ensuite les claims_options
de la classe pour vous assurer que les demandes expiry
, audience
et issue
du jeton sont validées selon nos exigences.
Créez le fichier apiexample/validator.py
en utilisant le code du panneau interactif.
## Créer les vues API {{{ data-action="code" data-code="apiexample/views.py" }}}
@@ -41,27 +41,27 @@ locale: fr-CA
## Ajouter des mappages d’URL {{{ data-action="code" data-code="apiexample/urls.py#8:10" }}}
-Dans les étapes précédentes, vous avez ajouté des méthodes au fichier views.py
. Mappez à présent ces méthodes aux URL en utilisant le URL Dispatcher (Répartiteur d’URL) de Django, qui vous permet de mapper les modèles d’URL aux vues.
Ajoutez les modèles d’URL à votre fichier apiexample/urls.py
.
Faites un appel à votre API
Pour appeler votre API, vous aurez besoin d’un jeton d’accès. Vous pouvez récupérer un jeton d’accès à des fins de test dans la vue Test dans vos API Settings (Paramètres API).
![Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/8aa621c6d95e3f21115493a19ab05f7a/Quickstart_Example_App_-_API.png)
Fournissez le jeton d’accès comme en-tête Authorization
dans vos requêtes.
+Dans les étapes précédentes, vous avez ajouté des méthodes au fichier views.py
. Mappez à présent ces méthodes aux URL en utilisant le URL Dispatcher (Répartiteur d’URL) de Django, qui vous permet de mapper les modèles d’URL aux vues.
Ajoutez les modèles d’URL à votre fichier apiexample/urls.py
.
Faites un appel à votre API
Pour appeler votre API, vous aurez besoin d’un jeton d’accès. Vous pouvez récupérer un jeton d’accès à des fins de test dans la vue Test dans vos API Settings (Paramètres API).
![Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/8aa621c6d95e3f21115493a19ab05f7a/Quickstart_Example_App_-_API.png)
Fournissez le jeton d’accès comme en-tête Authorization
dans vos requêtes.
- curl --request get \
+ curl --request get \
--url 'http:///${account.namespace}.com/api_path' \
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}.com/api_path");
+ --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}.com/api_path");
var request = new RestRequest(Method.GET);
request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
@@ -109,11 +109,11 @@ func main() {
-}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}.com/api_path")
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}.com/api_path")
.header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
- .asString();
var axios = require("axios").default;
+ .asString();
var axios = require("axios").default;
@@ -137,7 +137,7 @@ axios.request(options).then(function (response) {
console.error(error);
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
@@ -177,7 +177,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
}];
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
@@ -225,7 +225,7 @@ if ($err) {
echo $response;
-}
import http.client
+}
import http.client
@@ -247,7 +247,7 @@ data = res.read()
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
require 'net/http'
@@ -269,7 +269,7 @@ request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
response = http.request(request)
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
diff --git a/fr-ca/articles/quickstart/backend/golang/interactive.md b/fr-ca/articles/quickstart/backend/golang/interactive.md
index 4665fbb325..a5b8eb9309 100644
--- a/fr-ca/articles/quickstart/backend/golang/interactive.md
+++ b/fr-ca/articles/quickstart/backend/golang/interactive.md
@@ -6,21 +6,21 @@ files:
- files/middleware/jwt
- files/main
github:
- path: https://github.com/auth0-samples/auth0-golang-api-samples/tree/master/01-Authorization-RS256
+ path: 01-Authorization-RS256
locale: fr-CA
---
# Ajouter une autorisation à votre application Go
-Ce guide explique comment intégrer Auth0 à n’importe quelle application API Go, nouvelle ou ancienne, en utilisant le package go-jwt-middleware .
Si vous n’avez pas encore créé d’API dans votre Auth0 dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.
Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage.
Chaque API Auth0 utilise l’identifiant d’API, dont votre application a besoin pour valider le jeton d’accès.
Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d'applications OAuth 2.0.
+Ce guide explique comment intégrer Auth0 à n’importe quelle application API Go, nouvelle ou ancienne, en utilisant le package go-jwt-middleware.
Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.
Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage.
Chaque API Auth0 utilise l’identificateur API, dont votre application a besoin pour valider le jeton d’accès.
Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.
## Définir les autorisations
-Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès en particulier. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API du Auth0 Dashboard. L’exemple suivant utilise la permission read:messages
.
+Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API d’Auth0 Dashboard. L’exemple suivant utilise la permission read:messages
.
-## Installer des dépendances
+## Installer les dépendances
Ajoutez un fichier go.mod
pour répertorier toutes les dépendances nécessaires.
// go.mod
@@ -73,32 +73,32 @@ AUTH0_AUDIENCE='${apiIdentifier}'
## Créer un logiciel médiateur pour valider les jetons d’accès {{{ data-action="code" data-code="middleware/jwt.go" }}}
-La fonction de logiciel médiateur EnsureValidToken
valide le jeton d’accès. Vous pouvez appliquer cette fonction à tous les points de terminaison que vous souhaitez protéger. Si le jeton est valide, le point de terminaison libère les ressources. Si le jeton n’est pas valide, l’API renvoie une erreur 401 Authorization (Autorisation 401)
.
Configurez le logiciel médiateur go-jwt-middleware pour vérifier les jetons d’accès des demandes entrantes.
Par défaut, votre API sera configurée pour utiliser RS256 comme algorithme de signature des jetons. Puisque RS256 fonctionne en utilisant une paire de clés privée/publique, les jetons peuvent être vérifiés par rapport à la clé publique pour votre compte Auth0. Cette clé publique est accessible à https://{yourDomain}/.well-known/jwks.json.
Inclure un mécanisme pour vérifier que le jeton a une scope (permission) suffisante pour accéder aux ressources demandées.
Créer une fonction HasScope
pour vérifier et s’assurer que le jeton d’accès a la bonne permission avant de renvoyer une réponse réussie.
+La fonction de logiciel médiateur EnsureValidToken
valide le jeton d’accès. Vous pouvez appliquer cette fonction à tous les points de terminaison que vous souhaitez protéger. Si le jeton est valide, le point de terminaison libère les ressources. Si le jeton n’est pas valide, l’API renvoie une erreur 401 Authorization (Autorisation 401)
.
Configurez le logiciel médiateur go-jwt-middleware pour vérifier les jetons d’accès des demandes entrantes.
Par défaut, votre API sera configurée pour utiliser RS256 comme algorithme de signature des jetons. Puisque RS256 fonctionne en utilisant une paire de clés privée/publique, les jetons peuvent être vérifiés par rapport à la clé publique pour votre compte Auth0. Cette clé publique est accessible à https://{yourDomain}/.well-known/jwks.json.
Inclure un mécanisme pour vérifier que le jeton a une scope (permission) suffisante pour accéder aux ressources demandées.
Créer une fonction HasScope
pour vérifier et s’assurer que le jeton d’accès a la bonne permission avant de renvoyer une réponse réussie.
## Protéger les points de terminaison des API {{{ data-action="code" data-code="main.go" }}}
-Dans cet exemple, vous allez créer un point de terminaison /api/public
qui n’utilise pas le logiciel médiateur EnsureToken
car il est accessible aux requêtes non authentifiées.
Créez un point de terminaison /api/private
qui nécessite le logiciel médiateur EnsureToken
car il n’est disponible que pour les requêtes authentifiées contenant un jeton d’accès, sans permission supplémentaire.
Créez un point de terminaison /api/private
qui nécessite le logiciel médiateur EnsureToken
et HasScope
car il n’est disponible que pour les requêtes authentifiées contenant un jeton d’accès dont la permission read:messages
est accordée.
Seule la portée read:messages
est vérifiée par la fonction HasScope
. Vous pouvez l’étendre ou en faire un logiciel médiateur autonome qui accepte plusieurs permissions pour s’adapter à votre cas d’utilisation.
Faire un appel à votre API
Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).
![Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/8aa621c6d95e3f21115493a19ab05f7a/Quickstart_Example_App_-_API.png)
Fournissez le Jeton d’accès comme un en-tête Authorization (Autorisation)
dans vos requêtes.
+Dans cet exemple, vous allez créer un point de terminaison /api/public
qui n’utilise pas le logiciel médiateur EnsureToken
car il est accessible aux requêtes non authentifiées.
Créez un point de terminaison /api/private
qui nécessite le logiciel médiateur EnsureToken
car il n’est disponible que pour les requêtes authentifiées contenant un jeton d’accès, sans permission supplémentaire.
Créez un point de terminaison /api/private
qui nécessite le logiciel médiateur EnsureToken
et HasScope
car il n’est disponible que pour les requêtes authentifiées contenant un jeton d’accès dont la permission read:messages
est accordée.
Seule la portée read:messages
est vérifiée par la fonction HasScope
. Vous pouvez l’étendre ou en faire un logiciel médiateur autonome qui accepte plusieurs permissions pour s’adapter à votre cas d’utilisation.
Faire un appel à votre API
Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).
![Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/8aa621c6d95e3f21115493a19ab05f7a/Quickstart_Example_App_-_API.png)
Fournissez le Jeton d’accès comme un en-tête Authorization (Autorisation)
dans vos requêtes.
- curl --request get \
+ curl --request get \
--url 'http:///${account.namespace}/api_path' \
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+ --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
var request = new RestRequest(Method.GET);
request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
@@ -146,11 +146,11 @@ func main() {
-}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
.header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
- .asString();
var axios = require("axios").default;
+ .asString();
var axios = require("axios").default;
@@ -174,7 +174,7 @@ axios.request(options).then(function (response) {
console.error(error);
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
@@ -214,7 +214,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
}];
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
@@ -262,7 +262,7 @@ if ($err) {
echo $response;
-}
import http.client
+}
import http.client
@@ -284,7 +284,7 @@ data = res.read()
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
require 'net/http'
@@ -306,7 +306,7 @@ request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
response = http.request(request)
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
@@ -350,10 +350,10 @@ dataTask.resume()
-Guide rapide Go API - Étape 5 Point de contrôle Maintenant que vous avez configuré votre application, lancez votre application et vérifiez que :
GET /api/public
est disponible pour les demandes non authentifiées.
GET /api/private
est disponible pour les demandes authentifiées.
GET /api/private-scoped
est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages
.
+Démarrage rapide Go API - Étape 5 - Point de contrôle Maintenant que vous avez configuré votre application, lancez votre application et vérifiez que :
GET /api/public
est disponible pour les demandes non authentifiées.
GET /api/private
est disponible pour les demandes authentifiées.
GET /api/private-scoped
est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages
.
- If your application did not start successfully:
Verify you added the token as the Authorization
header
Ensure the token has the correct scopes. Verify with jwt.io.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si votre application n’a pas démarré :
Vérifiez que vous avez ajouté le jeton en tant qu’en-tête d'autorisation
Assurez-vous que le jeton est doté des permissions appropriées. Vérifiez avec jwt.io.
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
diff --git a/fr-ca/articles/quickstart/backend/java-spring-security5/interactive.md b/fr-ca/articles/quickstart/backend/java-spring-security5/interactive.md
index 677396484d..ee55577b5b 100644
--- a/fr-ca/articles/quickstart/backend/java-spring-security5/interactive.md
+++ b/fr-ca/articles/quickstart/backend/java-spring-security5/interactive.md
@@ -8,29 +8,29 @@ files:
- files/Message
- files/APIController
github:
- path: https://github.com/auth0-samples/auth0-spring-security5-api-sample/tree/master/01-Authorization-MVC
+ path: 01-Authorization-MVC
locale: fr-CA
---
# Ajouter l’autorisation à votre application Spring Boot
-Auth0 vous permet d’ajouter rapidement une autorisation à votre application. Ce guide explique comment intégrer Auth0 à n’importe quelle application Spring Boot, nouvelle ou ancienne.
Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.
Consultez notre guide de démarrage pour configurer votre première API via Auth0 Dashboard.
Chaque API Auth0 utilise l’identifiant d’API, dont votre application a besoin pour valider le jeton d’accès.
Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.
+Auth0 vous permet d’ajouter rapidement une autorisation à votre application. Ce guide explique comment intégrer Auth0 à n’importe quelle application Spring Boot, nouvelle ou ancienne.
Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.
Consultez notre guide de démarrage pour configurer votre première API via Auth0 Dashboard.
Chaque API Auth0 utilise l’identificateur API, dont votre application a besoin pour valider le jeton d’accès.
Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.
## Définir les autorisations
-Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès en particulier. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section APIs (API) d'Auth0 Dashboard.
![Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)](//images.ctfassets.net/cdy7uua7fh8z/1s3Yp5zqJiKiSWqbPSezNO/677a3405b2853f5fdf9e42f6e83ceba7/Quickstarts_API_-_French.png)
Cet exemple utilise la permission read:messages
.
+Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API d’Auth0 Dashboard.
![Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)](//images.ctfassets.net/cdy7uua7fh8z/1s3Yp5zqJiKiSWqbPSezNO/677a3405b2853f5fdf9e42f6e83ceba7/Quickstarts_API_-_French.png)
Cet exemple utilise la permission read:messages
.
## Configurer l’exemple de projet {{{ data-action="code" data-code="application.yml#1:6" }}}
L’exemple de projet utilise un fichier /src/main/resources/application.yml
, qui le configure pour utiliser le domaine et l’identificateur API Auth0 corrects pour votre API. Si vous téléchargez le code à partir de cette page, il sera automatiquement configuré. En revanche, si vous clonez l’exemple à partir de GitHub, vous devrez le remplir manuellement.
-## Installer des dépendances {{{ data-action="code" data-code="application.yml#1:6" }}}
+## Installer les dépendances {{{ data-action="code" data-code="application.yml#1:6" }}}
-Si vous utilisez Gradle, vous pouvez ajouter les dépendances nécessaires en utilisant le plugiciel Gradle de Spring Boot et le plugiciel de gestion des dépendances pour résoudre les problèmes de versions de dépendances :
// build.gradle
+Si vous utilisez Gradle, vous pouvez ajouter les dépendances nécessaires en utilisant le plugiciel Gradle de Spring Boot et le plugiciel de gestion des dépendances pour résoudre les problèmes de versions de dépendances :
// build.gradle
@@ -105,7 +105,7 @@ locale: fr-CA
## Configurer le serveur de ressources {{{ data-action="code" data-code="SecurityConfig.java" }}}
-Pour configurer l’application en tant que serveur de ressources et valider les JWT, créez une classe qui fournira une instance de SecurityFilterChain
et ajoutez l’annotation @Configuration
.
Protéger les points de terminaison des API
Les routes ci-dessous sont disponibles pour les demandes suivantes :
GET /api/public
: disponible pour les requêtes non authentifiées
GET /api/private
: disponible pour les requêtes authentifiées contenant un jeton d’accès sans permission supplémentaire
GET /api/private-scoped
: disponible pour les requêtes authentifiées contenant un jeton d’accès dont la permission read:messages
est accordée
L’exemple ci-dessous montre comment sécuriser les méthodes de l’API à l’aide de l’objet HttpSecurity
fourni dans la méthode filterChain()
de la classe SecurityConfig
. Les adaptateurs de routes limitent l’accès en fonction du niveau d’autorisation requis.
Par défaut, Spring Security crée une GrantedAuthority
pour chaque permission dans la demande scope
du JWT. Cette permission permet d’utiliser la méthode hasAuthority("SCOPE_read:messages")
pour restreindre l’accès à un JWT valide qui contient la permission read:messages
.
+Pour configurer l’application en tant que serveur de ressources et valider les JWT, créez une classe qui fournira une instance SecurityFilterChain
et ajoutez l’annotation @Configuration
.
Protéger les points de terminaison des API
Les routes ci-dessous sont disponibles pour les demandes suivantes :
GET /api/public
: disponible pour les demandes non authentifiées
GET /api/private
: disponible pour les demandes authentifiées contenant un jeton d’accès sans permission supplémentaire
GET /api/private-scoped
: disponible pour les demandes authentifiées contenant un jeton d’accès dont la permission read:messages
est accordée
L’exemple ci-dessous montre comment sécuriser les méthodes de l’API à l’aide de l’objet HttpSecurity
fourni dans la méthode filterChain()
de la classe SecurityConfig
. Les adaptateurs de routes limitent l’accès en fonction du niveau d’autorisation requis.
Par défaut, Spring Security crée une GrantedAuthority
pour chaque permission dans la demande scope
du JWT. Cette permission permet d’utiliser la méthode hasAuthority("SCOPE_read:messages")
pour restreindre l’accès à un JWT valide qui contient la permission read:messages
.
## Créer l’objet de domaine {{{ data-action="code" data-code="Message.java#1:4" }}}
@@ -115,15 +115,15 @@ locale: fr-CA
## Créer le contrôleur d’API {{{ data-action="code" data-code="APIController.java" }}}
-Créez une nouvelle classe appelée APIController
pour gérer les demandes vers les points de terminaison. L’APIController
possède trois routes définies dans la section Protect API Endpoints (Protéger les points de terminaison des API). Dans cet exemple, toutes les origines sont autorisées par l’annotation @CrossOrigin
. Les applications réelles doivent configurer CORS
en fonction de leur cas d’utilisation.
+Créez une nouvelle classe appelée APIController
pour gérer les demandes vers les points de terminaison. L’APIController
possède trois routes définies dans la section Protéger les points de terminaison des API. Dans cet exemple, toutes les origines sont autorisées par l’annotation @CrossOrigin
. Les applications réelles doivent configurer CORS
en fonction de leur cas d’utilisation.
## Exécuter l’application {{{ data-action="code" data-code="APIController.java" }}}
-Pour développer et exécuter le projet exemple, exécutez la tâche Gradle bootRun
.
Linux ou macOS :
./gradlew bootRun
Windows :
gradlew.bat bootRun
Si vous configurez votre propre application en utilisant Maven et le plugiciel Spring Boot Maven, vous pouvez exécuter l’objectif spring-boot:run
.
Linux ou macOS :
mvn spring-boot:run
Windows :
mvn.cmd spring-boot:run
API Spring Boot - Étape 7 - Point de contrôle L’exemple d’application sera disponible à l’adresse http://localhost:3010/
. Pour en savoir plus sur la manière de tester et d’utiliser votre API, consultez l’article Utiliser votre API.
+Pour développer et exécuter le projet exemple, exécutez la tâche Gradle bootRun
.
Linux ou macOS :
./gradlew bootRun
Windows :
gradlew.bat bootRun
Si vous configurez votre propre application en utilisant Maven et le plugiciel Spring Boot Maven Plugin, vous pouvez exécuter l’objectif spring-boot:run
.
Linux ou macOS :
mvn spring-boot:run
Windows :
mvn.cmd spring-boot:run
API Spring Boot - Étape 7 - Point de contrôle L’exemple d’application sera accessible à l’adresse http://localhost:3010/
. Pour en savoir plus sur la manière de tester et d’utiliser votre API, consultez Utiliser votre API.
- If your application did not launch successfully:
Use the Troubleshooting section to check your configuration.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si votre application n’a pas été lancée avec succès :
Utilisez la section Dépannage pour vérifier votre configuration.
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
diff --git a/fr-ca/articles/quickstart/backend/laravel/interactive.md b/fr-ca/articles/quickstart/backend/laravel/interactive.md
index ad7ab0c504..f909fe764e 100644
--- a/fr-ca/articles/quickstart/backend/laravel/interactive.md
+++ b/fr-ca/articles/quickstart/backend/laravel/interactive.md
@@ -1,57 +1,57 @@
---
title: Ajouter l’autorisation à votre application Laravel
-description: Ce guide montre comment intégrer Auth0 avec une nouvelle (ou existante) application Laravel 9 ou 10.
+description: Ce guide explique comment intégrer Auth0 avec une nouvelle (ou existante) application Laravel 9 ou 10.
interactive: true
files:
- files/routes/api
github:
- path: https://github.com/auth0-samples/laravel/tree/7.x/sample
+ path: sample
locale: fr-CA
---
# Ajouter l’autorisation à votre application Laravel
-La trousse SDK Laravel Auth0 vous permet d’ajouter rapidement une autorisation basée sur un jeton et un contrôle d’accès au routage à votre application Laravel. Ce guide montre comment intégrer Auth0 avec une nouvelle (ou existante) application Laravel 9 ou 10.
Les applications dorsales diffèrent des applications Web traditionnelles en ce sens qu’elles ne gèrent pas l’authentification des utilisateurs et n’ont pas d’interface utilisateur. Elles fournissent une API avec laquelle d’autres applications peuvent interagir. Elles acceptent les jetons d'accès des en-têtes Authorization
dans les requêtes pour contrôler l'accès aux routes.
Des applications frontales distinctes sont généralement créées pour interagir avec ces types d’applications dorsales. Il peut s’agir d’applications à page unique ou d’applications natives ou mobiles (pour lesquelles Auth0 fournit également des trousses SDK).
Pour interagir avec votre application dorsale, les utilisateurs doivent d’abord s’authentifier auprès d’Auth0 à l’aide de l’application frontale. L’application frontale récupère ensuite un jeton d’accès auprès d’Auth0, qu’elle peut utiliser pour adresser des demandes à votre application dorsale au nom de l’utilisateur.
Comme leur nom l’indique, les jetons d’accès sont conçus pour traiter les questions de contrôle d’accès (autorisation) et ne contiennent pas d’informations sur l’utilisateur. Les applications dorsales fonctionnent exclusivement avec des jetons d’accès. Vous pouvez récupérer des informations sur l’utilisateur créateur du jeton à l’aide de la Management API, que nous présenterons plus loin.
+La trousse SDK Laravel d’Auth0 vous permet d’ajouter rapidement une autorisation basée sur un jeton et un contrôle d’accès au routage à votre application Laravel. Ce guide explique comment intégrer Auth0 avec une nouvelle (ou existante) application Laravel 9 ou 10.
Les applications dorsales diffèrent des applications Web traditionnelles en ce sens qu’elles ne gèrent pas l’authentification des utilisateurs et n’ont pas d’interface utilisateur. Elles fournissent une API avec laquelle d’autres applications peuvent interagir. Elles acceptent les jetons d’accès des en-têtes Authorization
dans les requêtes pour contrôler l’accès aux routes.
Des applications frontales distinctes sont généralement créées pour interagir avec ces types d’applications dorsales. Il peut s’agir d’applications à page unique ou d’applications natives ou mobiles (pour lesquelles Auth0 fournit également des trousses SDK).
Pour interagir avec votre application dorsale, les utilisateurs doivent d’abord s’authentifier auprès d’Auth0 à l’aide de l’application frontale. L’application frontale récupère ensuite un jeton d’accès auprès d’Auth0, qu’elle peut utiliser pour adresser des demandes à votre application dorsale au nom de l’utilisateur.
Comme leur nom l’indique, les jetons d’accès sont conçus pour traiter les questions de contrôle d’accès (autorisation) et ne contiennent pas d’informations sur l’utilisateur. Les applications dorsales fonctionnent exclusivement avec des jetons d’accès. Vous pouvez récupérer des informations sur l’utilisateur créateur du jeton à l’aide de la Management API, que nous présenterons plus loin.
-## Installer Laravel
+## Installation de Laravel
-Si vous n’avez pas déjà configuré une application Laravel, ouvrez un shell dans un répertoire approprié pour un nouveau projet et exécutez la commande suivante :
composer create-project --prefer-dist laravel/laravel auth0-laravel-api ^9.0
+Si vous n’avez pas déjà configuré une application Laravel, ouvrez un shell dans un répertoire approprié pour un nouveau projet et exécutez la commande suivante :
composer create-project --prefer-dist laravel/laravel auth0-laravel-api ^9.0
-Toutes les commandes de ce guide supposent que vous les exécutez à partir de la racine de votre projet Laravel, donc vous devez bous placer cd
dans le nouveau répertoire du projet :
cd auth0-laravel-api
+Toutes les commandes de ce guide supposent que vous les exécutez à partir de la racine de votre projet Laravel, donc vous devez bous placer cd
dans le nouveau répertoire du projet :
cd auth0-laravel-api
-## Installation de la trousse SDK
+## Installation de la trousse SDK
-Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Laravel Auth0 :
composer require auth0/login:^7.8 --update-with-all-dependencies
+Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Laravel Auth0 :
composer require auth0/login:^7.8 --update-with-all-dependencies
-Générez ensuite un fichier de configuration pour la trousse SDK pour votre application :
php artisan vendor:publish --tag auth0
+Générez ensuite un fichier de configuration de la trousse SDK pour votre application :
php artisan vendor:publish --tag auth0
-## Configuration de la trousse SDK
+## Configuration SDK
-Exécuter la commande suivante à partir du répertoire de votre projet pour télécharger le CLI Auth0 :
curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
+Exécuter la commande suivante à partir du répertoire de votre projet pour télécharger le Interface de ligne de commande (CLI) Auth0 :
curl -sSfL https://raw.githubusercontent.com/auth0/auth0-cli/main/install.sh | sh -s -- -b .
-Ensuite, authentifiez le CLI avec votre compte Auth0 en choisissant « as a user (en tant qu’utilisateur) » lorsque vous y êtes invité :
./auth0 login
+Authentifiez ensuite la CLI avec votre compte Auth0 en choisissant « as a user (en tant qu’utilisateur) » lorsque vous y êtes invité :
./auth0 login
-Ensuite, créez une nouvelle application avec Auth0 :
./auth0 apps create \
+Puis créez une nouvelle application avec Auth0 :
./auth0 apps create \
--name "My Laravel Backend" \
@@ -71,7 +71,7 @@ locale: fr-CA
-Vous devez également créer une nouvelle API :
./auth0 apis create \
+Vous devez également créer une nouvelle API :
./auth0 apis create \
--name "My Laravel Backend API" \
@@ -85,7 +85,7 @@ locale: fr-CA
-Cela produit deux fichiers qui configurent la trousse SDK dans votre répertoire de projet.
Comme ces fichiers contiennent des renseignements personnels, il est important de les traiter comme étant sensibles. Vous devez vous assurer de ne pas les soumettre au contrôle de version. Si vous utilisez Git, vous devez les ajouter à votre fichier .gitignore
:
echo ".auth0.*.json" >> .gitignore
+Cela produit deux fichiers qui configurent la trousse SDK dans votre répertoire de projet.
Comme ces fichiers contiennent des renseignements personnels, il est important de les traiter comme étant sensibles. Vous devez vous assurer de ne pas les soumettre au contrôle de version. Si vous utilisez Git, vous devez les ajouter à votre fichier .gitignore
:
echo ".auth0.*.json" >> .gitignore
@@ -106,7 +106,7 @@ locale: fr-CA
-Vous pouvez également exiger que le jeton fourni dispose des permissions spécifiques en le combinant avec le logiciel médiateur can
de Laravel :
Route::get('/scope', function () {
+Vous pouvez également exiger que le jeton fourni dispose des permissions spécifiques en le combinant avec le logiciel médiateur can
de Laravel :
Route::get('/scope', function () {
return response()->json([
@@ -123,7 +123,7 @@ locale: fr-CA
## Informations de jeton {{{ data-action="code" data-code="routes/api.php#18:30" }}}
-Les informations sur le jeton d’accès fourni sont disponibles via la façade Auth
de Laravel, ou la fonction d’assistance auth()
.
Par exemple, pour récupérer l’identificateur et l’adresse électronique de l’utilisateur :
Route::get('/', function () {
+Les informations sur le jeton d’accès fourni sont disponibles via la façade Auth
de Laravel, ou la fonction d’assistance auth()
.
Par exemple, pour récupérer l’identificateur et l’adresse courriel de l’utilisateur :
Route::get('/', function () {
if (! auth()->check()) {
@@ -156,7 +156,7 @@ locale: fr-CA
## Récupérer des informations sur l’utilisateur {{{ data-action="code" data-code="routes/api.php#32:51" }}}
-Vous pouvez récupérer des informations sur l’utilisateur créateur du jeton d’accès à partir d’Auth0 en utilisant la Management API Auth0. La trousse SDK fournit une enveloppe pratique pour cette API, accessible par le biais de la méthode management()
de la trousse SDK.
Avant de faire des appels Management API, vous devez permettre à votre application de communiquer avec la Management API. Cela peut être fait à partir de la page API du Auth0 Dashboard, en choisissant la Auth0 Management API
et en sélectionnant l’onglet Machine to Machine Applications (Communication entre machines). Autoriser votre application Laravel, puis cliquez sur la flèche vers le bas pour choisir les permissions que vous souhaitez accorder.
Dans l’exemple suivant, vous devez accorder la permission read:users
. Une liste des points de terminaison API et les permissions requises peuvent être trouvées dans la documentation de la Management API.
use Auth0\Laravel\Facade\Auth0;
+Vous pouvez récupérer des informations sur l’utilisateur créateur du jeton d’accès à partir d’Auth0 en utilisant Auth0 Management API. La trousse SDK fournit une enveloppe pratique pour cette API, accessible par le biais de la méthode management()
de la trousse SDK.
Avant de faire des appels à la Management API, vous devez permettre à votre application de communiquer avec Management API. Cela peut être fait à partir de la page API d’Auth0 Dashboard, en choisissant Auth0 Management API
et en sélectionnant l’onglet Machine to Machine Applications (Communication entre machines). Autorisez votre application Laravel, puis cliquez sur la flèche vers le bas pour choisir les permissions que vous souhaitez accorder.
Dans l’exemple suivant, vous devez accorder la permission read:users
. Une liste des points de terminaison API et les permissions requises peuvent être trouvées dans la documentation de Management API.
use Auth0\Laravel\Facade\Auth0;
@@ -216,10 +216,10 @@ Route::get('/me', function () {
## Récupérer un jeton de test
-Pour en savoir plus sur la récupération des jetons d’accès, cliquez ici. Pour ce guide rapide, cependant, vous pouvez simplement utiliser un jeton d’accès à partir de la vue « test » des paramètres de votre API.
La route /me
que nous avons créée ci-dessus ne fonctionnera pas avec un jeton de test car aucun utilisateur réel n’y est associé.
Guide rapide Laravel - Étape 8 - Point de contrôle Ouvrez un shell et essayez d’envoyer des requêtes à votre application.
Commencez par demander la route publique :
curl --request GET \ --url http://localhost:8000/api \ --header 'Accept: application/json'
Ensuite, utilisez votre jeton d’accès dans un en-tête Authorization
pour demander une route protégée :
curl --request GET \ --url http://localhost:8000/api/private \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'
Enfin, essayez de demander la route protégée par des permissions, qui n’aboutira que si le jeton d’accès dispose de la permission read:messages
:
curl --request GET \ --url http://localhost:8000/api/scope \ --header 'Accept: application/json' \ --header 'Authorization: Bearer YOUR_ACCESS_TOKEN'
+Pour en savoir plus sur la récupération des jetons d’accès, cliquez ici. Pour ce démarrage rapide, vous pouvez simplement utiliser un jeton d’accès à partir de l’affichage « test » des paramètres de votre API.
La route /me
que nous avons créée ci-dessus ne fonctionnera pas avec un jeton de test car aucun utilisateur réel n’y est associé.
Démarrage rapide Laravel – Étape 8 – Point de contrôle Ouvrez un shell et essayez d’envoyer des requêtes à votre application.
Commencez par demander la route publique :
curl --request GET \ --url http://localhost:8000/api \ --header ’Accept: application/json’
Ensuite, utilisez votre jeton d’accès dans un en-tête Authorization
pour demander une route protégée :
curl --request GET \ --url http://localhost:8000/api/private \ --header ’Accept: application/json’ \ --header ’Authorization : Bearer YOUR_ACCESS_TOKEN’
Enfin, essayez de demander la route protégée par des permissions, qui n’aboutira que si le jeton d’accès dispose de la permission read:messages
:
curl --request GET \ --url http://localhost:8000/api/scope \ --header ’Accept: application/json’ \ --header ’Authorization : Bearer YOUR_ACCESS_TOKEN’
- Here are a couple of things to try:
Try running php artisan optimize:clear
to clear Laravel's cache.
Ensure your .auth0.app.json
and .auth0.api.json
files are at the root of your project.
Ensure you have enabled your Laravel application as a Machine-to-Machine application and granted it all the necessary scopes for the Auth0 Management API
from the Auth0 Dashboard.
Encountering problems? Check the SDK's documentation or our documentation hub. You should also consider visiting the community where our team and other community members can help answer your questions.
+ Essayez ce qui suit :
Exécutez php artisan optimize:clear
pour vider le cache Laravel.
Assurez-vous que vos fichiers .auth0.app.json
et .auth0.api.json
se trouvent à la racine de votre projet.
Assurez-vous d’avoir activé votre application Laravel en tant qu’application de communication entre machines et de lui avoir accordé toutes les permissions nécessaires pour Auth0 Management API
à partir de Auth0 Dashboard.
Vous rencontrez des problèmes? Consultez la documentation de la trousse SDK ou notre centre de documentation. N’hésitez pas à consulter la communauté où notre équipe et d’autres membres pourront répondre à vos questions.
- Lecture supplémentaire
Référentiels et modèles d’utilisateurs étend la trousse SDK Laravel Auth0 pour utiliser des modèles d’utilisateurs personnalisés, et comment stocker et récupérer les utilisateurs à partir d’une base de données.
Événements d'appels explique comment écouter les événements soulevés par la trousse SDK Laravel Auth0, pour personnaliser pleinement le comportement de votre intégration.
Le support de la Management API est intégré à la trousse SDK Laravel Auth0, vous permettant d’interagir avec la Management API à partir de votre application Laravel.
+ Lecture supplémentaire
Référentiels et modèles d’utilisateurs étend la trousse SDK Laravel Auth0 et permet d’utiliser des modèles d’utilisateurs personnalisés et de stocker et de récupérer des utilisateurs à partir d’une base de données.
Événements d’appels explique comment détecter les événements soulevés par la trousse SDK Laravel Auth0, pour personnaliser pleinement le comportement de votre intégration.
Le soutien de Management API est intégré à la trousse SDK Laravel Auth0, vous permettant d’interagir avec Management API à partir de votre application Laravel.
diff --git a/fr-ca/articles/quickstart/backend/nodejs/interactive.md b/fr-ca/articles/quickstart/backend/nodejs/interactive.md
index e3b612a992..41a621ee45 100644
--- a/fr-ca/articles/quickstart/backend/nodejs/interactive.md
+++ b/fr-ca/articles/quickstart/backend/nodejs/interactive.md
@@ -1,53 +1,317 @@
---
title: Ajouter une autorisation à votre application API Express.js
-description: Ce guide explique comment intégrer Auth0 à n’importe quelle application API Express.js, nouvelle ou existante, en utilisant le package express-oauth2-jwt-bearer .
+description: Ce guide explique comment intégrer Auth0 à n’importe quelle application API Express.js, nouvelle ou existante, en utilisant le package express-oauth2-jwt-bearer.
interactive: true
files:
- files/server
github:
- path: https://github.com/auth0-samples/auth0-express-api-samples/tree/master/01-Authorization-RS256
+ path: 01-Authorization-RS256
locale: fr-CA
---
# Ajouter une autorisation à votre application API Express.js
-Ce guide explique comment intégrer Auth0 à n’importe quelle application API Express.js, nouvelle ou existante, en utilisant le package express-oauth2-jwt-bearer
.
Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, utilisez le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.
Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage. Chaque API Auth0 utilise l’identificateur API, dont votre application a besoin pour valider le jeton d’accès.
Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.
+Ce guide explique comment intégrer Auth0 à n’importe quelle application API Express.js, nouvelle ou existante, en utilisant le package express-oauth2-jwt-bearer
.
Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, utilisez le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.
Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage. Chaque API Auth0 utilise l’identificateur API, dont votre application a besoin pour valider le jeton d’accès.
Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.
## Définir les autorisations
-Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès en particulier. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section APIs (API) d'Auth0 Dashboard.

Cet exemple utilise la permission read:messages
.
+Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API d’Auth0 Dashboard.

Cet exemple utilise la permission read:messages
.
## Installer les dépendances
-Tout d’abord, installez la trousse SDK avec npm
.
npm install --save express-oauth2-jwt-bearer
+Tout d’abord, installez la trousse SDK avec npm
.
npm install --save express-oauth2-jwt-bearer
-## Configurer le logiciel médiateur {{{ data-action="code" data-code="server.js#1:10" }}}
+## Configurer l’intergiciel {{{ data-action="code" data-code="server.js#1:10" }}}
-Configurez express-oauth2-jwt-bearer
avec votre domaine et votre identificateur API.
Le logiciel médiateur checkJwt
présenté à droite vérifie si le jeton d’accès de l’utilisateur inclus dans la demande est valide. Si le jeton n’est pas valide, l’utilisateur reçoit une erreur 401 Authorization (Autorisation 401) lorsqu’il tente d’accéder aux points de terminaison.
Le logiciel médiateur ne vérifie pas si le jeton dispose d’une permission suffisante pour accéder aux ressources demandées.
+Configurez express-oauth2-jwt-bearer
avec votre domaine et votre identificateur API.
L’intergiciel checkJwt
présenté à droite vérifie si le jeton d’accès de l’utilisateur inclus dans la demande est valide. Si le jeton n’est pas valide, l’utilisateur reçoit une erreur « 401 Authorization » (Autorisation 401) lorsqu’il tente d’accéder aux points de terminaison.
L’intergiciel ne vérifie pas si le jeton dispose d’une permission suffisante pour accéder aux ressources demandées.
## Protéger les points de terminaison des API {{{ data-action="code" data-code="server.js#12:32" }}}
-Pour protéger une route individuelle en exigeant un JWT valide, configurez la route avec le logiciel médiateur checkJwt
développé à partir de express-oauth2-jwt-bearer
.
Vous pouvez configurer des routes individuelles pour qu’elles recherchent une permission particulière. Pour ce faire, configurez un autre logiciel médiateur avec la méthode requiresScope
. Fournissez les permissions requises et appliquez le logiciel médiateur à toutes les routes auxquelles vous souhaitez ajouter une autorisation.
Transmettez les logiciels médiateurs checkJwt
et requiredScopes
à la route que vous souhaitez protéger.
Dans cette configuration, seuls les jetons d’accès avec la permission read:messages
peuvent accéder au point de terminaison.
Faire un appel à votre API
Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test de vos API settings (Paramètres API).

Fournir le Jeton d’accès comme un en-tête Authorization
dans vos demandes.
curl --request GET \
+Pour protéger une route individuelle en exigeant un JWT valide, configurez la route avec le logiciel médiateur checkJwt
développé à partir de express-oauth2-jwt-bearer
.
Vous pouvez configurer des routes individuelles pour qu’elles recherchent une permission particulière. Pour ce faire, configurez un autre logiciel médiateur avec la méthode requiresScope
. Fournissez les permissions requises et appliquez le logiciel médiateur à toutes les routes auxquelles vous souhaitez ajouter une autorisation.
Transmettez les logiciels médiateurs checkJwt
et requiredScopes
à la route que vous souhaitez protéger.
Dans cette configuration, seuls les jetons d’accès avec la permission read:messages
peuvent accéder au point de terminaison.
Faire un appel à votre API
Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).

Fournir le Jeton d’accès comme un en-tête Authorization
dans vos demandes.
- --url http://${account.namespace}/api_path \
+
+
+ curl --request get \
+
+ --url http:///%7ByourDomain%7D/api_path \
+
+ --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///%7ByourDomain%7D/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///%7ByourDomain%7D/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///%7ByourDomain%7D/api_path")
+
+ .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+ .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+ method: 'get',
+
+ url: 'http:///%7ByourDomain%7D/api_path',
+
+ headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+ console.log(response.data);
+
+}).catch(function (error) {
+
+ console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///%7ByourDomain%7D/api_path"]
+
+ cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+ timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+NSURLSession *session = [NSURLSession sharedSession];
+
+NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
+
+ completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
+
+ if (error) {
+
+ NSLog(@"%@", error);
+
+ } else {
+
+ NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
+
+ NSLog(@"%@", httpResponse);
+
+ }
+
+ }];
+
+[dataTask resume];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+ CURLOPT_URL => "http:///%7ByourDomain%7D/api_path",
+
+ CURLOPT_RETURNTRANSFER => true,
+
+ CURLOPT_ENCODING => "",
+
+ CURLOPT_MAXREDIRS => 10,
+
+ CURLOPT_TIMEOUT => 30,
+
+ CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+ CURLOPT_CUSTOMREQUEST => "get",
+
+ CURLOPT_HTTPHEADER => [
+
+ "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+ ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+ echo "cURL Error #:" . $err;
+
+} else {
+
+ echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "%7ByourDomain%7D/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///%7ByourDomain%7D/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///%7ByourDomain%7D/api_path")! as URL,
+
+ cachePolicy: .useProtocolCachePolicy,
+
+ timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+let session = URLSession.shared
+
+let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
+
+ if (error != nil) {
+
+ print(error)
+
+ } else {
+
+ let httpResponse = response as? HTTPURLResponse
+
+ print(httpResponse)
+
+ }
+
+})
+
+
+
+dataTask.resume()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
-
+
+
+
+
+
+
-API Node JS - Étape 4 - Point de contrôle Maintenant que vous avez configuré votre application, exécutez-la pour vérifier que :
GET /api/public
est disponible pour les demandes non authentifiées.
GET /api/private
est disponible pour les demandes authentifiées.
GET /api/private-scoped
est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages
.
+API Node JS - Étape 4 - Point de contrôle Maintenant que vous avez configuré votre application, exécutez-la pour vérifier que :
GET /api/public
est disponible pour les demandes non authentifiées.
GET /api/private
est disponible pour les demandes authentifiées.
GET /api/private-scoped
est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages
.
- If your application did not start successfully:
Verify you added the token as the Authorization
header
Ensure the token has the correct scopes. Verify with jwt.io.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si votre application n’a pas démarré avec succès :
Vérifiez que vous avez ajouté le jeton en tant qu’en-tête d'autorisation
Assurez-vous que le jeton est doté des permissions appropriées. Vérifiez avec jwt.io.
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
diff --git a/fr-ca/articles/quickstart/backend/php/interactive.md b/fr-ca/articles/quickstart/backend/php/interactive.md
index 0e00587300..ff549c5a65 100644
--- a/fr-ca/articles/quickstart/backend/php/interactive.md
+++ b/fr-ca/articles/quickstart/backend/php/interactive.md
@@ -6,7 +6,7 @@ files:
- files/index
- files/router
github:
- path: https://github.com/auth0-samples/auth0-php-api-samples/tree/main/app
+ path: app
locale: fr-CA
---
@@ -15,15 +15,15 @@ locale: fr-CA
Auth0 vous permet d’ajouter rapidement une autorisation de point de terminaison basée sur un jeton à presque tous les types d’application. Ce guide explique comment intégrer Auth0, ajouter une autorisation basée sur un jeton et protéger les routes de l’application en utilisant la trousse SDK Auth0 PHP.
Pour utiliser ce guide rapide, vous devez :
Vous inscrire à un compte Auth0 gratuit ou vous connecter à Auth0.
Avoir un projet PHP fonctionnel que vous souhaitez intégrer à Auth0. Vous pouvez également consulter ou télécharger une application faisant office d’exemple lorsque vous vous connectez.
-## Configurer Auth0
+## Configuration d’Auth0
-Pour utiliser les services Auth0, vous devez avoir une application enregistrée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous configurez le fonctionnement de l’authentification pour votre projet.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionnez une application existante qui représente le projet que vous souhaitez intégrer. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilise pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Consultez un exemple d’application si vous préférez explorer une configuration complète.
Configurer une API
De même, vous devez créer une nouvelle API Auth0 ou utiliser une API existante qui représente le projet que vous intégrez à partir du Dashboard. Choisissez un identificateur unique pour l’API et notez-le. Cet identificateur vous sera nécessaire pour configurer votre application ci-dessous.
+Pour utiliser les services Auth0, vous devez avoir une application enregistrée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous configurez le fonctionnement de l’authentification pour votre projet.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionnez une application existante qui représente le projet que vous souhaitez intégrer. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilise pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.
Configurer une API
De même, vous devez créer une nouvelle API Auth0 ou utiliser une API existante qui représente le projet que vous intégrez à partir du Dashboard. Choisissez un identificateur unique pour l’API et notez-le. Cet identificateur vous sera nécessaire pour configurer votre application ci-dessous.
-## Installer la trousse SDK Auth0 PHP {{{ data-action="code" data-code="index.php" }}}
+## Installer la trousse SDK PHP Auth0 {{{ data-action="code" data-code="index.php" }}}
-Auth0 fournit une trousse SDK PHP (Auth0-PHP) pour simplifier le processus de mise en œuvre de l’authentification et de l’autorisation Auth0 dans les applications PHP.
La trousse SDK Auth0 PHP nécessite l’installation des bibliothèques HTTP compatibles PSR-17 et PSR-18 pour la gestion des requêtes réseau. Si vous ne disposez pas de bibliothèques, vous pouvez installer des choix fiables en exécutant les commandes suivantes dans votre terminal :
cd <your-project-directory>
+Auth0 fournit une trousse SDK PHP (Auth0-PHP) pour simplifier le processus de mise en œuvre de l’authentification et de l’autorisation Auth0 dans les applications PHP.
La trousse SDK PHP Auth0 nécessite l’installation des bibliothèques HTTP compatibles PSR-17 et PSR-18 pour la gestion des requêtes réseau. Si vous ne disposez pas de bibliothèques disponibles, vous pouvez installer des choix fiables en exécutant les commandes suivantes dans votre terminal :
cd <your-project-directory>
composer require symfony/http-client nyholm/psr7
@@ -33,18 +33,18 @@ locale: fr-CA
-Configurer la trousse SDK Auth0
Pour que la trousse SDK fonctionne correctement, vous devez définir les propriétés suivantes dans la trousse SDK Auth0 lors de l’initialisation :
strategy
: La stratégie permet d’orienter le comportement de la trousse SDK en fonction du cas d’utilisation de votre application. Dans ce cas, vous souhaitez définir la constante
Auth0\SDK\Configuration\SdkConfiguration::STRATEGY_API
domain : Le domaine de votre locataire Auth0. En général, vous le trouverez dans Auth0 Dashboard sous vos Application Settings (Paramètres d’application) dans le champ Domain (Domaine). Si vous utilisez un domaine personnalisé, définissez-le sur la valeur de votre domaine personnalisé.
clientId: L’identificateur de l’application Auth0 que vous avez configurée précédemment dans ce guide rapide. Vous pouvez le trouver dans Auth0 Dashboard sous vos Application Settings (Paramètres d’application) dans le champ Client ID (ID client).
clientSecret: Le secret de l’application Auth0 que vous avez créée plus tôt dans ce guide rapide. Le secret client se trouve dans Auth0 Dashboard sous vos Application Settings (Paramètres d’application) dans le champ Client Secret (Secret client).
audience: L’identificateur de l’API Auth0 que vous avez enregistré ci-dessus. Il doit être fourni sous la forme d’un tableau.
API PHP - Étape 2 - Point de contrôle Votre SDK Auth0 est maintenant correctement configuré. Exécutez votre application pour vérifier que :
La trousse SDK s’initialise correctement.
Votre application ne génère aucune erreur liée à Auth0.
+Configurer la trousse SDK Auth0
Pour que la trousse SDK fonctionne correctement, vous devez définir les propriétés suivantes dans la trousse SDK Auth0 lors de l’initialisation :
strategy
: La stratégie aide à orienter le comportement du SDK en ce qui concerne l’utilisation de votre application. Dans ce cas, vous souhaitez la définir sur la constante
Auth0\SDK\Configuration\SdkConfiguration::STRATEGY_API
domain : Le domaine de votre locataire Auth0. En général, vous le trouverez dans Auth0 Dashboard dans Application Settings (Paramètres d’application) dans le champ Domain (Domaine). Si vous utilisez un domaine personnalisé, définissez-le plutôt sur la valeur de votre domaine personnalisé.
clientId : L’identifiant de l’application Auth0 que vous avez configurée précédemment dans le démarrage rapide. Vous pouvez le trouver dans Auth0 Dashboard, dans la rubrique des paramètres de votre application, dans le champ Client ID (ID client).
clientSecret : Le secret de l’application Auth0 que vous avez créée plus tôt dans le démarrage rapide. Le secret client se trouve dans Auth0 Dashboard, dans Application Settings (Paramètres d’application) dans le champ Client Secret (Secret client).
public : L’identificateur de l’API Auth0 que vous avez enregistré ci-dessus. Il doit être fourni sous la forme d’un tableau.
API PHP - Étape 2 - Point de contrôle Votre trousse SDK Auth0 est maintenant correctement configurée. Exécutez votre application pour vérifier que :
la trousse SDK s’initialise correctement,
votre application ne génère aucune erreur liée à Auth0.
- Sorry about that. Here's a couple things to double check:
Make sure the correct application is selected.
Did you save after entering your URLs?
Make sure the domain and client ID imported correctly.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
Assurez-vous que la bonne application est sélectionnée
Avez-vous procédé à un enregistrement après avoir saisi vos URL?
Assurez-vous que le domaine et l’identifiant client ont été importés correctement.
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
-## Écouter les jetons du porteur {{{ data-action="code" data-code="index.php#20:23" }}}
+## Détecter les jetons du porteur {{{ data-action="code" data-code="index.php#20:23" }}}
-Développez ensuite votre application pour récupérer et traiter les jetons de porteur. Les jetons de porteur sont des jetons d’accès fournis à votre API avec des demandes de clients au nom d’un utilisateur. Les jetons d’accès approuvent ou refusent l’accès aux routes de votre application. C’est ce que l’on appelle l’autorisation de point de terminaison.
La méthode la plus simple pour récupérer les jetons d’accès à partir d’une requête est la méthode getBearerToken()
de la trousse SDK PHP. Cette méthode récupère les jetons à partir des paramètres GET, des corps POST, des en-têtes de requête et d’autres sources. Dans ce cas, la trousse SDK PHP traite les jetons transmis par les requêtes GET dans le paramètre token
ou dans l’en-tête HTTP Authorization
.
+Développez ensuite votre application pour récupérer et traiter les jetons de porteur. Les jetons de porteur sont des jetons d’accès fournis à votre API avec des demandes de clients au nom d’un utilisateur. Les jetons d’accès approuvent ou refusent l’accès aux routes de votre application. C’est ce que l’on appelle l’autorisation de point de terminaison.
La méthode la plus simple pour récupérer les jetons d’accès à partir d’une requête est la méthode getBearerToken()
de la trousse SDK PHP. Cette méthode récupère les jetons à partir des paramètres GET, des corps POST, des en-têtes de requête et d’autres sources. Dans ce cas, la trousse SDK PHP traite les jetons transmis par les requêtes GET dans le paramètre token
ou dans l’en-tête HTTP Authorization
.
## Créer et configurer des routes {{{ data-action="code" data-code="router.php" }}}
@@ -58,9 +58,9 @@ locale: fr-CA
## Configurer l’autorisation des points de terminaison {{{ data-action="code" data-code="router.php#21:31" }}}
-Maintenant que vous avez configuré votre application Auth0, la trousse SDK Auth0 PHP, et que votre application récupère les jetons de porteur des requêtes, l’étape suivante est de configurer l’autorisation des points de terminaison pour votre projet. La méthode getBearerToken()
que vous avez mise en œuvre ci-dessus renvoie une classe Token
qui contient des informations sur l’accès à la requête.
Étant donné que la méthode getBearerToken()
valide et vérifie automatiquement la requête entrante, votre application détermine les détails du jeton d’accès en évaluant la réponse de la méthode. Si la réponse est nulle, c’est qu’aucun jeton valide n’a été fourni. Dans le cas contraire, inspectez le contenu de la réponse pour en savoir plus sur la demande.
Dans le panneau interactif à droite, une validation de la réponse (null ou non) permet de filtrer l’accès à la route /api/private
.
+Maintenant que vous avez configuré votre application Auth0, la trousse SDK PHP Auth0, et que votre application récupère les jetons de porteur des requêtes, l’étape suivante est de configurer l’autorisation des points de terminaison pour votre projet. La méthode getBearerToken()
que vous avez mise en œuvre ci-dessus renvoie une classe Token
qui contient des informations sur l’accès à la requête.
Étant donné que la méthode getBearerToken()
valide et vérifie automatiquement la requête entrante, votre application détermine les détails du jeton d’accès en évaluant la réponse de la méthode. Si la réponse est nulle, c’est qu’aucun jeton valide n’a été fourni. Dans le cas contraire, inspectez le contenu de la réponse pour en savoir plus sur la demande.
Dans le panneau interactif à droite, une validation de la réponse (null ou non) permet de filtrer l’accès à la route /api/private
.
## Autoriser avec des permissions {{{ data-action="code" data-code="router.php#33:48" }}}
-Dans certains cas, vous pouvez souhaiter filtrer l’accès à une route spécifique en fonction des permissions demandées dans un jeton d’accès. Comme le montre le panneau interactif de droite, évaluez le contenu de la propriété ’scope’ de la réponse de la méthode getBearerToken()
pour vérifier les permissions accordées par le jeton d’accès.
+Dans certains cas, vous pouvez souhaiter filtrer l’accès à une route particulière en fonction des permissions demandées dans un jeton d’accès. Comme le montre le panneau interactif de droite, évaluez le contenu de la propriété ’scope’ de la réponse de la méthode getBearerToken()
pour vérifier les permissions accordées par le jeton d’accès.
diff --git a/fr-ca/articles/quickstart/backend/python/interactive.md b/fr-ca/articles/quickstart/backend/python/interactive.md
index 209c146e0a..94d4e17c3c 100644
--- a/fr-ca/articles/quickstart/backend/python/interactive.md
+++ b/fr-ca/articles/quickstart/backend/python/interactive.md
@@ -6,19 +6,19 @@ files:
- files/validator
- files/server
github:
- path: https://github.com/auth0-samples/auth0-python-api-samples/tree/master/00-Starter-Seed
+ path: 00-Starter-Seed
locale: fr-CA
---
# Ajouter une autorisation à votre application API Flask
-Ce guide explique comment intégrer Auth0 à n’importe quelle API Python, nouvelle ou ancienne, développée avec Flask.
Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.
Vous pouvez également lire notre guide de démarrage qui vous aide à configurer votre première API via Auth0 Dashboard.
Toute API dans Auth0 est configurée à l’aide d’un identificateur d’API que votre code d’application utilisera comme Audience (Public) pour valider le jeton d’accès.
Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.
+Ce guide explique comment intégrer Auth0 à n’importe quelle API Python, nouvelle ou ancienne, développée avec Flask.
Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante qui représente le projet avec lequel vous souhaitez vous intégrer.
Vous pouvez également lire notre guide de démarrage qui vous aide à configurer votre première API via Auth0 Dashboard.
Toute API dans Auth0 est configurée à l’aide d’un identificateur d’API que votre code d’application utilisera comme Audience (Public) pour valider le jeton d’accès.
Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.
## Définir les autorisations
-Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès en particulier. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section APIs (API) d'Auth0 Dashboard.
![Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)](//images.ctfassets.net/cdy7uua7fh8z/1s3Yp5zqJiKiSWqbPSezNO/677a3405b2853f5fdf9e42f6e83ceba7/Quickstarts_API_-_French.png)
Cet exemple utilise la permission read:messages
.
+Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès en particulier. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section APIs (API) d'Auth0 Dashboard.
![Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)](//images.ctfassets.net/cdy7uua7fh8z/1s3Yp5zqJiKiSWqbPSezNO/677a3405b2853f5fdf9e42f6e83ceba7/Quickstarts_API_-_French.png)
Cet exemple utilise la permission read:messages
.
## Installer des dépendances
@@ -38,17 +38,281 @@ locale: fr-CA
## Créer le validateur JWT {{{ data-action="code" data-code="validator.py" }}}
-Nous allons utiliser une bibliothèque appelée Authlib pour créer un ResourceProtector, qui est un type de Flask decorator qui protège nos ressources (routes API) avec un validateur donné.
Le validateur validera le jeton d’accès que nous transmettons à la ressource en vérifiant qu’il a une signature et des demandes valides.
Nous pouvons utiliser le validateur JWTBearerTokenValidator
d’AuthLib avec quelques ajustements pour nous assurer qu’il est conforme à nos exigences de validation des jetons d’accès.
Pour créer notre Auth0JWTBearerTokenValidator
, nous devons lui transmettre notre domain
et notre audience
(Identificateur API). Il obtiendra alors la clé publique nécessaire pour vérifier la signature du jeton et la transmettra à la classe JWTBearerTokenValidator
.
Nous remplacerons ensuite les claims_options
de la classe pour nous assurer que les demandes d’échéance, de public et d’émission du jeton sont validées selon nos exigences.
+Nous allons utiliser une bibliothèque appelée Authlib pour créer un ResourceProtector, qui est un type de Flask decorator qui protège nos ressources (routes API) avec un validateur donné.
Le validateur validera le jeton d’accès que nous transmettons à la ressource en vérifiant qu’il a une signature et des demandes valides.
Nous pouvons utiliser le validateur JWTBearerTokenValidator
d’AuthLib avec quelques ajustements pour nous assurer qu’il est conforme à nos exigences de validation des jetons d’accès.
Pour créer notre Auth0JWTBearerTokenValidator
, nous devons lui transmettre notre domain
et notre audience
(Identificateur API). Il obtiendra alors la clé publique nécessaire pour vérifier la signature du jeton et la transmettra à la classe JWTBearerTokenValidator
.
Nous remplacerons ensuite les claims_options
de la classe pour nous assurer que les demandes d’échéance, de public et d’émission du jeton sont validées selon nos exigences.
## Créer une application Flask {{{ data-action="code" data-code="server.py" }}}
-Ensuite, nous allons créer une application Flask avec 3 routes API :
/api/public
Un point de terminaison public qui ne nécessite aucune authentification.
/api/private
Un point de terminaison privé qui nécessite un jeton d’accès JWT valide.
/api/private-scoped
Un point de terminaison privé qui nécessite un jeton d’accès JWT valide contenant la scope
donnée.
Les routes protégées auront un décorateur require_auth
, qui est un ResourceProtector
qui utilise le Auth0JWTBearerTokenValidator
que nous avons créé précédemment.
Pour créer Auth0JWTBearerTokenValidator
, nous devons lui transmettre le domaine de notre locataire et l’identificateur de l’API que nous avons créée précédemment.
Le decorator require_auth
sur la route private_scoped
prend en charge un argument supplémentaire "read:messages"
, qui vérifie la permission du jeton d’accès que nous avons créé précédemment.
Faire un appel à votre API
Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).
![Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/8aa621c6d95e3f21115493a19ab05f7a/Quickstart_Example_App_-_API.png)
Fournir le jeton d’accès comme un en-tête Authorization
dans vos demandes.
curl --request GET \
+Ensuite, nous allons créer une application Flask avec 3 routes API :
/api/public
Un point de terminaison public qui ne nécessite aucune authentification.
/api/private
Un point de terminaison privé qui nécessite un jeton d’accès JWT valide.
/api/private-scoped
Un point de terminaison privé qui nécessite un jeton d’accès JWT valide contenant la scope
donnée.
Les routes protégées auront un décorateur require_auth
, qui est un ResourceProtector
qui utilise le Auth0JWTBearerTokenValidator
que nous avons créé précédemment.
Pour créer Auth0JWTBearerTokenValidator
, nous devons lui transmettre le domaine de notre locataire et l’identificateur de l’API que nous avons créée précédemment.
Le decorator require_auth
sur la route private_scoped
prend en charge un argument supplémentaire "read:messages"
, qui vérifie la permission du jeton d’accès que nous avons créé précédemment.
Faire un appel à votre API
Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).
![Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/8aa621c6d95e3f21115493a19ab05f7a/Quickstart_Example_App_-_API.png)
Fournir le jeton d’accès comme un en-tête Authorization
dans vos demandes.
- --url http://${account.namespace}/api_path \
+
+
+ curl --request get \
+
+ --url 'http:///${account.namespace}/api_path' \
+
+ --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///${account.namespace}/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+
+ .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+ .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+ method: 'get',
+
+ url: 'http:///${account.namespace}/api_path',
+
+ headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+ console.log(response.data);
+
+}).catch(function (error) {
+
+ console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///${account.namespace}/api_path"]
+
+ cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+ timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+NSURLSession *session = [NSURLSession sharedSession];
+
+NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
+
+ completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
+
+ if (error) {
+
+ NSLog(@"%@", error);
+
+ } else {
+
+ NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
+
+ NSLog(@"%@", httpResponse);
+
+ }
+
+ }];
+
+[dataTask resume];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+ CURLOPT_URL => "http:///${account.namespace}/api_path",
+
+ CURLOPT_RETURNTRANSFER => true,
+
+ CURLOPT_ENCODING => "",
+
+ CURLOPT_MAXREDIRS => 10,
+
+ CURLOPT_TIMEOUT => 30,
+
+ CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+ CURLOPT_CUSTOMREQUEST => "get",
+
+ CURLOPT_HTTPHEADER => [
+
+ "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+ ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+ echo "cURL Error #:" . $err;
+
+} else {
+
+ echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "/${account.namespace}/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///${account.namespace}/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///${account.namespace}/api_path")! as URL,
+
+ cachePolicy: .useProtocolCachePolicy,
+
+ timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+let session = URLSession.shared
+
+let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
+
+ if (error != nil) {
+
+ print(error)
+
+ } else {
+
+ let httpResponse = response as? HTTPURLResponse
+
+ print(httpResponse)
+
+ }
+
+})
+
+
+
+dataTask.resume()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
-
+
+
+
+
+
+
diff --git a/fr-ca/articles/quickstart/backend/rails/interactive.md b/fr-ca/articles/quickstart/backend/rails/interactive.md
index 36a3334922..8e88006127 100644
--- a/fr-ca/articles/quickstart/backend/rails/interactive.md
+++ b/fr-ca/articles/quickstart/backend/rails/interactive.md
@@ -1,6 +1,6 @@
---
title: Ajouter une autorisation à votre API Ruby on Rails
-description: Ce tutoriel effectue la validation des jetons d’accès en utilisant le Gem jwt dans une classe Auth0Client personnalisée.
+description: Ce tutoriel effectue la validation des jetons d’accès en utilisant le gem jwt dans une classe Auth0Client personnalisée.
interactive: true
files:
- files/app/controllers/application_controller
@@ -9,24 +9,24 @@ files:
- files/app/controllers/public_controller
- files/app/controllers/private_controller
github:
- path: https://github.com/auth0-samples/auth0-rubyonrails-api-samples/tree/master/01-Authentication-RS256
+ path: 01-Authentication-RS256
locale: fr-CA
---
# Ajouter une autorisation à votre API Ruby on Rails
-Ce tutoriel effectue la validation des jetons d’accès en utilisant le Gem jwt dans une classe Auth0Client
personnalisée. Un Concern appelé Secured
est utilisé pour autoriser les points de terminaison qui nécessitent une authentification par le biais d’un jeton d’accès entrant.
Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.
Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage.
Chaque API Auth0 utilise l’identifiant d’API, dont votre application a besoin pour valider le jeton d’accès.
Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.
+Ce tutoriel effectue la validation des jetons d’accès en utilisant le gem jwt dans une classe Auth0Client
personnalisée. Un concern appelé Secured
est utilisé pour autoriser les points de terminaison qui nécessitent une authentification par le biais d’un jeton d’accès entrant.
Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.
Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage.
Chaque API Auth0 utilise l’identificateur API, dont votre application a besoin pour valider le jeton d’accès.
Vous ne connaissez pas Auth0? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.
## Définir les autorisations
-Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès en particulier. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section APIs (API) d'Auth0 Dashboard.
![Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)](//images.ctfassets.net/cdy7uua7fh8z/1s3Yp5zqJiKiSWqbPSezNO/677a3405b2853f5fdf9e42f6e83ceba7/Quickstarts_API_-_French.png)
Cet exemple utilise la permission read:messages
.
+Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API d’Auth0 Dashboard.
![Auth0 Dashboard> Applications > APIs (API) > [Specific API (API précise)] > Onglet Permissions (Autorisations)](//images.ctfassets.net/cdy7uua7fh8z/1s3Yp5zqJiKiSWqbPSezNO/677a3405b2853f5fdf9e42f6e83ceba7/Quickstarts_API_-_French.png)
Cet exemple utilise la permission read:messages
.
## Installer les dépendances
-Installer le Gem jwt.
gem 'jwt'
+Installer le gem jwt.
gem 'jwt'
bundle install
@@ -37,17 +37,17 @@ locale: fr-CA
## Créer une classe Auth0Client {{{ data-action="code" data-code="app/controllers/concerns/secured.rb" }}}
-Créez une classe appelée Auth0Client
. Cette classe décode et vérifie le jeton d’accès entrant provenant de l’en-tête Authorization
de la demande.
La classe Auth0Client
récupère la clé publique de votre locataire Auth0 et l’utilise pour vérifier la signature du jeton d’accès. La structure Token
définit une méthode validate_permissions
pour rechercher une scope
particulière dans un jeton d’accès en fournissant un tableau des permissions requises et en vérifiant si elles sont présentes dans la charge utile du jeton.
+Créez une classe appelée Auth0Client
. Cette classe décode et vérifie le jeton d’accès entrant provenant de l’en-tête Authorization
de la requête.
La classe Auth0Client
récupère la clé publique de votre locataire Auth0 et l’utilise pour vérifier la signature du jeton d’accès. La structure Token
définit une méthode validate_permissions
pour rechercher une scope
particulière dans un jeton d’accès en fournissant un tableau des permissions requises et en vérifiant si elles sont présentes dans la charge utile du jeton.
## Définir un concern Secured {{{ data-action="code" data-code="app/controllers/concerns/secured.rb" }}}
-Créez un Concern appelé Secured
qui recherche le jeton d’accès dans l’en-tête Authorization
d’une requête entrante.
Si le jeton est présent, Auth0Client.validate_token
utilisera le Gem jwt
pour vérifier la signature du jeton et valider les demandes du jeton.
Outre la vérification de la validité du jeton d’accès, Concern possède un mécanisme permettant de confirmer que le jeton dispose d’une permission suffisante pour accéder aux ressources demandées. Dans cet exemple, nous définissons une méthode validate_permissions
qui reçoit un bloc et vérifie les autorisations en appelant la méthode Token.validate_permissions
de la classe Auth0Client
.
Pour la route /private-scoped
, les permissions définies seront croisées avec les permissions provenant de la charge utile, afin de déterminer si elle contient un ou plusieurs éléments de l’autre tableau.
+Créez un concern appelé Secured
qui recherche le jeton d’accès dans l’en-tête Authorization
d’une requête entrante.
Si le jeton est présent, Auth0Client.validate_token
utilisera le gem jwt
pour vérifier la signature du jeton et valider les demandes du jeton.
Outre la vérification de la validité du jeton d’accès, concern possède un mécanisme permettant de confirmer que le jeton dispose d’une permission suffisante pour accéder aux ressources demandées. Dans cet exemple, nous définissons une méthode validate_permissions
qui reçoit un bloc et vérifie les autorisations en appelant la méthode Token.validate_permissions
de la classe Auth0Client
.
Pour la route /private-scoped
, les permissions définies seront croisées avec les permissions provenant de la charge utile, afin de déterminer si elle contient un ou plusieurs éléments de l’autre tableau.
-## Inclure le concern Secure dans votre ApplicationController {{{ data-action="code" data-code="app/controllers/application_controller.rb" }}}
+## Inclure la préoccupation Secure dans votre ApplicationController {{{ data-action="code" data-code="app/controllers/application_controller.rb" }}}
-En ajoutant le concern Secure
à votre contrôleur d’application, vous n’aurez plus qu’à utiliser un filtre before_action
dans le contrôleur qui requiert une autorisation.
+En ajoutant la préoccupation Secure
à votre contrôleur d’application, vous n’aurez plus qu’à utiliser un filtre before_action
dans le contrôleur qui requiert une autorisation.
## Créer le point de terminaison public {{{ data-action="code" data-code="app/controllers/public_controller.rb" }}}
@@ -57,18 +57,282 @@ locale: fr-CA
## Créer les points de terminaison privés {{{ data-action="code" data-code="app/controllers/private_controller.rb" }}}
-Créez un contrôleur pour gérer les points de terminaison privés : /api/private
et /api/private-scoped
.
/api/private
est disponible pour les requêtes authentifiées contenant un jeton d’accès sans permission supplémentaire.
/api/private-scoped
est disponible pour les requêtes authentifiées contenant un jeton d’accès dont la permission read:messages
est accordée.
Les points de terminaison protégés doivent appeler la méthode authorize
du concern Secured
; vous devez pour cela utiliser before_action :authorize
, ce qui assure que la méthode Secured.authorize
est appelée avant chaque action dans le PrivateController
.
Faire un appel à votre API
Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).
![Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/8aa621c6d95e3f21115493a19ab05f7a/Quickstart_Example_App_-_API.png)
Fournir le Jeton d’accès comme un en-tête Authorization
dans vos demandes.
curl --request GET \
+Créez un contrôleur pour traiter les points de terminaison privés : /api/private
et /api/private-scoped
.
/api/private
est disponible pour les requêtes authentifiées contenant un jeton d’accès sans permission supplémentaire.
/api/private-scoped
est disponible pour les requêtes authentifiées contenant un jeton d’accès dont la permission read:messages
est accordée.
Les points de terminaison protégés doivent appeler la méthode authorize
du concern Secured
; vous devez pour cela utiliser before_action :authorize
, ce qui assure que la méthode Secured.authorize
est appelée avant chaque action dans le PrivateController
.
Faire un appel à votre API
Pour appeler votre API, vous avez besoin d’un jeton d’accès. Vous pouvez obtenir un jeton d’accès à des fins de test dans la vue Test dans vos API settings (Paramètres API).
![Auth0 Dashboard> Applications > API > [API specifique] > Onglet Test](//images.ctfassets.net/cdy7uua7fh8z/6jeVBuypOGX5qMRXeJn5ow/8aa621c6d95e3f21115493a19ab05f7a/Quickstart_Example_App_-_API.png)
Fournissez le jeton d’accès comme un en-tête Authorization
dans vos demandes.
- --url http://${account.namespace}/api_path \
+
+
+ curl --request get \
+
+ --url 'http:///${account.namespace}/api_path' \
+
+ --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
var client = new RestClient("http:///${account.namespace}/api_path");
+
+var request = new RestRequest(Method.GET);
+
+request.AddHeader("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE");
+
+IRestResponse response = client.Execute(request);
package main
+
+
+
+import (
+
+ "fmt"
+
+ "net/http"
+
+ "io/ioutil"
+
+)
+
+
+
+func main() {
+
+
+
+ url := "http:///${account.namespace}/api_path"
+
+
+
+ req, _ := http.NewRequest("get", url, nil)
+
+
+
+ req.Header.Add("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+
+
+ res, _ := http.DefaultClient.Do(req)
+
+
+
+ defer res.Body.Close()
+
+ body, _ := ioutil.ReadAll(res.Body)
+
+
+
+ fmt.Println(res)
+
+ fmt.Println(string(body))
+
+
+
+}
HttpResponse<String> response = Unirest.get("http:///${account.namespace}/api_path")
+
+ .header("authorization", "Bearer YOUR_ACCESS_TOKEN_HERE")
+
+ .asString();
var axios = require("axios").default;
+
+
+
+var options = {
+
+ method: 'get',
+
+ url: 'http:///${account.namespace}/api_path',
+
+ headers: {authorization: 'Bearer YOUR_ACCESS_TOKEN_HERE'}
+
+};
+
+
+
+axios.request(options).then(function (response) {
+
+ console.log(response.data);
+
+}).catch(function (error) {
+
+ console.error(error);
+
+});
#import <Foundation/Foundation.h>
+
+
+
+NSDictionary *headers = @{ @"authorization": @"Bearer YOUR_ACCESS_TOKEN_HERE" };
+
+
+
+NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"http:///${account.namespace}/api_path"]
+
+ cachePolicy:NSURLRequestUseProtocolCachePolicy
+
+ timeoutInterval:10.0];
+
+[request setHTTPMethod:@"get"];
+
+[request setAllHTTPHeaderFields:headers];
+
+
+
+NSURLSession *session = [NSURLSession sharedSession];
+
+NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
+
+ completionHandler:^(NSData *data, NSURLResponse *response, NSError *error) {
+
+ if (error) {
+
+ NSLog(@"%@", error);
+
+ } else {
+
+ NSHTTPURLResponse *httpResponse = (NSHTTPURLResponse *) response;
+
+ NSLog(@"%@", httpResponse);
+
+ }
+
+ }];
+
+[dataTask resume];
$curl = curl_init();
+
+
+
+curl_setopt_array($curl, [
+
+ CURLOPT_URL => "http:///${account.namespace}/api_path",
+
+ CURLOPT_RETURNTRANSFER => true,
+
+ CURLOPT_ENCODING => "",
+
+ CURLOPT_MAXREDIRS => 10,
+
+ CURLOPT_TIMEOUT => 30,
+
+ CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
+
+ CURLOPT_CUSTOMREQUEST => "get",
+
+ CURLOPT_HTTPHEADER => [
+
+ "authorization: Bearer YOUR_ACCESS_TOKEN_HERE"
+
+ ],
+
+]);
+
+
+
+$response = curl_exec($curl);
+
+$err = curl_error($curl);
+
+
+
+curl_close($curl);
+
+
+
+if ($err) {
+
+ echo "cURL Error #:" . $err;
+
+} else {
+
+ echo $response;
+
+}
import http.client
+
+
+
+conn = http.client.HTTPConnection("")
+
+
+
+headers = { 'authorization': "Bearer YOUR_ACCESS_TOKEN_HERE" }
+
+
+
+conn.request("get", "/${account.namespace}/api_path", headers=headers)
+
+
+
+res = conn.getresponse()
+
+data = res.read()
+
+
+
+print(data.decode("utf-8"))
require 'uri'
+
+require 'net/http'
+
+
+
+url = URI("http:///${account.namespace}/api_path")
+
+
+
+http = Net::HTTP.new(url.host, url.port)
+
+
+
+request = Net::HTTP::Get.new(url)
+
+request["authorization"] = 'Bearer YOUR_ACCESS_TOKEN_HERE'
+
+
+
+response = http.request(request)
+
+puts response.read_body
import Foundation
+
+
+
+let headers = ["authorization": "Bearer YOUR_ACCESS_TOKEN_HERE"]
+
+
+
+let request = NSMutableURLRequest(url: NSURL(string: "http:///${account.namespace}/api_path")! as URL,
+
+ cachePolicy: .useProtocolCachePolicy,
+
+ timeoutInterval: 10.0)
+
+request.httpMethod = "get"
+
+request.allHTTPHeaderFields = headers
+
+
+
+let session = URLSession.shared
+
+let dataTask = session.dataTask(with: request as URLRequest, completionHandler: { (data, response, error) -> Void in
+
+ if (error != nil) {
+
+ print(error)
+
+ } else {
+
+ let httpResponse = response as? HTTPURLResponse
+
+ print(httpResponse)
+
+ }
+
+})
+
+
+
+dataTask.resume()
- --header 'authorization: Bearer YOUR_ACCESS_TOKEN_HERE'
-
+
+
+
+
+
+
-Ruby on Rails - Étape 7- Point de contrôle Maintenant que vous avez configuré votre application, exécutez-la pour vérifier que :
GET /api/public
est disponible pour les demandes non authentifiées.
GET /api/private
est disponible pour les demandes authentifiées.
GET /api/private-scoped
est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages
.
+Ruby on Rails - Étape 7- Point de contrôle Maintenant que vous avez configuré votre application, exécutez-la pour vérifier que :
GET /api/public
est disponible pour les demandes non authentifiées.
GET /api/private
est disponible pour les demandes authentifiées.
GET /api/private-scoped
est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages
.
- If your application did not start successfully:
Verify you added the token as the Authorization
header
Ensure the token has the correct scopes. Verify with jwt.io.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si votre application n’a pas démarré avec succès :
Vérifiez que vous avez ajouté le jeton en tant qu’en-tête d'autorisation
Assurez-vous que le jeton est doté des permissions appropriées. Vérifiez avec jwt.io.
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
diff --git a/fr-ca/articles/quickstart/backend/webapi-owin/interactive.md b/fr-ca/articles/quickstart/backend/webapi-owin/interactive.md
index 06208724a3..f971d46fe9 100644
--- a/fr-ca/articles/quickstart/backend/webapi-owin/interactive.md
+++ b/fr-ca/articles/quickstart/backend/webapi-owin/interactive.md
@@ -8,51 +8,51 @@ files:
- files/ScopeAuthorizeAttribute
- files/ApiController
github:
- path: https://github.com/auth0-samples/auth0-aspnet-owin-webapi-samples/tree/master/Quickstart/Sample
+ path: Quickstart/Sample
locale: fr-CA
---
# Ajouter une autorisation à votre application API ASP.NET OWIN Web
-Auth0 vous permet d’ajouter une autorisation à n’importe quel type d’application. Ce guide explique comment intégrer Auth0 à n’importe quelle application API ASP.NET Owin Web, nouvelle ou ancienne, à l’aide du package Microsoft.Owin.Security.Jwt
.
Si vous n’avez pas encore créé d’API dans votre Auth0 dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.
Pour configurer votre première API via Auth0 dashboard, consultez notre guide de démarrage.
Chaque API Auth0 utilise l’identifiant d’API, dont votre application a besoin pour valider le jeton d’accès.
Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d'applications OAuth 2.0.
+Auth0 vous permet d’ajouter une autorisation à n’importe quel type d’application. Ce guide explique comment intégrer Auth0 à n’importe quelle application API ASP.NET Owin Web, nouvelle ou ancienne, à l’aide du package Microsoft.Owin.Security.Jwt
.
Si vous n’avez pas encore créé d’API dans votre Auth0 Dashboard, vous pouvez utiliser le sélecteur interactif pour créer une nouvelle API Auth0 ou sélectionner une API existante pour votre projet.
Pour configurer votre première API via Auth0 Dashboard, consultez notre guide de démarrage.
Chaque API Auth0 utilise l’identificateur API, dont votre application a besoin pour valider le jeton d’accès.
Vous ne connaissez pas Auth0 ? Découvrez Auth0 et l’implémentation de l’authentification et de l’autorisation d’API en utilisant le cadre d’applications OAuth 2.0.
## Définir les autorisations
-Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API du Auth0 Dashboard. L’exemple suivant utilise la permission read:messages
.
+Les autorisations vous permettent de définir comment les ressources peuvent être accessibles au nom de l’utilisateur avec un jeton d’accès donné. Par exemple, vous pouvez choisir d’accorder un accès en lecture à la ressource messages
si les utilisateurs ont le niveau d’accès gestionnaire et un accès en écriture à cette ressource s’ils ont le niveau d’accès administrateur.
Vous pouvez définir les autorisations autorisées dans la vue Permissions (Autorisations) de la section API d’Auth0 Dashboard. L’exemple suivant utilise la permission read:messages
.
-## Installer des dépendances
+## Installer les dépendances
-Installez le NuGetPackage Microsoft.Owin.Security.Jwt
. Ce package contient le logiciel médiateur OWIN JWT nécessaire pour utiliser les jetons d’accès Auth0 dans l’API Web ASP.NET Owin.
Install-Package Microsoft.Owin.Security.Jwt
+Installez le NuGetPackage Microsoft.Owin.Security.Jwt
. Ce package contient l’intergiciel OWIN JWT nécessaire pour utiliser les jetons d’accès Auth0 dans l’API Web ASP.NET Owin.
Install-Package Microsoft.Owin.Security.Jwt
-## Configurer le logiciel médiateur {{{ data-action="code" data-code="Startup.cs" }}}
+## Configurer l’intergiciel {{{ data-action="code" data-code="Startup.cs" }}}
-Allez dans la méthode de Configuration
de votre classe de Startup
et ajoutez un appel à UseJwtBearerAuthentication
passant dans les JwtBearerAuthenticationOptions
configurées.
JwtBearerAuthenticationOptions
doit indiquer votre identificateur API Auth0 dans la propriété ValidAudience
et le chemin complet vers votre domaine Auth0 en tant que ValidIssuer
. Vous devrez configurer l’instance IssuerSigningKeyResolver
pour utiliser l’instance OpenIdConnectSigningKeyResolver
afin de résoudre la clé de connexion.
N’oubliez pas la barre oblique finale.
Assurez-vous que l’URL précisée pour ValidIssuer
contient une barre oblique (/
) finale. Cela doit correspondre exactement à la demande de l’émetteur JWT. Les appels d’API ne s’authentifieront pas correctement si vous avez mal configuré cette valeur.
+Allez dans la méthode de Configuration
de votre classe Startup
et ajoutez un appel à UseJwtBearerAuthentication
passant dans les JwtBearerAuthenticationOptions
configurées.
JwtBearerAuthenticationOptions
doit indiquer votre identificateur API Auth0 dans la propriété ValidAudience
et le chemin complet vers votre domaine Auth0 en tant que ValidIssuer
. Vous devrez configurer l’instance IssuerSigningKeyResolver
pour utiliser l’instance OpenIdConnectSigningKeyResolver
afin de résoudre la clé de connexion.
N’oubliez pas la barre oblique finale.
Assurez-vous que l’URL précisée pour ValidIssuer
contient une barre oblique (/
) finale. Cela doit correspondre exactement à la demande de l’émetteur JWT. Les appels d’API ne s’authentifieront pas correctement si vous avez mal configuré cette valeur.
## Vérifier la signature du jeton {{{ data-action="code" data-code="OpenIdConnectSigningKeyResolver.cs" }}}
-Le logiciel médiateur OWIN JWT n’utilise pas Open ID Connect Discovery par défaut, vous devez donc fournir un IssuerSigningKeyResolver
personnalisé.
Créez la classe OpenIdConnectSigningKeyResolver
et assurez-vous de retourner la bonne SecurityKey
en implémentant GetSigningKey
. Cette classe est ensuite utilisée comme TokenValidationParameters.IssuerSigningKeyResolver
lors de la configuration du logiciel médiateur dans Startup.cs
.
+Le logiciel médiateur OWIN JWT n’utilise pas Open ID Connect Discovery par défaut, vous devez donc fournir un IssuerSigningKeyResolver
personnalisé.
Créez la classe OpenIdConnectSigningKeyResolver
et assurez-vous de retourner la bonne SecurityKey
en implémentant GetSigningKey
. Cette classe est ensuite utilisée comme TokenValidationParameters.IssuerSigningKeyResolver
lors de la configuration du logiciel médiateur dans Startup.cs
.
## Valider les permissions {{{ data-action="code" data-code="ScopeAuthorizeAttribute.cs" }}}
-Le logiciel médiateur JWT vérifie que le jeton d’accès inclus dans la demande est valide; cependant, il n’inclut pas encore de mécanisme pour vérifier que le jeton a une permission suffisante pour accéder aux ressources demandées.
Créez une classe appelée ScopeAuthorizeAttribute
qui hérite de System.Web.Http.AuthorizeAttribute
. Cet attribut vérifiera que la demande de scope
émise par votre locataire Auth0 est présente, et si oui, il assurera que la demande de scope
contient la permission demandée.
+Le logiciel médiateur JWT vérifie que le jeton d’accès inclus dans la requête est valide; cependant, il n’inclut pas encore de mécanisme pour vérifier que le jeton a une scope (permission) suffisante pour accéder aux ressources demandées.
Créez une classe appelée ScopeAuthorizeAttribute
qui hérite de System.Web.Http.AuthorizeAttribute
. Cet attribut vérifiera que la demande de scope
émise par votre locataire Auth0 est présente, et si oui, il assurera que la demande de scope
contient la permission demandée.
## Protéger les points de terminaison des API {{{ data-action="code" data-code="ApiController.cs" }}}
-Les routes ci-dessous sont disponibles pour les requêtes suivantes :
GET /api/public
: disponible pour les requêtes non authentifiées.
GET /api/private
: disponible pour les requêtes authentifiées contenant un jeton d’accès sans permission supplémentaire.
GET /api/private-scoped
: disponible pour les requêtes authentifiées contenant un jeton d’accès dont la permission read:messages
est accordée.
Le logiciel médiateur JWT s’intègre aux mécanismes d’authentification et d’autorisation standard d’ASP.NET, vous n’avez donc qu’à décorer votre action de contrôleur avec l’attribut [Authorize]
pour sécuriser un point de terminaison.
Mettez à jour l’action avec l’attribut ScopeAuthorize
et passez le nom de la scope
requise dans le paramètre scope
. Cela garantit que la permission adéquate est disponible pour appeler un point de terminaison d’API donné.
Guide rapide ASP.NET API OWIN - Étape 6 Point de contrôle Maintenant que vous avez configuré votre application, lancez votre application et vérifiez que :
GET /api/public
est disponible pour les demandes non authentifiées.
GET /api/private
est disponible pour les demandes authentifiées.
GET /api/private-scoped
est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages
.
+Les routes ci-dessous sont disponibles pour les demandes suivantes :
GET /api/public
: Disponible pour les demandes non authentifiées.
GET /api/private
: Disponible pour les demandes authentifiées contenant un jeton d’accès sans permission supplémentaire.
GET /api/private-scoped
: Disponible pour les demandes authentifiées contenant un jeton d’accès dont la permission read:messages
est accordée.
L’intergiciel JWT s’intègre aux mécanismes d’authentification et d’autorisation standard d’ASP.NET, vous n’avez donc qu’à décorer votre action de contrôleur avec l’attribut [Authorize]
pour obtenir un point de terminaison.
Mettez à jour l’action avec l’attribut ScopeAuthorize
et passez le nom de la scope
requise dans le paramètre scope
. Cela garantit que la permission adéquate est disponible pour appeler un point de terminaison d’API donné.
Guide rapide ASP.NET API OWIN - Étape 6 - Point de contrôle Maintenant que vous avez configuré votre application, lancez votre application et vérifiez que :
GET /api/public
est disponible pour les demandes non authentifiées.
GET /api/private
est disponible pour les demandes authentifiées.
GET /api/private-scoped
est disponible pour les demandes authentifiées contenant un jeton d’accès avec la permission read:messages
.
- If your application did not start successfully:
Ensure your configured the ValidIssuer
and ValidAudience
values correctly
Verify you added the token as the Authorization
header
Ensure the token has the correct scopes. Verify with jwt.io.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si votre application n’a pas démarré avec succès :
Assurez-vous que les valeurs ValidIssuer
et ValidAudience
sont correctement configurées
Vérifiez que vous avez ajouté le jeton en tant qu’en-tête d'autorisation
Assurez-vous que le jeton est doté des permissions appropriées. Vérifiez avec jwt.io.
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
diff --git a/fr-ca/articles/quickstart/native/android-facebook-login/interactive.md b/fr-ca/articles/quickstart/native/android-facebook-login/interactive.md
index 715af1d903..a61a7c178b 100644
--- a/fr-ca/articles/quickstart/native/android-facebook-login/interactive.md
+++ b/fr-ca/articles/quickstart/native/android-facebook-login/interactive.md
@@ -1,6 +1,6 @@
---
title: Android – Connexion Facebook
-description: Ce tutoriel explique comment ajouter la connexion utilisateur à une application Android à l’aide de la fonction native Facebook Login (Connexion Facebook).
+description: Ce tutoriel explique comment ajouter la connexion utilisateur à une application Android à l’aide de la méthode native Connexion Facebook.
interactive: true
files:
- files/performLogin + SimpleCallback
@@ -10,49 +10,49 @@ files:
- files/exchangeTokens
- files/performLogin
github:
- path: https://github.com/auth0-samples/auth0-android-native-social-sample/tree/master/00-login-facebook
+ path: 00-login-facebook
locale: fr-CA
---
# Android – Connexion Facebook
-Ce tutoriel explique comment ajouter la connexion utilisateur à une application Android à l’aide de la fonction native Facebook Login (Connexion Facebook). Nous vous recommandons de vous connecter pour suivre ce guide rapide avec les exemples configurés pour votre compte.
Configuration requise
Android Studio 3.6.1
Trousse SDK Android 25
Émulateur - Nexus 5X - Android 6.0
Ce tutoriel décrit comment mettre en œuvre la connexion avec la trousse SDK Facebook.
Avant de commencer
Installez et configurez la trousse Facebook Login (Connexion à Facebook). Vous découvrirez également le processus de création d’une application Facebook sur https://developers.facebook.com. À la fin de cette étape, vous devriez avoir une application mobile fonctionnant avec la fonction intégrée Facebook Login (Connexion Facebook).
Configurez votre application Auth0 dans Dashboard pour utiliser la fonction Facebook Login (Connexion Facebook) en mode natif. Voir Ajouter une connexion Facebook aux applications natives. À la fin de cette étape, votre application sera en mesure d’implémenter la fonction native Facebook Login (Connexion Facebook).
+Ce tutoriel explique comment ajouter la connexion utilisateur à une application Android à l’aide de la méthode native Connexion Facebook. Nous vous recommandons de vous connecter pour suivre ce démarrage rapide avec les exemples configurés pour votre compte.
Configurations requise
Android Studio 3.6.1
Trousse SDK Android 25
Émulateur - Nexus 5X - Android 6.0
Ce tutoriel décrit comment mettre en œuvre la connexion avec la trousse SDK Facebook.
Avant de commencer
Installez et configurez la trousse SDK Connexion Facebook. Vous découvrirez également le processus de création d’une application Facebook sur https://developers.facebook.com. À la fin de cette étape, vous devriez avoir une application mobile fonctionnant avec la fonction de connexion Facebook intégrée.
Configurez votre application Auth0 dans le Dashboard pour utiliser la fonction Connexion Facebook en mode natif. Voir Ajouter une connexion Facebook aux applications natives. À la fin de cette étape, votre application sera en mesure d’implémenter la fonction Connexion Facebook en mode natif.
-## Demande d'autorisations Facebook
+## Demande d’autorisations Facebook
-Votre application est déjà capable de se connecter à Facebook. Cependant, pour garantir un profil utilisateur riche, vous devez mettre à jour les autorisations avec lesquelles le bouton de connexion Facebook a été configuré.
Définissez les autorisations demandées sur public_profile
et email
. De cette manière, l’adresse électronique de l’utilisateur sera également incluse dans la réponse, à condition que la demande d’accès soit acceptée par l’utilisateur.
loginButton.setPermissions(Arrays.asList("public_profile", "email"));
+Votre application est déjà capable de se connecter à Facebook. Cependant, pour garantir un profil utilisateur riche, vous devez mettre à jour les autorisations avec lesquelles le bouton de connexion Facebook a été configuré.
Définissez les autorisations demandées sur public_profile
et email
. De cette manière, l’adresse courriel de l’utilisateur sera également incluse dans la réponse, à condition que la demande d’accès soit acceptée par l’utilisateur.
loginButton.setPermissions(Arrays.asList("public_profile", "email"));
## Créer la méthode performLogin {{{ data-action="code" data-code="performLogin + SimpleCallback" }}}
-Pour lancer le processus d’authentification avec Auth0, créez une nouvelle méthode dans laquelle vous préparerez la charge utile à envoyer.
Vous utiliserez une interface simple pour gérer nos callbacks internes.
Dans l’exemple, la méthode s’appelle performLogin
et l’interface SimpleCallback
. Ajoutez les deux.
+Maintenant, pour lancer le processus d’authentification avec Auth0, créez une nouvelle méthode où vous préparerez la charge utile à envoyer.
Vous utiliserez une interface simple pour gérer nos rappels internes.
Dans l’exemple, la méthode s’appelle performLogin
et l’interface SimpleCallback
. Ajoutez les deux.
## Appeler la méthode performLogin {{{ data-action="code" data-code="onCreate" }}}
-Maintenant, appelez la méthode de la méthode onSuccess
de callback de connexion à Facebook.
+Maintenant, appelez la méthode de la méthode onSuccess
de rappel (Callback) de connexion Facebook.
## Intégrer Facebook
-Lorsque vous vous connectez à Facebook avec Auth0, l'ordinateur dorsal effectue des vérifications en arrière-plan pour s’assurer que l’utilisateur est bien celui qu’il prétend être. Pour ce faire, il faut lui fournir un jeton d’accès à la session.
En outre, si un utilisateur doit être créé sur Auth0 pour représenter cet utilisateur Facebook, l'ordinateur dorsal aura besoin de certaines de ses informations, comme le nom, le nom de famille et l’adresse électronique. L’adresse électronique, si elle est fournie, sera signalée comme non vérifiée dans le profil utilisateur Auth0.
Pour obtenir le jeton d’accès de session et le profil utilisateur, deux requêtes supplémentaires doivent être effectuées auprès de l’API Facebook.
+Lorsque vous vous connectez à Facebook avec Auth0, le système dorsal effectue des vérifications en arrière-plan pour s’assurer que l’utilisateur est bien celui qu’il prétend être. Pour ce faire, il faut lui fournir un jeton d’accès à la session.
En outre, si un utilisateur doit être créé sur Auth0 pour représenter cet utilisateur Facebook, le système dorsal aura besoin de certaines de ses informations, comme le nom, le nom de famille et l’adresse électronique. L’adresse électronique, si elle est fournie, sera signalée comme non vérifiée dans le profil utilisateur Auth0.
Pour obtenir le jeton d’accès de session et le profil utilisateur, deux requêtes supplémentaires doivent être effectuées auprès de l’API Facebook.
## Récupérer le jeton d’accès à la session Facebook {{{ data-action="code" data-code="fetchSessionToken" }}}
-Effectuez une nouvelle requête GET vers le point de terminaison /oauth/access_token
de l’API Facebook. Utilisez les paramètres de requête suivants :
grant_type
: fb_attenuate_token
.
fb_exchange_token
: le jeton d’accès reçu lors de la connexion.
client_id
: l’identificateur de votre application. Cette valeur provient du tableau de bord du développeur Facebook et devrait déjà être utilisée dans votre application si vous avez réussi à intégrer la connexion Facebook.
Placez la logique de cette étape dans sa propre méthode. Vous effectuerez cet appel plus tard, à partir de la méthode ajoutée précédemment.
L’exemple utilise la classe GraphRequest
de la trousse SDK Facebook pour effectuer cette demande.
+Effectuez une nouvelle requête GET vers le point de terminaison /oauth/access_token
de l’API Facebook. Utilisez les paramètres de requête suivants :
grant_type
: fb_attenuate_token
.
fb_exchange_token
: le jeton d’accès reçu lors de la connexion.
client_id
: l’identifiant de votre application. Cette valeur provient du tableau de bord du développeur Facebook et devrait déjà être utilisée dans votre application si vous avez réussi à intégrer la connexion Facebook.
Placez la logique de cette étape dans sa propre méthode. Vous effectuerez cet appel plus tard, à partir de la méthode ajoutée précédemment.
L’exemple utilise la classe GraphRequest
de la trousse SDK Facebook pour effectuer cette demande.
## Récupérer le profil utilisateur Facebook {{{ data-action="code" data-code="fetchUserProfile" }}}
-Effectuez à présent une autre demande GET, comme dans l’étape précédente. Le chemin du point de terminaison correspondra à la valeur de l’identificateur de l’utilisateur figurant dans le résultat de la connexion Facebook (par exemple, /904636746222815
). Utilisez les paramètres suivants :
access_token
: le jeton d’accès reçu lors de la connexion.
fields
: les champs du profil utilisateur que vous souhaitez récupérer dans la réponse. Ces champs sont directement liés aux autorisations du bouton de connexion Facebook qui ont été configurées au début. Lorsqu’une autorisation est facultative, l’utilisateur doit d’abord consentir à y donner accès. Pour inscrire un utilisateur à Auth0, le nom complet et l’adresse électronique suffisent.
+Effectuez à présent une autre demande GET, comme dans l’étape précédente. Le chemin du point de terminaison correspondra à la valeur de l’identificateur de l’utilisateur figurant dans le résultat de la connexion Facebook (p. ex., /904636746222815
). Utilisez les paramètres suivants :
access_token
: le jeton d’accès reçu lors de la connexion.
fields
: les champs du profil utilisateur que vous souhaitez récupérer dans la réponse. Ces champs sont directement liés aux autorisations du bouton de connexion Facebook qui ont été configurées au début. Lorsqu’une autorisation est facultative, l’utilisateur doit d’abord consentir à y donner accès. Pour inscrire un utilisateur à Auth0, le nom complet et l’adresse électronique suffisent.
## Intégrer Auth0
-Maintenant que les artefacts requis ont été obtenus, vous êtes prêt à les échanger contre les identifiants utilisateur Auth0, comme l’identificateur et les jetons d’accès. Mais d’abord, vous devez configurer la trousse SDK Auth0 pour qu’il effectue cette dernière demande.
Obtenir les clés de votre application
Allez dans la section Applications du Auth0 Dashboard et sélectionnez l’application existante dans laquelle vous avez activé la fonction Sign in with Facebook (Se connecter avec Facebook). Si vous avez besoin d’aide pour cette étape, veuillez consulter la section des exigences en haut de cet article.
Copiez les valeurs Domain (Domaine) et Client ID (Identificateur client) de la page des paramètres de l’application. Ces valeurs sont requises par la trousse SDK.
Créez deux nouvelles ressources dans le fichier strings.xml de votre application Android pour les stocker. Les noms des clés doivent correspondre à ceux utilisés ci-dessous :
+
Maintenant que les artefacts requis ont été obtenus, vous êtes prêt à les échanger contre les identifiants utilisateur Auth0, comme l’identifiant et les jetons d’accès. Mais d’abord, vous devez configurer la trousse SDK Auth0 pour qu’il effectue cette dernière demande.
Obtenir les clés de votre application
Allez dans la section Applications de Auth0 Dashboard et sélectionnez l’application existante dans laquelle vous avez activé la fonction Sign in with Facebook (Se connecter avec Facebook). Si vous avez besoin d’aide pour cette étape, veuillez consulter la section des exigences en haut de cet article.
Copiez les valeurs Domaine et Identifiant client de la page des paramètres de l’application. Ces valeurs sont requises par la trousse SDK.
Créez deux nouvelles ressources dans le fichier strings.xml de votre application Android pour les stocker. Les noms des clés doivent correspondre à ceux utilisés ci-dessous :
<resources>
@@ -72,7 +72,7 @@ locale: fr-CA
-Il est maintenant temps d’exécuter la tâche Gradle Sync pour actualiser le projet et ses dépendances.
Mise à jour du manifeste pour l’authentification Web
Si votre application ne prévoit pas d’utiliser le module d’authentification Web fourni par la trousse SDK, vous devrez supprimer l’activité inutilisée du fichier AndroidManifest.xml pour éviter les problèmes liés aux paramètres fictifs dans le manifeste. Pour ce faire, il suffit d’ajouter une déclaration d’activité et de l’annoter avec tools:node="remove".
<application>
+Il est maintenant temps d’exécuter la tâche Gradle Sync pour actualiser le projet et ses dépendances.
Mise à jour du manifeste pour l’authentification Web
Si votre application ne prévoit pas d’utiliser le module d’authentification Web fourni par la trousse SDK, vous devrez supprimer l’activité inutilisée du fichier AndroidManifest.xml pour éviter les problèmes liés au placeholder du manifeste. Pour ce faire, il suffit d’ajouter une déclaration d’activité et de l’annoter avec tools:node="remove".
<application>
<!-- Add the activity declaration line below -->
@@ -88,12 +88,12 @@ locale: fr-CA
-Toutefois, si vous envisagez de prendre en charge l’authentification Web, rendez-vous ici pour savoir comment déclarer les paramètres fictifs du manifeste.
+Toutefois, si vous envisagez de prendre en charge l’authentification Web, rendez-vous ici pour savoir comment déclarer les placeholder du manifeste.
-## Échange des données reçues contre des jetons Auth0 {{{ data-action="code" data-code="exchangeTokens" }}}
+## Échanger les données reçues contre des jetons Auth0 {{{ data-action="code" data-code="exchangeTokens" }}}
-Vous devez instancier la trousse SDK avant de l'utiliser. Définissez un champ au niveau de la classe et initialisez-le dans la méthode onCreate
. Remarque : Les identifiants définis à l'étape précédente sont transmis au développeur Auth0
et une nouvelle instance de AuthenticationAPIClient
est créée avec lui.
private AuthenticationAPIClient auth0Client;
+Vous devez instancier la trousse SDK avant de l’utiliser. Définissez un champ au niveau de la classe et initialisez-le dans la méthode onCreate
. Remarque : Les identifiants définis à l’étape précédente sont transmis au développeur Auth0
et une nouvelle instance de AuthenticationAPIClient
est créée avec lui.
private AuthenticationAPIClient auth0Client;
@@ -121,7 +121,7 @@ public void onCreate(Bundle savedInstanceState) {
-Créez la méthode qui contiendra la logique d'échange des deux artefacts obtenus contre les identifiants de l'utilisateur Auth0. Dans l'exemple, cette méthode s'appelle exchangeTokens
.
Le client de l'API déclare la méthode loginWithNativeSocialToken
qui reçoit un jeton et un type de sujet. Le premier correspond au jeton de session et le second indique le type de connexion avec lequel le programme dorsal tentera de s'authentifier.
Pour la fonction native Connexion Facebook, vous devez utiliser la valeur suivante : "http://auth0.com/oauth/token-type/facebook-info-session-access-token"
Les autres valeurs à configurer sont le profil utilisateur (en utilisant la clé user_profile
) et la permission que vous demandez aux jetons Auth0 de contenir.
Nous recommandons de conserver toutes les valeurs immuables en tant que constantes au début de la classe. L’exemple utilise des constantes pour le type de jeton sujet, les permissions Facebook et les permissions Auth0. Pour en savoir plus sur les permissions Auth0, lisez cet article.
+Créez la méthode qui contiendra la logique d’échange des deux artefacts obtenus contre les identifiants de l’utilisateur Auth0. Dans l’exemple, cette méthode s’appelle exchangeTokens
.
Le client de l’API déclare la méthode loginWithNativeSocialToken
qui reçoit un jeton et un type de sujet. Le premier correspond au jeton de session et le second indique le type de connexion avec lequel le système dorsal tentera de s’authentifier.
Pour la fonction native Connexion Facebook, vous devez utiliser la valeur suivante : "http://auth0.com/oauth/token-type/facebook-info-session-access-token"
Les autres valeurs à configurer sont le profil utilisateur (en utilisant la clé user_profile
) et la permission que vous demandez aux jetons Auth0 de contenir.
Nous recommandons de conserver toutes les valeurs immuables en tant que constantes au début de la classe. L’exemple utilise des constantes pour le type de jeton sujet, les permissions Facebook et les permissions Auth0. Pour en savoir plus sur les permissions Auth0, lisez cet article.
## Mettre à jour la méthode performLogin {{{ data-action="code" data-code="performLogin" }}}
diff --git a/fr-ca/articles/quickstart/native/android/interactive.md b/fr-ca/articles/quickstart/native/android/interactive.md
index d61de9c19a..e6755bc034 100644
--- a/fr-ca/articles/quickstart/native/android/interactive.md
+++ b/fr-ca/articles/quickstart/native/android/interactive.md
@@ -7,7 +7,7 @@ files:
- files/strings
- files/MainActivity
github:
- path: https://github.com/auth0-samples/auth0-android-sample/tree/master/00-Login-Kt
+ path: 00-Login-Kt
locale: fr-CA
---
@@ -16,15 +16,15 @@ locale: fr-CA
-## Configurer Auth0
+## Configuration d’Auth0
-Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. Vous allez configurer l’authentification pour votre projet dans l’application Auth0.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui vous permettra de gérer vos applications.
Consultez un exemple d’application si vous préférez explorer une configuration complète.
Configuration des Callback URL
Une Callback URL est l’URL de l’application vers laquelle Auth0 dirigera vos utilisateurs une fois qu’ils se seront authentifiés. Si vous ne définissez pas cette valeur, Auth0 ne renverra pas les utilisateurs vers votre application après leur connexion.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback
.
Configuration des URL de déconnexion
Une URL de déconnexion est l’URL de l’application vers laquelle Auth0 redirigera vos utilisateurs une fois qu’ils se seront déconnectés. Si vous ne définissez pas cette valeur, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback
+Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer l’authentification pour votre projet.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, chaque application se voit attribuer un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide de démarrage rapide seront automatiquement mis à jour pour votre application dans le Tableau de bord, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.
Configuration des URL de rappel
Une URL de rappel est l’URL de l’application vers laquelle Auth0 dirigera vos utilisateurs une fois qu’ils se seront authentifiés. Si vous ne définissez pas cette valeur, Auth0 ne renverra pas les utilisateurs vers votre application après leur connexion.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback
.
Configuration des URL de déconnexion
Une URL de déconnexion est l’URL de l’application vers laquelle Auth0 redirigera vos utilisateurs une fois qu’ils se seront déconnectés. Si vous ne définissez pas cette valeur, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur demo://{yourDomain}/android/YOUR_APP_PACKAGE_NAME/callback
## Installer la trousse SDK Android Auth0 {{{ data-action="code" data-code="build.gradle#18:18" }}}
-Ajoutez la trousse SDK Android Auth0 à votre projet. La bibliothèque adressera des demandes aux Authentication et Management API d’Auth0.
Dans la section dépendances du build.gradle
de votre application, ajoutez ce qui suit :
implementation 'com.auth0.android:auth0:2. '
+Ajoutez la trousse SDK Android Auth0 à votre projet. La bibliothèque adressera des demandes aux Authentication et Management API d’Auth0.
Dans la section dépendances du build.gradle
de votre application, ajoutez ce qui suit :
implementation 'com.auth0.android:auth0:2. '
@@ -33,46 +33,46 @@ locale: fr-CA
## Ajouter des paramètres fictifs dans le manifeste {{{ data-action="code" data-code="build.gradle#10:12" }}}
-La trousse SDK nécessite des espaces réservés dans le manifeste. Auth0 utilise des espaces réservés en interne pour définir un intent-filter
, qui capture la Callback URL d’authentification. Vous devez définir le domaine du locataire Auth0 et le schéma de la Callback URL.
Vous n’avez pas besoin de déclarer un intent-filter
spécifique pour votre activité car vous avez défini les paramètres fictifs dans le manifeste avec vos valeurs Auth0 Domaine et Schéma et la bibliothèque traitera la redirection pour vous.
Nous avons utilisé la valeur demo
pour auth0Scheme
ici, afin qu’un schéma d’URL personnalisé puisse être utilisé pour l’URL vers laquelle Auth0 redirige après la connexion. L’alternative est https
si vous voulez utiliser des liens vers les applications Android. Vous pouvez en savoir plus sur la définition de cette valeur dans le SDK README d’Auth0.Android.
+La trousse SDK nécessite des paramètres fictifs dans le manifeste. Auth0 utilise des paramètres fictifs en interne pour définir un intent-filter
, qui capture l’URL de rappel pour l’authentification. Vous devez définir le domaine du locataire Auth0 et le schéma de l’URL de rappel.
Vous n’avez pas besoin de déclarer un intent-filter
spécifique pour votre activité car vous avez défini les paramètres fictifs dans le manifeste avec vos valeurs Auth0 Domaine et Schéma et la bibliothèque traitera la redirection pour vous.
Nous avons utilisé la valeur demo
pour auth0Scheme
ici, afin qu’un schéma d’URL personnalisé puisse être utilisé pour l’URL vers laquelle Auth0 redirige après la connexion. L’alternative est https
si vous voulez utiliser des liens vers les applications Android. Vous pouvez en savoir plus sur la définition de cette valeur dans le SDK README d’Auth0.Android.
## Configuration de votre application {{{ data-action="code" data-code="strings.xml#2:3" }}}
-Pour que la trousse SDK fonctionne correctement, définissez les propriétés suivantes dans strings.xml
:
com_auth0_domain
: le domaine de votre locataire Auth0. En général, vous le trouvez dans Auth0 Dashboard sous vos paramètres d’application dans le champ Domain (Domaine). Si vous utilisez un domaine personnalisé, définissez-le plutôt sur la valeur de votre domaine personnalisé.
com_auth0_client_id
: identificateur de l’application Auth0 que vous avez configurée précédemment dans ce guide rapide. Vous pouvez la trouver dans Auth0 Dashboard, dans la rubrique des paramètres de votre application, dans le champ Client ID..
Assurez-vous que le fichier AndroidManifest.xml
spécifie l’autorisation android.permissions.INTERNET
:
<uses-permission android:name="android.permission.INTERNET" />
+Pour que la trousse SDK fonctionne correctement, définissez les propriétés suivantes dans strings.xml
:
com_auth0_domain
: Le domaine de votre locataire Auth0. En général, vous le trouvez dans Auth0 Dashboard sous vos paramètres d’application dans le champ Domain (Domaine). Si vous utilisez un domaine personnalisé, définissez-le plutôt sur la valeur de votre domaine personnalisé.
com_auth0_client_id
: l’identificateur de l’application Auth0 que vous avez configurée précédemment dans ce guide rapide. Vous pouvez le trouver dans Auth0 Dashboard, dans les paramètres de votre application, dans le champ Client ID (ID client).
Assurez-vous que le fichier AndroidManifest.xml
spécifie l’autorisation android.permissions.INTERNET
:
<uses-permission android:name="android.permission.INTERNET" />
-Exécutez Sync Project with Gradle Files dans Android Studio ou exécutez ./gradlew clean assembleDebug
à partir de la ligne de commande.
Pour en savoir plus sur l’utilisation de Gradle, consultez la documentation officielle de Gradle.
+Exécutez Sync Project with Gradle Files dans Android Studio ou exécutez ./gradlew clean assembleDebug
à partir de la ligne de commande.
Pour en savoir plus sur l’utilisation de Gradle, consultez la documentation officielle de Gradle.
## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="MainActivity.kt#6:38" }}}
-La connexion universelle est le moyen le plus simple de mettre en place l’authentification dans votre application. Nous recommandons de l’utiliser pour une meilleure expérience, une meilleure sécurité et un plus grand nombre de fonctionnalités.
Dans la méthode onCreate
, créez une nouvelle instance de la classe Auth0
qui contiendra les informations d’identification de l’utilisateur.
Créez une méthode loginWithBrowser
et utilisez la classe WebAuthProvider
pour vous authentifier avec n’importe quelle connexion que vous avez activée sur votre application dans Auth0 dashboard. Ici, vous pouvez passer la valeur du schéma qui a été utilisée dans l’espace réservé du manifeste auth0Scheme
dans le cadre de la configuration initiale.
Après avoir appelé la fonction WebAuthProvider#start
, le navigateur se lance et affiche la page de connexion. Une fois l’utilisateur authentifié, la Callback URL est appelée. La Callback URL contient le résultat final du processus d’authentification.
Guide rapide Android - Étape 5 - Point de contrôle Ajoutez un bouton à votre application qui appelle loginWithBrowser
. Lorsque vous cliquez dessus, vérifiez que votre application Android vous redirige vers la page de connexion universelle Auth0 et que vous pouvez maintenant vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe, ou encore un réseau social.
Une fois l’opération terminée, vérifiez qu’Auth0 vous redirige vers votre application.
+La connexion universelle est le moyen le plus simple de mettre en place l’authentification dans votre application. Nous recommandons de l’utiliser pour une meilleure expérience, une meilleure sécurité et un plus grand nombre de fonctionnalités.
Dans la méthode onCreate
, créez une nouvelle instance de la classe Auth0
qui contiendra les informations d’identification de l’utilisateur.
Créez une méthode loginWithBrowser
et utilisez la classe WebAuthProvider
pour vous authentifier avec n’importe quelle connexion que vous avez activée sur votre application dans Auth0 Dashboard. Ici, vous pouvez passer la valeur du schéma qui a été utilisée dans le paramètre fictif du manifeste auth0Scheme
dans le cadre de la configuration initiale.
Après avoir appelé la fonction WebAuthProvider#start
, le navigateur se lance et affiche la page de connexion. Une fois l’utilisateur authentifié, l’URL de rappel est appelée. L’URL de rappel contient le résultat final du processus d’authentification.
Démarrage rapide Android – Étape 5 – Point de contrôle Ajoutez un bouton à votre application qui appelle loginWithBrowser
. Lorsque vous cliquez dessus, vérifiez que votre application Next.js vous redirige vers la page Connexion universelle Auth0 et que vous pouvez maintenant vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe ou un fournisseur social.
Une fois l’opération terminée, vérifiez qu’Auth0 vous redirige vers votre application.
- If your application did not launch successfully:
Ensure you set the Allowed Callback URLs are correct
Verify you saved your changes after entering your URLs
Make sure the domain and cliend ID values imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si le lancement de votre application a échoué :
Assurez-vous que les URL de rappel autorisées sont correctes
Vérifiez que vous avez enregistré vos modifications après avoir saisi vos URL
Assurez-vous que les valeurs de domaine et d’identifiant client ont été importées correctement
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="MainActivity.kt#40:52" }}}
-Utilisez WebAuthProvider
pour supprimer le témoin défini par le navigateur au moment de l’authentification, de sorte que les utilisateurs soient obligés de saisir à nouveau leurs identifiants la prochaine fois qu’ils essaient de s’authentifier.
Ajoutez une méthode logout
à votre application pour supprimer la session de l’utilisateur et le déconnecter de l’application. Ici, vous pouvez passer la valeur du schéma qui a été utilisée dans le paramètre fictif du manifeste auth0Scheme
dans le cadre de la configuration initiale.
Utilisez la classe WebAuthProvider
pour mettre en œuvre la déconnexion. Cet appel ouvre le navigateur et dirige l’utilisateur vers le point de terminaison de déconnexion. Si l’utilisateur annule la déconnexion, envisagez de le rediriger vers l’URL précédente.
Guide rapide Android - Étape 6 - Point de contrôle Ajoutez un bouton à votre application qui appelle logout
et déconnecte l’utilisateur de votre application. Lorsque vous cliquez sur ce bouton, vérifiez que votre application Android vous redirige vers la page de déconnexion et vous renvoie, et que vous n’êtes plus connecté à votre application.
+Utilisez WebAuthProvider
pour supprimer le témoin défini par le navigateur au moment de l’authentification, de sorte que les utilisateurs soient obligés de saisir à nouveau leurs identifiants la prochaine fois qu’ils essaient de s’authentifier.
Ajoutez une méthode logout
à votre application pour supprimer la session de l’utilisateur et le déconnecter de l’application. Ici, vous pouvez passer la valeur du schéma qui a été utilisée dans le placeholder du manifeste auth0Scheme
dans le cadre de la configuration initiale.
Utilisez la classe WebAuthProvider
pour mettre en œuvre la déconnexion. Cet appel ouvre le navigateur et dirige l’utilisateur vers le point de terminaison de déconnexion. Si l’utilisateur annule la déconnexion, envisagez de le rediriger vers l’URL précédente.
Démarrage rapide Android - Étape 6 - Point de contrôle Ajoutez un bouton à votre application qui appelle logout
et déconnecte l’utilisateur de votre application. Lorsque vous cliquez sur ce bouton, vérifiez que votre application Android vous redirige vers la page de déconnexion et vous renvoie, et que vous n’êtes plus connecté à votre application.
- If your application did not logout successfully:
Ensure the Allowed Logout URLs are set properly
Verify you saved your changes after entering your URLs
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si votre application n’a pas réussi à se déconnecter :
Assurez-vous que les URL de déconnexion autorisées sont correctement définies
Vérifiez que vous avez enregistré vos modifications après avoir saisi vos URL
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
## Afficher les informations du profil utilisateur {{{ data-action="code" data-code="MainActivity.kt#54:70" }}}
-Utilisez la classe AuthenticationAPIClient
pour récupérer le profil utilisateur auprès de Auth0. Pour ce faire, les éléments suivants sont nécessaires :
Le jeton d’accès renvoyé par la phase de connexion
Le WebAuthProvider.login
doit contenir la permission profile
Vous devez spécifier la permission email
si vous avez besoin de récupérer l’adresse électronique de l’utilisateur.
Ce guide rapide définit par défaut les permissions openid profile email
lors de l’étape de connexion ci-dessus.
L’exemple suivant démontre une fonction qui peut être utilisée pour récupérer le profil utilisateur et l’afficher à l’écran :
Guide rapide Android - Étape 7 - Point de contrôle Appelez la fonction showUserProfile
après la connexion. Vérifiez que le callback onSuccess
renvoie les informations du profil utilisateur.
+Utilisez la classe AuthenticationAPIClient
pour récupérer le profil utilisateur auprès de Auth0. Pour ce faire, les éléments suivants sont nécessaires :
Le jeton d’accès renvoyé par la phase de connexion
Le WebAuthProvider.login
doit contenir la permission profile
Vous devez spécifier la permission email
si vous avez besoin de récupérer l’adresse courriel de l’utilisateur.
Ce guide rapide définit par défaut les permissions openid profile email
lors de l’étape de connexion ci-dessus.
L’exemple suivant démontre une fonction qui peut être utilisée pour récupérer le profil utilisateur et l’afficher à l’écran :
Guide rapide Android - Étape 7 - Point de contrôle Appelez la fonction showUserProfile
après la connexion. Vérifiez que le rappel onSuccess
renvoie les informations du profil utilisateur.
- If your application did not return user profile information:
Verify the accessToken
is valid
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si votre application n’a pas renvoyé d’informations sur le profil utilisateur :
Vérifiez la validité du jeton d’accès
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
diff --git a/fr-ca/articles/quickstart/native/device/interactive.md b/fr-ca/articles/quickstart/native/device/interactive.md
index 31af025984..199f614a88 100644
--- a/fr-ca/articles/quickstart/native/device/interactive.md
+++ b/fr-ca/articles/quickstart/native/device/interactive.md
@@ -1,42 +1,40 @@
---
-title: Flux d’autorisation de l’appareil
-description: Ce tutoriel explique comment appeler votre API à partir d’un appareil dont les entrées sont limitées, à l’aide du flux d’autorisation de l’appareil.
+title: Flux d’autorisation d’appareil
+description: Ce tutoriel explique comment appeler votre API à partir d’un appareil dont les entrées sont limitées, à l’aide du flux d’autorisation d’appareil.
interactive: true
-github:
- path: https://auth0.github.io/device-flow-playground/
locale: fr-CA
---
-# Flux d’autorisation de l’appareil
+# Flux d’autorisation d’appareil
-Ce tutoriel explique comment appeler votre API à partir d’un appareil dont les entrées sont limitées, à l’aide du flux d’autorisation de l’appareil. Nous vous recommandons de vous connecter pour suivre ce démarrage rapide avec les exemples configurés pour votre compte.
Pour une expérience interactive, vous pouvez utiliser Terrain de jeu du flux de l’appareil.
Prérequis
Assurez-vous que l’option OIDC Conformant (Conforme à l’OIDC) est activée. Pour plus d’informations, consultez Authentification conforme à l’OIDC.
Ajoutez Device Code (Code de l’appareil) aux types d’autorisation de l’application. Pour plus d’informations, consultez Mise à jour des types d’autorisation.
Ajoutez Refresh Token (Jeton d’actualisation) aux types d’autorisation de l’application si vous souhaitez activer les jetons d’actualisation.
Configurez et activez au moins une connexion pour l’application.
Enregistrez votre API auprès d’Auth0.
Activez l’option Allow Offline Access (Autoriser l’accès hors ligne) si vous utilisez des jetons d’actualisation. Pour en savoir plus, veuillez consulter Paramètres API.
Configurez les paramètres du code utilisateur de l’appareil pour définir le jeu de caractères, le format et la longueur de votre code utilisateur généré de manière aléatoire.
+Ce tutoriel explique comment appeler votre API à partir d’un appareil dont les entrées sont limitées, à l’aide du flux d’autorisation d’appareil. Nous vous recommandons de vous connecter pour suivre ce démarrage rapide avec les exemples configurés pour votre compte.
Pour une expérience interactive, vous pouvez utiliser Terrain de jeu du flux d’appareil.
Conditions requises
Assurez-vous que l’option Conforme à l’OIDC est activée. Pour plus d’informations, consultez Authentification conforme à OIDC.
Ajoutez Device Code (Code de l’appareil) aux types d’autorisation de l’application. Pour plus d’informations, consultez Mettre à jour les types d’autorisation.
Ajoutez Refresh Token (Jeton d’actualisation) aux types d’autorisation de l’application si vous souhaitez activer les jetons d’actualisation.
Configurez et activez au moins une connexion pour l’application.
Enregistrez votre application avec Auth0.
Activez l’option Autoriser l’accès hors ligne si vous utilisez des jetons d’actualisation. Pour en savoir plus, veuillez consulter Paramètres API.
Configure Device User Code Settings (Configurez les paramètres du code utilisateur de l’appareil) pour définir le jeu de caractères, le format et la longueur de votre code utilisateur généré de manière aléatoire.
## Recevoir le code de l’appareil
-Lorsque l’utilisateur démarre l’application de l’appareil et souhaite l’autoriser, votre application doit demander un code d’appareil à Auth0 Authentication API pour l’associer à la session de l’utilisateur.
Pour obtenir le code de l’appareil, votre application doit appeler le point de terminaison d’autorisation de Authentication API du flux d’autorisation de l’appareil :
+Lorsque l’utilisateur démarre l’application de l’appareil et souhaite l’autoriser, votre application doit demander un code d’appareil à Auth0 Authentication API pour l’associer à la session de l’utilisateur.
Pour obtenir le code de l’appareil, votre application doit appeler le Authorize endpoint (Point de terminaison d’autorisation) d’Authentication API du flux d’autorisation de l’appareil :
- curl --request post \
+ curl --request post \
--url 'https://${account.namespace}/oauth/device/code' \
- --header 'content-type: application/x-www-form-urlencoded'
var client = new RestClient("https://${account.namespace}/oauth/device/code");
+ --header 'content-type: application/x-www-form-urlencoded'
var client = new RestClient("https://${account.namespace}/oauth/device/code");
var request = new RestRequest(Method.POST);
request.AddHeader("content-type", "application/x-www-form-urlencoded");
-IRestResponse response = client.Execute(request);
package main
+IRestResponse response = client.Execute(request);
package main
@@ -84,11 +82,11 @@ func main() {
-}
HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/device/code")
+}
HttpResponse<String> response = Unirest.post("https://${account.namespace}/oauth/device/code")
.header("content-type", "application/x-www-form-urlencoded")
- .asString();
var axios = require("axios").default;
+ .asString();
var axios = require("axios").default;
@@ -112,7 +110,7 @@ axios.request(options).then(function (response) {
console.error(error);
-});
#import <Foundation/Foundation.h>
+});
#import <Foundation/Foundation.h>
@@ -152,7 +150,7 @@ NSURLSessionDataTask *dataTask = [session dataTaskWithRequest:request
}];
-[dataTask resume];
$curl = curl_init();
+[dataTask resume];
$curl = curl_init();
@@ -200,7 +198,7 @@ if ($err) {
echo $response;
-}
import http.client
+}
import http.client
@@ -222,7 +220,7 @@ data = res.read()
-print(data.decode("utf-8"))
require 'uri'
+print(data.decode("utf-8"))
require 'uri'
require 'net/http'
@@ -250,7 +248,7 @@ request["content-type"] = 'application/x-www-form-urlencoded'
response = http.request(request)
-puts response.read_body
import Foundation
+puts response.read_body
import Foundation
@@ -327,7 +325,7 @@ dataTask.resume()
## Interrogation du point de terminaison du jeton
-Pendant que votre application attend que l’utilisateur l’active, elle doit appeler le point de terminaison POST /oauth/token de Authentication API de manière intermittente et traiter la réponse de manière appropriée.
Assurez-vous que votre application attend la durée de interval
(en secondes) ou jusqu’à ce qu’elle reçoive une réponse positive, la durée la plus longue étant retenue, afin d’éviter les problèmes de latence du réseau.
curl --request POST \
+Pendant que votre application attend que l’utilisateur l’active, elle doit appeler le point de terminaison POST /oauth/token d’Authentication API de manière intermittente et traiter la réponse de manière appropriée.
Assurez-vous que votre application attend la durée de interval
(en secondes) ou jusqu’à ce qu’elle reçoive une réponse positive, la durée la plus longue étant retenue, afin d’éviter les problèmes de latence du réseau.
curl --request POST \
--url 'https://${account.namespace}/oauth/token' \
@@ -346,7 +344,7 @@ dataTask.resume()
+
-
## Autorisation de l’utilisateur
-L’utilisateur peut soit balayer le code QR, soit ouvrir la page d’activation et saisir le code d’utilisateur :

Une page de confirmation s’affiche pour que l’utilisateur confirme qu’il s’agit du bon appareil :

L’utilisateur terminera la transaction en se connectant. Cette étape peut comprendre un ou plusieurs des procédés suivant :
Authentifier l’utilisateur
Redirection de l’utilisateur vers un fournisseur d’identité pour gérer l’authentification
Vérification des sessions actives d’authentification unique (SSO)
Obtenir le consentement de l’utilisateur pour l’appareil, à moins qu’il n’ait été donné au préalable.

Une fois l’authentification et le consentement obtenus, la demande de confirmation s’affiche :

À ce stade, l’utilisateur s’est authentifié et l’appareil a été autorisé.
+L’utilisateur peut soit balayer le code QR, soit ouvrir la page d’activation et saisir le code d’utilisateur :

Une page de confirmation s’affiche pour que l’utilisateur confirme qu’il s’agit du bon appareil :

L’utilisateur terminera la transaction en se connectant. Cette étape peut comprendre un ou plusieurs des procédés suivant :
Authentifier l’utilisateur
Redirection de l’utilisateur vers un fournisseur d’identité pour gérer l’authentification
Vérification des sessions actives d’authentification unique (SSO)
Obtenir le consentement de l’utilisateur pour l’appareil, à moins qu’il n’ait été donné au préalable

Une fois l’authentification et le consentement obtenus, la demande de confirmation s’affiche :

À ce stade, l’utilisateur s’est authentifié et l’appareil a été autorisé.
## Recevoir les jetons
@@ -367,12 +365,12 @@ dataTask.resume()
-Vous devez valider vos jetons avant de les enregistrer. Pour en savoir plus, consultez Validation des jetons d’accès et Validation des jetons d’ID.
Les jetons d’accès sont utilisés pour appeler le point de terminaison Get User Info de Authentication API (si l’application de votre appareil a demandé la permission openid
) ou l’API définie par le paramètre audience
. Si vous appelez votre propre API, votre application doit vérifier le jeton d’accès avant de l’utiliser.
Les jetons d’ID contiennent des informations sur l’utilisateur qui doivent être décodées et extraites. Authentication API ne renvoie un id_token
que si l’application de votre appareil a demandé la permission openid
.
Les jetons d’actualisation sont utilisés pour obtenir un nouveau jeton d’accès ou un nouveau jeton d’ID après l’expiration du précédent. Authentication API ne renvoie un refresh_token
que si le paramètre Allow Offline Access (Autoriser l’accès hors ligne) est activé pour l’API indiquée par le paramètre audience
et que l’application de votre appareil a demandé la permission offline_access
.
+Vous devez valider vos jetons avant de les enregistrer. Pour en savoir plus, consultez Valider les jetons d’accès et Valider les jetons d’ID.
Les jetons d’accès sont utilisés pour appeler le point de terminaison Get User Info de Authentication API (si l’application de votre appareil a demandé la permission openid
) ou l’API définie par le paramètre audience
. Si vous appelez votre propre API, votre application doit vérifier le jeton d’accès avant de l’utiliser.
Les jetons d’ID contiennent des informations sur l’utilisateur qui doivent être décodées et extraites. Authentication API ne renvoie un id_token
que si l’application de votre appareil a demandé la permission openid
.
Les jetons d’actualisation sont utilisés pour obtenir un nouveau jeton d’accès ou un nouveau jeton d’ID après l’expiration du précédent. Authentication API ne renvoie un refresh_token
que si le paramètre Autoriser l’accès hors ligne est activé pour l’API indiquée par le paramètre public
et que l’application de votre appareil a demandé la permission offline_access
.
## Appeler votre API
-Pour appeler votre API, votre application doit transmettre le jeton d’accès en tant que jeton du porteur dans l’en-tête Authorization
de votre requête HTTP.
curl --request GET \
+Pour appeler votre API, votre application doit transmettre le jeton d’accès en tant que jeton de porteur dans l’en-tête Authorization
de votre requête HTTP.
curl --request GET \
--url https://myapi.com/api \
@@ -387,7 +385,7 @@ dataTask.resume()
## Jetons d’actualisation
-Pour obtenir un nouveau jeton d’accès pour un utilisateur, votre application peut appeler le point de terminaison POST /oauth/token de Authentication API avec le paramètre refresh_token
.
curl --request POST \
+Pour obtenir un nouveau jeton d’accès pour un utilisateur, l’application de votre appareil peut appeler le point de terminaison POST /oauth/token de l’API d’authentication avec le paramètre refresh_token
.
curl --request POST \
--url 'https://${account.namespace}/oauth/token' \
@@ -419,12 +417,12 @@ dataTask.resume()
-Pour en savoir plus sur les jetons d’actualisation, consultez Jetons d’actualisation.
+Pour en savoir plus sur les jetons d’actualisation, veuillez consulter Jetons d’actualisation.
## Dépannage
-Les journaux de locataires sont créés pour toutes les interactions qui ont lieu et peuvent être utilisés pour résoudre les problèmes.
+Les journaux de locataires sont créés pour toutes les interactions qui ont lieu et peuvent être utilisés pour résoudre les problèmes.
@@ -520,7 +518,7 @@ dataTask.resume()
-Jeton expiré
L’utilisateur n’a pas autorisé l’appareil assez rapidement, le device_code
a donc expiré. Votre application doit avertir l’utilisateur que le flux a expiré et l’inviter à le réinitialiser.
Le expired_token
n’est renvoyé qu’une seule fois. Ensuite, le point de terminaison renvoie l’erreur invalid_grant
.
`HTTP 403`
+Jeton expiré
L’utilisateur n’a pas autorisé l’appareil assez rapidement, par conséquent le device_code
a expiré. Votre application doit avertir l’utilisateur que le flux a expiré et l’inviter à le réinitialiser.
Le expired_token
n’est renvoyé qu’une seule fois. Ensuite, le point de terminaison renvoie l’erreur invalid_grant
.
`HTTP 403`
@@ -548,14 +546,14 @@ dataTask.resume()
-Cela peut se produire pour diverses raisons, notamment :
L’utilisateur a refusé d’autoriser l’appareil.
Le serveur d’autorisation a refusé la transaction.
Une Action configurée a refusé l’accès.
+Cela peut se produire pour diverses raisons, notamment :
l’utilisateur a refusé d’autoriser l’appareil,
le serveur d’autorisation a refusé la transaction.
Une Action configurée a refusé l’accès.
## Exemples de mises en œuvre
-Consultez les exemples ci-dessous pour savoir comment mettre en œuvre ce flux dans des applications réelles.
AppleTV (Swift) : application simple qui montre comment Auth0 peut être utilisé avec le flux d’autorisation d’un appareil AppleTV.
CLI (Node.js) : exemple de mise en œuvre d’une CLI qui utilise le flux d’autorisation de l’appareil au lieu du flux du code d’autorisation. La principale différence est que votre CLI n’a pas besoin d’héberger un serveur Web et d’écouter sur un port.
+Consultez les exemples ci-dessous pour savoir comment mettre en œuvre ce flux dans des applications réelles.
AppleTV (Swift) : application simple qui montre comment Auth0 peut être utilisé avec le flux d’autorisation d’un appareil AppleTV.
CLI (Node.js) : exemple de mise en œuvre d’une CLI qui utilise le flux d’autorisation de l’appareil au lieu du flux du code d’autorisation. La principale différence est que votre CLI n’a pas besoin d’héberger un serveur Web et d’écouter sur un port.
## Limites
-Pour utiliser le flux d’autorisation de l’appareil, l’application de l’appareil doit :
Prendre en charge l’indication du nom du serveur (SNI)
Être une application native
Avoir la méthode d’authentification est définie sur None (Aucun)
Être conforme à l’OIDC
Ne pas être créée au moyen de l’enregistrement dynamique des clients
En outre, le flux d’autorisation de l’appareil ne permet pas :
Les connexions via réseau social qui utilisent les clés de développeur Auth0, sauf si vous utilisez la nouvelle expérience de connexion universelle
Les paramètres de la chaîne de requête doivent être accessibles à partir d’une page de connexion ou d’actions hébergées.
+Pour utiliser le flux d’autorisation de l’appareil, l’application de l’appareil doit :
Prendre en charge l’indication du nom du serveur (SNI)
Avoir la Authentication Method définie sur None
Ne pas être créée au moyen de Dynamic Client Registration (Enregistrement dynamique des clients)
En outre, le flux d’autorisation de l’appareil ne permet pas :
Les Social Connections (Connexions via réseau social) qui utilisent les Auth0 developer keys (Clés de développeur Auth0), sauf si vous utilisez l’ Universal Login experience (Expérience de connexion universelle)
Les paramètres de la chaîne de requête doivent être accessibles à partir d’une page de connexion ou d’actions hébergées.
diff --git a/fr-ca/articles/quickstart/native/flutter/interactive.md b/fr-ca/articles/quickstart/native/flutter/interactive.md
index 34dac73071..1adde93134 100644
--- a/fr-ca/articles/quickstart/native/flutter/interactive.md
+++ b/fr-ca/articles/quickstart/native/flutter/interactive.md
@@ -7,64 +7,70 @@ files:
- files/main_view
- files/profile_view
github:
- path: https://github.com/auth0-samples/auth0-flutter-samples/tree/main/sample
+ path: sample
locale: fr-CA
---
# Ajouter une fonctionnalité de connexion à votre application Flutter
-Auth0 vous permet d’ajouter rapidement l’authentification et d'accéder aux informations de profil utilisateur dans votre application. Ce guide explique comment intégrer Auth0 avec une application Flutter à l’aide de la trousse SDK Flutter Auth0.
La trousse SDK Flutter ne prend actuellement en charge que les applications Flutter pour Android, iOS et macOS.
Ce guide rapide suppose que vous avez déjà une application Flutter installée et active. Si ce n'est pas le cas, consultez les guides "Getting started" de Flutter pour commencer avec une application simple.
Vous devez également être familiarisé avec Outil de ligne de commande Flutter.
+Auth0 vous permet d’ajouter rapidement l’authentification et d’accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide explique comment intégrer Auth0 à une application Flutter à l’aide de la trousse SDK Flutter Auth0.
La trousse SDK Flutter ne prend actuellement en charge que les applications Flutter pour Android, iOS et macOS.
Ce guide de démarrage rapide suppose que vous avez déjà une application Flutter installée et active. Si ce n’est pas le cas, consultez les guides « Getting started » (Premiers pas) de Flutter pour commencer avec une application simple.
Vous devez également être familiarisé avec Outil de ligne de commande Flutter.
-## Configurer Auth0
+## Configuration d’Auth0
-Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer l’authentification pour votre projet.
Configurer une application Auth0
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application Auth0 Native existante. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, consultez un exemple d'application.
Configurer les URL Callback et les URL de déconnexion
Les URL Callback et les URL de déconnexion sont les URL que Auth0 appelle pour rediriger vers votre application. Auth0 fait appel à la URL Callback après avoir authentifié l’utilisateur et à l’URL de déconnexion après avoir supprimé le témoin de session. Si les URL Callback et de déconnexion ne sont pas définies, les utilisateurs ne pourront pas se connecter ou se déconnecter de l’application et recevront une erreur.
Définissez les URCallback et de déconnexion sur les valeurs suivantes, en fonction de votre plateforme.
Sur Android, la valeur du paramètre fictif SCHEME
peut être https
ou un autre schéma personnalisé. Les schémas https
nécessitent l’activation des liens d’application Android.
Sur iOS 17.4+ et macOS 14.4+, il est possible d’utiliser des liens universels (https
) comme URL Callback et de déconnexion. Lorsqu’activé, la trousse SDK reviendra à l’utilisation d’un schéma d’URL personnalisé sur les anciennes versions iOS/MacOS – l’identificateur de bundlede votre application. Cette fonctionnalité nécessite un Xcode 15.3+ et un compte Apple Developer payant.
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
Par exemple, si l’identifiant de votre bundle iOS était com.example.MyApp
et votre domaine Auth0 était example.us.auth0.com
, alors cette valeur serait :
https://example.us.auth0.com/ios/com.example.MyApp/callback, com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
+Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.
Configurer une application Auth0.
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application Auth0 Native existante. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.
Configurer les URL de rappel et les URL de déconnexion
Les Callback URL et les URL de déconnexion sont des URL qu’invoque Auth0 pour rediriger vers votre application. Auth0 invoque l’URL de rappel après avoir authentifié l’utilisateur, et l’URL de déconnexion après avoir supprimé le témoin de session. Si les Callback URL et les URL de déconnexion ne sont pas définies, les utilisateurs ne pourront pas se connecter ou se déconnecter de l’application et recevront un message d’erreur.
Définissez les Callback URL et les URL de déconnexion sur les valeurs suivantes, en fonction de votre plateforme.
Sur Android, la valeur du paramètre fictif SCHEME
peut être https
ou un autre schéma personnalisé. Les schémas https
nécessitent l’activation des liens d’application Android.
Sur iOS 17.4+ et macOS 14.4+, il est possible d’utiliser des liens universels (https
) comme URL Callback et de déconnexion. Lorsqu’activé, la trousse SDK reviendra à l’utilisation d’un schéma d’URL personnalisé sur les anciennes versions iOS/MacOS – l’identificateur de bundlede votre application. Cette fonctionnalité nécessite un Xcode 15.3+ et un compte Apple Developer payant.
Android
SCHEME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback
iOS
https://{yourDomain}/ios/YOUR_BUNDLE_IDENTIFIER/callback,
-## Installez la trousse SDK Flutter Auth0
+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
Par exemple, si l’identifiant de votre bundle iOS était com.example.MyApp
et votre domaine Auth0 était example.us.auth0.com
, alors cette valeur serait :
https://example.us.auth0.com/ios/com.example.MyApp/callback,
-Ajoutez la trousse SDK Flutter Auth0 au projet :
flutter pub add auth0_flutter
+com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
+
+## Installer la trousse SDK Flutter Auth0
+
+
+Ajoutez la trousse SDK Flutter Auth0 au projet :
flutter pub add auth0_flutter
## Configurer Android
-Si vous ne développez pas pour la plateforme Android, ignorez cette étape.
La trousse SDK nécessite des paramètres fictifs dans le manifeste. Auth0 utilise des paramètres fictifs en interne pour définir un intent-filter
, qui capture la Callback URL pour l’authentification. Vous devez définir le domaine du locataire Auth0 et le schéma de la Callback URL.
L'exemple utilise les paramètres fictifs suivants :
auth0Domain
: le domaine de votre locataire Auth0. En général, vous le trouverez dans Auth0 Dashboard sous vos Application Settings (Paramètres d’application) dans le champ Domain (Domaine) . Si vous utilisez un domaine personnalisé, indiquez dans ce champ votre domaine personnalisé.
auth0Scheme
: le schéma à utiliser. Peut être un schéma personnalisé, ou https si vous souhaitez utiliser les liens d'application Android. Pour en savoir plus sur la définition de cette valeur, lisez le fichier SDK README d’Auth0.Android.
Vous n’avez pas besoin de déclarer un intent-filter
spécifique pour votre activité car vous avez défini les paramètres fictifs dans le manifeste avec vos valeurs Auth0 Domain et Scheme. La bibliothèque gère la redirection pour vous.
Exécutez Sync Project with Gradle Files dans Android Studio pour appliquer vos modifications.
+Si vous ne développez pas pour la plateforme Android, ignorez cette étape.
La trousse SDK nécessite des placeholder dans le manifeste. Auth0 utilise des placeholder en interne pour définir un intent-filter
, qui capture l’URL de rappel d’authentification. Vous devez définir le domaine du locataire Auth0 et le schéma de l’URL de rappel.
L’exemple utilise les placeholder suivants :
auth0Domain
: Le domaine de votre locataire Auth0. En général, vous le trouverez dans Auth0 Dashboard sous vos Application Settings (Paramètres d’application) dans le champ Domain (Domaine). Si vous utilisez un domaine personnalisé, indiquez dans ce champ votre domaine personnalisé.
auth0Scheme
: Le schéma à utiliser. Peut être un schéma personnalisé, ou https si vous souhaitez utiliser les liens d’application Android. Vous pouvez en savoir plus sur la définition de cette valeur dans le SDK README d’Auth0.Android.
Vous n’avez pas besoin de déclarer un intent-filter
spécifique pour votre activité car vous avez défini les paramètres fictifs dans le manifeste avec vos valeurs Auth0 Domain et Scheme. La bibliothèque gère la redirection pour vous.
Exécutez Sync Project with Gradle Files dans Android Studio pour appliquer vos modifications.
## Configurer iOS/macOS
-Si vous ne développez pas pour les plateformes iOS ou macOS, ignorez cette étape.
Cette étape nécessite un compte Apple Developer payant. Il est nécessaire d’utiliser des liens universels comme URL Callback et de déconnexion. Ignorez cette étape pour utiliser plutôt un schéma d’URL personnalisé.
Configurer l’ID Team et l’identificateur de bundle
Allez à la page des paramètres de votre application Auth0, faites défiler jusqu’en bas, et ouvrez Advanced Settings (Paramètres avancés) > Device Settings (Paramètres de l’appareil). Dans la section iOS, définissez Team ID sur votre Apple Team ID et App ID sur l’identificateur du bundle de votre application.

Cette action ajoutera votre application au fichier apple-app-site-association
de votre locataire Auth0.
Ajoutez la capacité de domaine associé.
Ouvrez votre application dans Xcode en exécutant open ios/Runner.xcworkspace
(ou open macos/Runner.xcworkspace
pour macOS). Allez à l’onglet Signing and Capabilities (Signature et capacités) des paramètres de la cible du Runner, puis appuyez sur le bouton + Capability (Capabilité). Sélectionnez ensuite Associated Domains (Domaines associés).

Ensuite, ajoutez l'entrée suivante sous Associated Domains (Domaines associés) :
webcredentials:{yourDomain}
Si vous avez un domaine personnalisé, utilisez-le à la place du domaine Auth0 de la page des paramètres.
Pour que le domaine associé fonctionne, votre application doit être signée avec votre certificat d’équipe même lors du développement pour le simulateur iOS. Assurez-vous d’utiliser Apple Team dont la Team ID (ID d’équipe) est configurée dans la page des paramètres de votre application Auth0.
+Si vous ne développez pas pour les plateformes iOS ou macOS, ignorez cette étape.
Cette étape nécessite un compte Apple Developer payant. Il est nécessaire d’utiliser des liens universels comme URL Callback et de déconnexion. Ignorez cette étape pour utiliser plutôt un schéma d’URL personnalisé.
Configurer Team ID et l’identifiant du bundle
Allez à la page des paramètres de votre application Auth0, faites défiler jusqu’en bas, et ouvrez Advanced Settings (Paramètres avancés) > Device Settings (Paramètres de l’appareil). Dans la section iOS, définissez Team ID sur votre Apple Team ID et App ID sur l’identificateur du bundle de votre application.

Cette action ajoutera votre application au fichier apple-app-site-association
de votre locataire Auth0.
Ajouter la capacité de domaine associé
Ouvrez votre application dans Xcode en exécutant open ios/Runner.xcworkspace
(ou open macos/Runner.xcworkspace
pour macOS). Allez à l’ongletSigning and Capabilities (Signature et capacités) des paramètres de la cible de l’exécuteur, puis appuyez sur le bouton + Capability (Capabilité). Puis sélectionnez Associated Domains (Domaines associés).

Ensuite, ajoutez l’entrée suivante sous Associated Domains (Domaines associés) :
webcredentials:{yourDomain}
Si vous avez un domaine personnalisé, utilisez-le à la place du domaine Auth0 de la page des paramètres.
Pour que le domaine associé fonctionne, votre application doit être signée avec votre certificat d’équipe même lors du développement pour le simulateur iOS. Assurez-vous d’utiliser Apple Team dont la Team ID (ID d’équipe) est configurée dans la page des paramètres de votre application Auth0.
## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="main_view.dart#29:40" }}}
-La connexion universelle est le moyen le plus simple de configurer l’authentification dans votre application. Nous recommandons de l’utiliser pour une meilleure expérience, une meilleure sécurité et un plus grand nombre de fonctionnalités.
Intégrez la connexion universelle Auth0 dans votre application Flutter en utilisant la classe Auth0
. Redirigez vos utilisateurs vers la page de connexion universelle Auth0 en utilisant webAuthentication().login()
. Il s'agit d'une fonctionnalité Future
pour que vous récupériez les jetons de l’utilisateur.
Android : si vous utilisez un schéma personnalisé, passez ce schéma à la méthode de connexion afin que le SDK puisse assurer un aller-retour vers la page de connexion :
await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').login();
Lorsqu’un utilisateur se connecte, il est redirigé vers votre application. Vous pouvez alors accéder à l’identificateur et aux jetons d’accès de cet utilisateur.
Flutter - Étape 5 - Ajouter une fonctionnalité de connexion à votre application Ajoutez un bouton à votre application qui appelle webAuthentication().login()
et connecte l’utilisateur à votre application. Vérifiez que vous êtes redirigé vers Auth0 pour l’authentification, puis vers votre application.
Vérifiez que vous pouvez accéder aux jetons sur le résultat de l’appel de login
.
+La connexion universelle est le moyen le plus simple de mettre en place l’authentification dans votre application. Nous recommandons de l’utiliser pour une meilleure expérience, une meilleure sécurité et un plus grand nombre de fonctionnalités.
Intégrez la connexion universelle Auth0 dans votre application Flutter en utilisant la classe Auth0
. Redirigez vos utilisateurs vers la page de connexion universelle Auth0 en utilisant webAuthentication().login()
. Il s’agit d’une fonctionnalité Future
pour que vous récupériez les jetons de l’utilisateur.
Android : si vous utilisez un schéma personnalisé, passez ce schéma à la méthode de connexion afin que le SDK puisse assurer un aller-retour vers la page de connexion :
await auth0.webAuthentication(scheme: ’YOUR CUSTOM SCHEME’).login();
Lorsqu’un utilisateur se connecte, il est redirigé vers votre application. Puis, vous pouvez accéder à l’identifiant et aux jetons d’accès de cet utilisateur.
Flutter – Étape 5 – Ajouter une fonctionnalité de connexion à votre application Ajoutez un bouton à votre application qui appelle webAuthentication().login()
et déconnecte l’utilisateur de votre application. Vérifiez que vous êtes redirigé vers Auth0 pour l’authentification, puis renvoyé vers votre application.
Vérifiez que vous pouvez accéder aux jetons sur le résultat de l’appel login
.
- 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
Make sure the domain and client ID values are imported correctly
If using Android, ensure that the manifest placeholders have been set up correctly, otherwise the redirect back to your app may not work
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si le lancement de votre application a échoué :
Assurez-vous que les URL de rappel autorisées sont correctement définies
Vérifiez que vous avez enregistré vos modifications après avoir saisi vos URL
Assurez-vous que les valeurs de domaine et d’identifiant client sont importées correctement
Si vous utilisez Android, assurez-vous que les paramètres fictifs du manifeste ont été correctement configurés, sinon la redirection vers votre application risque de ne pas fonctionner
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="main_view.dart#45:55" }}}
-Pour déconnecter les utilisateurs, redirigez-les vers le point de terminaison Auth0 pour effacer leur session de connexion en appelant la trousse SDK Flutter Auth0 webAuthentication().logout()
. En savoir plus sur la déconnexion d’Auth0.
Android : si vous utilisez un schéma personnalisé, passez ce schéma à la méthode de déconnexion afin que la trousse SDK puisse renvoyer correctement vers votre application :
await auth0.webAuthentication(scheme: 'YOUR CUSTOM SCHEME').logout();
Flutter - Étape 5 - Ajouter une fonctionnalité de connexion à votre application Ajoutez un bouton à votre application qui appelle webAuthentication().logout()
et déconnecte l’utilisateur de votre application. Lorsque vous le sélectionnez, vérifiez que votre application Flutter vous redirige vers le point de terminaison de déconnexion et vice versa. Vous ne devriez pas être connecté à votre application.
+Pour déconnecter les utilisateurs, redirigez-les vers le point de terminaison Auth0 pour effacer leur session de connexion en appelant la trousse SDK Flutter Auth0 webAuthentication().logout()
. En savoir plus sur la déconnexion d’Auth0.
Android : si vous utilisez un schéma personnalisé, passez ce schéma à la méthode de déconnexion afin que la trousse SDK puisse renvoyer correctement vers votre application :
await auth0.webAuthentication(scheme: ’YOUR CUSTOM SCHEME’).logout();
Flutter - Étape 6 - Ajouter une fonctionnalité de connexion à votre application Ajoutez un bouton à votre application qui appelle webAuthentication().logout()
et déconnecte l’utilisateur de votre application. Lorsque vous le sélectionnez, vérifiez que votre application Flutter vous redirige vers le point de terminaison de déconnexion et vice-versa. Vous ne devriez pas être connecté à votre application.
- 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
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si votre application ne s’est pas déconnectée avec succès :
Assurez-vous que les URL de déconnexion autorisées sont correctement définies
Vérifiez que vous avez enregistré vos modifications après avoir saisi vos URL
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
## Afficher les informations du profil utilisateur {{{ data-action="code" data-code="profile_view.dart" }}}
-Le profil utilisateur récupère automatiquement les propriétés du profil utilisateur pour vous lorsque vous appelez webAuthentication().login()
. L’objet retourné à partir de l’étape de connexion contient une propriété user
avec toutes les propriétés du profil utilisateur, qui est renseigné en décodant le jeton d’identification.
Flutter - Étape 7 - Afficher les informations du profil utilisateur Connectez-vous et inspectez la propriété user
du résultat. Vérifiez les informations de profil utilisateur actuelles, telles que son email
ou name
.
+Le profil utilisateur récupère automatiquement les propriétés du profil utilisateur pour vous lorsque vous appelez webAuthentication().login()
. L’objet retourné à partir de l’étape de connexion contient une propriété user
avec toutes les propriétés du profil utilisateur, qui est renseigné en décodant le jeton d’ID.
Flutter - Étape 7 - Afficher les informations du profil utilisateur Connectez-vous et inspectez la propriété user
par rapport au résultat. Vérifiez les informations de profil utilisateur actuel, telles que son email
ou name
.
- If your app did not return user profile information:
Verify the access token is valid
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si votre application n’a pas renvoyé d’informations sur le profil utilisateur :
Vérifiez la validité du jeton d’accès
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
diff --git a/fr-ca/articles/quickstart/native/ionic-angular/interactive.md b/fr-ca/articles/quickstart/native/ionic-angular/interactive.md
index 7ab60b6db2..46d19d59ee 100644
--- a/fr-ca/articles/quickstart/native/ionic-angular/interactive.md
+++ b/fr-ca/articles/quickstart/native/ionic-angular/interactive.md
@@ -1,6 +1,6 @@
---
title: Ajouter la connexion à votre application Ionic Angular avec Capacitor
-description: Ce guide montre comment intégrer Auth0 avec une application Ionic (Angular) & Capacitor en utilisant la trousse SDK Angular Auth0.
+description: Ce guide explique comment intégrer Auth0 avec une application Ionic (Angular) et Capacitor en utilisant la trousse SDK Angular Auth0.
interactive: true
files:
- files/app.module
@@ -9,81 +9,81 @@ files:
- files/logout-button
- files/user-profile
github:
- path: https://github.com/auth0-samples/auth0-ionic-samples/tree/main/angular
+ path: angular
locale: fr-CA
---
# Ajouter la connexion à votre application Ionic Angular avec Capacitor
-Auth0 vous permet d’ajouter rapidement l’authentification et d'accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide montre comment intégrer Auth0 avec une application Ionic (Angular) & Capacitor en utilisant la trousse SDK Angular Auth0.
+Auth0 vous permet d’ajouter rapidement l’authentification et d’accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide explique comment intégrer Auth0 avec une application Ionic (Angular) & Capacitor en utilisant la trousse SDK Angular Auth0.
## Démarrage
-Ce démarrage rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez le Using Capacitor with Ionic Framework guide (Utiliser Capacitor avec Ionic Framework) pour commencer avec une application simple ou clonez nos exemples d’applications.
Vous devez également connaître le Capacitor development workflow (flux de travail de développement Capacitor).
+Ce guide de démarrage rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez Using Capacitor with Ionic Framework guide (Utiliser Capacitor avec le cadre d’applications Ionic) pour commencer avec une application simple ou clonez nos our sample apps (exemples d’applications).
Vous devez également être familiarisé avec Capacitor development workflow (le flux de production de développement Capacitor).
-## Configuration d'Auth0
+## Configuration d’Auth0
-Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. Vous allez configurer le fonctionnement de l’authentification pour votre projet dans l'application Auth0.
Tout au long de cet article, YOUR_PACKAGE_ID
est l’identifiant du package de votre application. Ceci peut être trouvé et configuré dans le champ appId
de votre fichier capacitor.config.ts
. Voir Capacitor's Config schema (Schéma de configuration du Capacitor) pour plus d'informations.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via le SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, vous pouvez plutôt consulter une application faisant office d’exemple.
Configuration des URL de rappel
Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après qu’ils se sont authentifiés. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur :
YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
Configurer les URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après qu’ils se sont déconnectés. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur :
YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
Configurer origines autorisées
Pour pouvoir faire des requêtes à partir de votre application native vers Auth0, définissez les origines autorisées suivantes dans vos paramètres de l’application.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur capacitor://localhost, http://localhost
pour iOS et Android respectivement.
Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les paramètres de l’application.
+Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.
Tout au long de cet article, YOUR_PACKAGE_ID
est l’identifiant du package de votre application. Ceci peut être trouvé et configuré dans le champ appId
de votre fichier capacitor.config.ts
. Voir Capacitor’s Config schema (Schéma de configuration du Capacitor) pour plus d’informations.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.
Configurer les URL de rappel
Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur :
YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
Configuration des URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur :
YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
Configurer les origines autorisées
Pour pouvoir faire des requêtes à partir de votre application d’origine vers Auth0, définissez les origines autorisées dans vos Application Settings (Paramètres d’application).
Si vous suivez notre projet à titre d’exemple, définissez ceci sur capacitor://localhost, http://localhost
pour iOS et Android respectivement.
Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les Application Settings (Paramètres d’application).
## Installer la trousse SDK React Auth0
-Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Angular Auth0 :
npm install @auth0/auth0-angular
La trousse SDK expose plusieurs types qui vous aident à intégrer Auth0 avec votre application Angular, y compris un module et un service d’authentification.
Installer les plugiciels Capacitor
Ce démarrage rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :
npm install @capacitor/browser @capacitor/app
@capacitor/browser
: Vous permet d’interagir avec le navigateur de système de l'appareil et est utilisé pour ouvrir l’URL vers le terminal d’autorisation de Auth0.
@capacitor/app
: Vous permet de souscrire à des événements d’application de haut niveau, utiles pour la gestion des rappels depuis Auth0.
Le plugiciel de navigateur de Capacitor sur iOS utilise SFSafariViewController
, qui sur iOS 11+ ne partage pas les témoins avec Safari sur l’appareil. Cela signifie que SSO ne fonctionnera pas sur ces appareils. Si vous avez besoin de SSO, veuillez utiliser un plugiciel compatible qui utilise ASWebAuthenticationSession.
+Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Angular Auth0 :
npm install @auth0/auth0-angular
La trousse SDK expose plusieurs types qui vous aident à intégrer Auth0 avec votre application Angular, y compris un module et un service d’authentification.
Installer les plugiciels Capacitor
Ce guide rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :
npm install @capacitor/browser @capacitor/app
@capacitor/browser
: Vous permet d’interagir avec le navigateur de système de l’appareil, et est utilisé pour ouvrir l’URL vers le point de terminaison d’autorisation d’Auth0.
@capacitor/app
: Vous permet de vous abonner à des événements d’application de haut niveau, utiles pour la gestion des Callbacks depuis Auth0.
Le plugiciel de navigateur de Capacitor sur iOS utilise SFSafariViewController
, qui sur iOS 11+ ne partage pas les témoins avec Safari sur l’appareil. Cela signifie que SSO ne fonctionnera pas sur ces appareils. Si vous avez besoin de SSO, veuillez utiliser un plugiciel compatible qui utilise ASWebAuthenticationSession.
## Enregistrer et configurer le module d’authentification {{{ data-action="code" data-code="app.module.ts" }}}
-La trousse SDK exporte AuthModule
, un module qui contient tous les services nécessaires au fonctionnement de la trousse SDK. Ce module doit être enregistré avec votre application et être configuré avec votre domaine Auth0 et votre identifiant client.
La fonction AuthModule.forRoot
prend la configuration suivante :
domain
: La valeur du domaine
présente dans les Paramètres de l’application que vous avez créée dans le Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité de domaines personnalisésd’Auth0.
clientId
: La valeur de l’identifiant client présente dans les Paramètres de l’application que vous avez créée dans le Auth0 Dashboard.
useRefreshTokens
: Pour utiliser auth0-angular avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d'actualisation.
useRefreshTokensFallback
: Pour utiliser auth0-angular avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.
authorizationParams.redirect_uri
: L’URL pour rediriger vos utilisateurs après qu’ils se sont authentifiés avec Auth0.
Pour conserver l’authentification après la fermeture et la réouverture de l’application, vous pouvez définir cacheLocation
sur localstorage
lors de la configuration du SDK, mais soyez conscient des risques liés au stockage de jetons dans localstorage. De plus, localstorage devrait être traité comme transitoire dans l’application Capacitor car les données pourraient être récupérées de façon inattendue dans certaines circonstances. Veuillez lire les directives sur le stockage dans la documentation Capacitor.
En outre, le SDK a la capacité d’utiliser une implémentation de cache personnalisée pour stocker des jetons, si vous avez une exigence d’utiliser un mécanisme de stockage plus sûr et persistant.
Notez que nous recommandons de ne pas utiliser le plugiciel Capacitor pour stocker les jetons, car cela est soutenu par UserDefaults et SharedPreferences sur iOS et Android respectivement. Les données stockées à l’aide de ces API ne sont pas cryptées, non sécurisées et peuvent également être synchronisées dans le nuage.
Ionic & Capacitor (Angular) - Étape 4 - Enregistrer et configurer le module d’authentification Maintenant que vous avez configuré votre application avec la trousse SDK Angular Auth0, exécutez votre application pour vérifier que la trousse SDK est initialisée sans erreur et que votre application s’exécute comme auparavant.
+La trousse SDK exporte AuthModule
, un module qui contient tous les services nécessaires au fonctionnement de la trousse SDK. Ce module doit être enregistré avec votre application et être configuré avec votre domaine Auth0 et votre identifiant client.
La fonction AuthModule.forRoot
prend la configuration suivante :
domain
: La valeur domain
présente dans les paramètres de l’application que vous avez créée dans Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité Domaines personnalisés d’Auth0.
clientId
: La valeur de l’identifiant du client présente dans les paramètres de l’application que vous avez créée dans Auth0 Dashboard.
useRefreshTokens
: Pour utiliser auth0-angular avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d’actualisation.
useRefreshTokensFallback
: Pour utiliser auth0-angular avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.
authorizationParams.redirect_uri
: L’URL pour rediriger vos utilisateurs après qu’ils se sont authentifiés avec Auth0.
Pour conserver l’authentification après la fermeture et la réouverture de l’application, vous pouvez définir cacheLocation
sur localstorage
lors de la configuration du SDK, mais soyez conscient des risques liés au stockage de jetons dans localstorage. De plus, localstorage devrait être traité comme transitoire dans l’application Capacitor car les données pourraient être récupérées de façon inattendue dans certaines circonstances. Veuillez lire les directives sur le stockage dans la documentation Capacitor.
En outre, le SDK a la capacité d’utiliser une implémentation de cache personnalisée pour stocker des jetons, si vous avez une exigence d’utiliser un mécanisme de stockage plus sûr et persistant.
Notez que nous recommandons de ne pas utiliser le plugiciel Capacitor pour stocker les jetons, car cela est soutenu par UserDefaults et SharedPreferences sur iOS et Android respectivement. Les données stockées à l’aide de ces API ne sont pas cryptées, non sécurisées et peuvent également être synchronisées dans le nuage.
Ionic & Capacitor (Angular) - Étape 4 - Enregistrer et configurer le module d’authentification Maintenant que vous avez configuré votre application avec la trousse SDK Angular Auth0, exécutez votre application pour vérifier que la trousse SDK est initialisée sans erreur et que votre application s’exécute comme auparavant.
- Sorry about that. Here's a couple things to double check:
ensure the correct application is selected
did you save after entering your URLs?
make sure the domain and Client ID imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
assurez-vous que la bonne application est sélectionnée
avez-vous procédé à un enregistrement après avoir saisi vos URL?
assurez-vous que le domaine et l’identifiant client ont été importés correctement
Vous rencontrez toujours des problèmes? Consultez notre documentation ou visitez la page de notre communauté pour obtenir de l’aide.
## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="login-button.ts" }}}
-Dans une application Capacitor, le plugiciel de navigateur Capacitor effectue une redirection vers la page de connexion universelle Auth0. Définissez le paramètre openUrl
sur la fonction loginWithRedirect
pour utiliser Browser.open
de sorte que l’URL soit ouverte à l’aide du composant navigateur du système de l’appareil (SFSafariViewController sur iOS et Chrome Custom Tabs sur Android).
Par défaut, la méthode loginWithRedirect
de la trousse SDK utilise window.location.href
pour accéder à la page de connexion dans l’application de navigateur par défaut sur l'appareil de l’utilisateur plutôt que dans le composant de navigateur système approprié pour la plate-forme. L’utilisateur quitterait votre application pour s’authentifier et pourrait rendre l’expérience utilisateur sous-optimale.
Ionic & Capacitor (Angular) - Étape 5 - Ajouter la connexion à votre application La fonction loginWithRedirect
indique à la trousse SDK d’initier le flux de connexion, en utilisant la fonction Browser.open
pour ouvrir l’URL de connexion avec le composant navigateur du système de la plate-forme en définissant le paramètre openUrl
. Cela permet à votre utilisateur de se connecter à votre application. Les utilisateurs sont redirigés vers la page de connexion à Auth0 et ne reçoivent aucune erreur.
+Dans une application Capacitor, le plugiciel de navigateur Capacitor effectue une redirection vers la page de connexion universelle Auth0. Définissez le paramètre openUrl
sur la fonction loginWithRedirect
pour utiliser Browser.open
de sorte que l’URL soit ouverte à l’aide du composant navigateur du système de l’appareil (SFSafariViewController sur iOS et les Onglets Personnalisés Chrome sur Android).
Par défaut, la méthode loginWithRedirect
de la trousse SDK utilise window.location.href
pour accéder à la page de connexion dans l’application de navigateur par défaut sur l’appareil de l’utilisateur plutôt que dans le composant de navigateur système approprié pour la plate-forme. L’utilisateur quitterait votre application pour s’authentifier et pourrait rendre l’expérience utilisateur sous-optimale.
Ionic & Capacitor (Angular) - Étape 5 - Ajouter la connexion à votre application La fonction loginWithRedirect
indique à la trousse SDK d’initier le flux de connexion, en utilisant la fonction Browser.open
pour ouvrir l’URL de connexion avec le composant navigateur du système de la plateforme en définissant le paramètre openUrl
. Cela permet à votre utilisateur de se connecter à votre application. Les utilisateurs sont redirigés vers la page de connexion à Auth0 et ne reçoivent aucune erreur.
- Sorry about that. Here's a couple things to double check:
ensure that there are no errors in the browser's console window at the point of login
ensure the domain and Client ID are correct according to your Auth0 application in the Dashboard
if you are redirected to Auth0 and receive an error page, check the "technical details" section at the bottom for the reason for the failure
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
assurez-vous qu’il n’y a pas d’erreurs dans la fenêtre de la console du navigateur au point de connexion
assurez-vous que le domaine et l’identifiant client sont corrects selon votre application Auth0 dans le tableau de bord
si vous êtes redirigé vers Auth0 et recevez une page d’erreur, vérifiez la section des « détails techniques » en bas de la page pour connaître la raison de l’échec
-## Gérer le rappel de connexion {{{ data-action="code" data-code="app.component.ts" }}}
+## Gérer la callback de connexion {{{ data-action="code" data-code="app.component.ts" }}}
-Une fois que les utilisateurs se connectent avec la page de connexion universelle, ils se redirigent vers votre application via une URL avec un schéma d’URL personnalisé. L’événement appUrlOpen
doit être géré dans votre application. Vous pouvez appeler la méthode handleRedirectCallback
à partir de la trousse SDK Auth0 pour initialiser l’état d’authentification.
Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Pour vérifier le succès, vérifiez la présence des paramètres code
et state
dans l’URL.
La méthode Browser.close()
devrait fermer le navigateur lorsque cet événement est déclenché.
Notez que le rappel de l’événement appUrlOpen
est enveloppé dans ngZone.run
. Les changements aux observables qui se produisent lorsque handleRedirectCallback
est exécuté sont pris en compte par l’application Angular. Pour en savoir plus, lisez Using Angular with Capacitor (Utilisation d’Angular avec Capacitor). Sinon, l’écran ne se met pas à jour pour afficher l’état authentifié après la connexion.
Cet article suppose que vous utiliserez des schémas d’URL personnalisés pour gérer le rappel dans votre application. Pour ce faire, enregistrez votre YOUR_PACKAGE_ID
comme schéma d’URL pour la plateforme de votre choix. Pour en savoir plus, lire Defining a Custom URL Scheme (Définition d’un schéma d’URL personnalisé) pour iOS ou Create Deep Links to App Content (Création de liens profonds vers le contenu des applications) pour Android.
Ionic & Capacitor (Angular) - Étape 6 - Gérer le rappel de connexion Ajoutez l’appUrlOpen
au composant App
de votre application et connectez-vous. La fenêtre du navigateur devrait se fermer une fois que l’utilisateur s’authentifie et se connecte à votre application.
+Une fois que les utilisateurs sont connectés avec la page de connexion universelle, ils sont redirigés vers votre application via une URL avec un schéma d’URL personnalisé. L’événement appUrlOpen
doit être géré depuis votre application. Vous pouvez appeler la méthode handleRedirectCallback
depuis la trousse SDK Auth0 pour initier l’état de l’authentification.
Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Pour vérifier le succès, vérifiez la présence du code
et des paramètres state
dans l’URL.
La méthode Browser.close()
devrait fermer le navigateur lorsque cet événement est déclenché.
Notez que la callback de l’événement appUrlOpen
est enveloppé dans ngZone.run
. Les modifications aux observables survenant lorsque handleRedirectCallback
est exécuté sont détectées par l’application Angular. Pour en savoir plus sur cette fonctionnalité, veuillez consulter Utiliser Angular avec Capacitator. Sinon, l’écran ne se met pas à jour pour afficher l’état authentifié après la connexion.
Cet article suppose que vous utiliserez des schémas d’URL personnalisés pour gérer le rappel dans votre application. Pour ce faire, enregistrez votre YOUR_PACKAGE_ID
comme schéma d’URL pour la plateforme de votre choix. Pour en savoir plus, lire Defining a Custom URL Scheme (Définition d’un schéma d’URL personnalisé) pour iOS ou Create Deep Links to App Content (Création de liens profonds vers le contenu des applications) pour Android.
Ionic & Capacitor (Angular) - Étape 6 - Gérer le rappel de connexion Ajoutez appUrlOpen
au composant App
de votre application et connectez-vous. La fenêtre du navigateur devrait se fermer une fois que l’utilisateur s’authentifie et se connecte à votre application.
- Sorry about that. Here's a couple things to double check:
check that the custom URL scheme is registered for your chosen platform. On iOS, define a custom URL scheme, or add an intent filter with your custom scheme for Android
if the event fires but you receive an error, check the logs in your Auth0 Dashboard for the error code
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
vérifiez que le schéma d’URL personnalisé est enregistré pour la plateforme choisie. Sur iOS, définissez un schéma d’URL personnalisé ou ajoutez un filtre d’intention avec votre schéma personnalisé sur Android
si l’événement se déclenche mais que vous recevez une erreur, vérifiez les journaux dans votre Auth0 Dashboard pour y trouver le code d’erreur
## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="logout-button.ts" }}}
-Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent se rediriger vers le terminal de connexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor devrait effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience sous-optimale.
Pour y parvenir avec Ionic et Capacitor en conjonction avec la trousse SDK Auth0 :
Construire l’URL vers laquelle votre application Auth0 devrait rediriger après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-la à votre configuration de Allowed Logout URLs (URL de déconnexions permises) dans le Auth0 Dashboard
Déconnectez-vous de la trousse SDK en appelant logout
et passez votre URL de redirection comme paramètre logoutParams.returnTo
.
Définir le paramètre openUrl
sur un rappel qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide de Browser.open
.
De la même manière que pour l’étape de connexion, si vous ne définissez pas openUrl
lors de l'appel de logout
, le SDK redirige l’utilisateur vers l’URL de déconnexion à l’aide de l’application de navigateur par défaut sur l’appareil, ce qui offre une expérience utilisateur sous-optimale.
Ionic & Capacitor (Angular) - Étape 7 - Ajouter la déconnexion à votre application Fournissez un moyen pour vos utilisateurs de se déconnecter de votre application. Vérifiez la redirection vers Auth0, puis vers l’adresse que vous avez spécifiée dans le paramètre returnTo
. Assurez-vous que les utilisateurs ne sont plus connectés à votre application.
+Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent être redirigés vers le point de terminaison de déconnexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor doit effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience frustrante.
Pour y parvenir avec Ionic et Capacitor en conjonction avec le SDK Auth0 :
Créez l’URL de votre application vers laquelle Auth0 doit rediriger après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-la à votre configuration URL de déconnexions autorisées dans Auth0 Dashboard
Déconnectez-vous de la trousse SDK en appelant logout
et transmettez votre URL de redirection comme paramètre logoutParams.returnTo
.
Définissez le paramètre openUrl
sur un callback qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide de Browser.open
.
De la même manière que pour l’étape de connexion, si vous ne définissez pas openUrl
lors de l’appel de logout
, le SDK redirige l’utilisateur vers l’URL de déconnexion à l’aide de l’application de navigateur par défaut sur l’appareil, ce qui offre une expérience utilisateur sous-optimale.
Ionic & Capacitor (Angular) - Étape 7 - Ajouter la déconnexion à votre application Fournir un moyen pour vos utilisateurs de se déconnecter de votre application. Vérifiez la redirection vers Auth0, puis vers l’adresse que vous avez spécifiée dans le paramètre returnTo
. Assurez-vous que les utilisateurs ne sont plus connectés à votre application.
- Sorry about that. Here's a couple things to double check:
check that the URL you provided to in the returnTo
parameter is registered as an allowed callback URL in your Auth0 Dashboard
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
vérifiez que l’URL que vous avez fournie dans le paramètre returnTo
est enregistrée comme URL de rappel autorisée dans votre Tableau de bord Auth0
## Afficher le profil utilisateur {{{ data-action="code" data-code="user-profile.ts" }}}
-La trousse SDK Auth0 récupère les informations de profil associées aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont disponibles via la propriété user$
exposée par AuthService
.
Ionic & Capacitor (Angular) - Étape 8 - Afficher le profil utilisateur Fournir un moyen pour que vos utilisateurs puissent voir leurs détails de profil utilisateur dans l’application et vérifier que vous êtes en mesure de récupérer et de voir les informations de votre profil à l’écran une fois que vous avez ouvert une session.
+La trousse SDK Auth0 récupère les informations de profil associées aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont disponibles via la propriété user$
exposée par AuthService
.
Ionic & Capacitor (Angular) - Étape 8 - Afficher le profil utilisateur Fournir un moyen pour que vos utilisateurs puissent voir leurs détails de profil utilisateur dans l’application et vérifiez que vous êtes en mesure de récupérer et d’afficher les informations de votre profil à l’écran une fois que vous avez ouvert une session.
- Sorry about that. Here's a couple things to double check:
check that you are only reading the user's profile when isLoading
is false
check that user
resolves to an object and is not undefined
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
assurez-vous de lire uniquement le profil utilisateur lorsque isLoading
est false
assurez-vous que user
résout un objet et n’est pas undefined
diff --git a/fr-ca/articles/quickstart/native/ionic-react/interactive.md b/fr-ca/articles/quickstart/native/ionic-react/interactive.md
index 00c135a062..721bfb3921 100644
--- a/fr-ca/articles/quickstart/native/ionic-react/interactive.md
+++ b/fr-ca/articles/quickstart/native/ionic-react/interactive.md
@@ -1,6 +1,6 @@
---
-title: Ajouter la connexion à votre application Ionic React avec l'application Capacitor
-description: Ce guide montre comment intégrer Auth0 avec une application Ionic (React) & Capacitor en utilisant la trousse SDK React Auth0.
+title: Ajouter la connexion à votre application Ionic React avec l’application Capacitor
+description: Ce guide explique comment intégrer Auth0 avec une application Ionic (React) & Capacitor en utilisant la trousse SDK React Auth0.
interactive: true
files:
- files/index
@@ -9,67 +9,67 @@ files:
- files/app
- files/user-profile
github:
- path: https://github.com/auth0-samples/auth0-ionic-samples/tree/main/react
+ path: react
locale: fr-CA
---
-# Ajouter la connexion à votre application Ionic React avec l'application Capacitor
+# Ajouter la connexion à votre application Ionic React avec l’application Capacitor
-Auth0 vous permet d’ajouter rapidement l’authentification et de pouvoir accéder aux informations relatives au profil de l’utilisateur dans votre application. Ce guide montre comment intégrer Auth0 avec une application Ionic (React) & Capacitor en utilisant la trousse SDK React Auth0.
+Auth0 vous permet d’ajouter rapidement l’authentification et de pouvoir accéder aux informations relatives au profil utilisateur dans votre application. Ce guide explique comment intégrer Auth0 avec une application Ionic (React) & Capacitor en utilisant la trousse SDK Auth0 React.
## Démarrage
-Ce démarrage rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez le Using Capacitor with Ionic Framework guide (Utilisez Capacitor avec Ionic Framework) pour commencer avec une application simple ou clonez nos exemples d’applications.
Vous devez également connaître le flux de travail de développement Capacitor.
+Ce guide de démarrage rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez Using Capacitor with Ionic Framework guide (Utiliser Capacitor avec le cadre d’applications Ionic) pour commencer avec une application simple ou clonez nos our sample apps (exemples d’applications).
Vous devez également être familiarisé avec Capacitor development workflow (le flux de production de développement Capacitor).
-## Configuration d'Auth0
+## Configuration d’Auth0
-Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.
Tout au long de cet article, YOUR_PACKAGE_ID
est l’identifiant du package de votre application. Ceci peut être trouvé et configuré dans le champ appId
de votre fichier capacitor.config.ts
. Voir Capacitor's Config schema (Schéma de configuration du Capacitor) pour plus d'informations.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, un identifiant client unique alphanumérique est attribué à chaque application que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, vous pouvez plutôt consulter une application faisant office d’exemple.
Configuration des URL de rappel
Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après qu’ils se sont authentifiés. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur :
YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback
.
Configurer les URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après qu’ils se sont déconnectés. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre projet à titre d'exemple, définissez ceci sur :
YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback
.
Configurer les origines autorisées
Pour pouvoir faire des requêtes à partir de votre application native vers Auth0, définissez les origines autorisées suivantes dans vos paramètres d’application.
Si vous suivez notre projet faisant office d’exemple, définissez ceci sur capacitor://localhost, http://localhost
pour iOS et Android respectivement.
Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les paramètres de l’application.
+Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.
Tout au long de cet article, YOUR_PACKAGE_ID
est l’identifiant du package de votre application. Ceci peut être trouvé et configuré dans le champ appId
de votre fichier capacitor.config.ts
. Voir Capacitor’s Config schema (Schéma de configuration du Capacitor) pour plus d’informations.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.
Configuration des URL de rappel
Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur :
YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback
.
Configuration des URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur :
YOUR_PACKAGE_ID://{yourTenant}.auth0.com/capacitor/YOUR_PACKAGE_ID/callback
.
Configurer les origines autorisées
Pour pouvoir faire des requêtes à partir de votre application d’origine vers Auth0, définissez les origines autorisées dans vos Application Settings (Paramètres d’application).
Si vous suivez notre projet faisant office d’exemple, définissez ceci sur capacitor://localhost, http://localhost
pour iOS et Android respectivement.
Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les Application Settings (Paramètres d’application).
## Installer la trousse SDK React Auth0
-Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK React Auth0 :
npm install @auth0/auth0-react
La trousse SDK expose des méthodes et variables qui vous aident à intégrer Auth0 avec votre application React en utilisant les React Hooks (Appels React) ou les Higher-Order Components (Composants d’ordre supérieur).
Installer les plugiciels Capacitor
Ce démarrage rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :
npm install @capacitor/browser @capacitor/app
@capacitor/browser
: Vous permet d’interagir avec le navigateur de système de l'appareil et est utilisé pour ouvrir l’URL vers le terminal d’autorisation de Auth0.
@capacitor/app
: Vous permet de souscrire à des événements d’application de haut niveau, utiles pour la gestion des rappels depuis Auth0.
Le plugiciel de navigateur de Capacitor sur iOS utilise SFSafariViewController
, qui sur iOS 11+ ne partage pas les témoins avec Safari sur l’appareil. Cela signifie que SSO ne fonctionnera pas sur ces appareils. Si vous avez besoin de SSO, veuillez utiliser un plugiciel compatible qui utilise ASWebAuthenticationSession.
+Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK React Auth0 :
npm install @auth0/auth0-react
La trousse SDK expose des méthodes et variables qui vous aident à intégrer Auth0 avec votre application React en utilisant les Crochets React ou les Composants d’ordre supérieur.
Installer les plugiciels Capacitor
Ce guide rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :
npm install @capacitor/browser @capacitor/app
@capacitor/browser
: Vous permet d’interagir avec le navigateur de système de l’appareil, et est utilisé pour ouvrir l’URL vers le point de terminaison d’autorisation d’Auth0.
@capacitor/app
: Vous permet de vous abonner à des événements d’application de haut niveau, utiles pour la gestion des Callbacks depuis Auth0.
Le plugiciel de navigateur de Capacitor sur iOS utilise SFSafariViewController
, qui sur iOS 11+ ne partage pas les témoins avec Safari sur l’appareil. Cela signifie que SSO ne fonctionnera pas sur ces appareils. Si vous avez besoin de SSO, veuillez utiliser un plugiciel compatible qui utilise ASWebAuthenticationSession.
## Configurer le composant Auth0Provider {{{ data-action="code" data-code="index.tsx" }}}
-Au cours de son fonctionnement, la trousse SDK React Auth0 utilise React Context pour gérer l’état d’authentification de vos utilisateurs. Une façon d’intégrer Auth0 avec votre application React est d’envelopper votre composant racine avec un Auth0Provider
que vous pouvez importer à partir de la trousse SDK.
Le composant Auth0Provider
prend les props suivants :
domain
: La valeur du domain
présente dans les paramètresde l’application que vous avez créée dans votre Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité Domaines personnalisés d’Auth0.
clientId
: La valeur de l’identifiant du client présente dans les paramètres de l’application que vous avez créée dans votre Auth0 Dashboard.
useRefreshTokens
: Pour utiliser auth0-react avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d'actualisation.
useRefreshTokensFallback
: Pour utiliser auth0-react avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.
authorizationParams.redirect_uri
: L’URL vers laquelle vous souhaitez rediriger vos utilisateurs après qu’ils se soient authentifiés avec Auth0.
Pour conserver l’authentification après la fermeture et la réouverture de l’application, vous pouvez définir cacheLocation
sur localstorage
lors de la configuration du SDK, mais soyez conscient des risques liés au stockage de jetons dans localstorage. De plus, localstorage devrait être traité comme transitoire dans l’application Capacitor car les données pourraient être récupérées de façon inattendue dans certaines circonstances. Veuillez lire les directives sur le stockage dans la documentation Capacitor.
En outre, le SDK a la capacité d’utiliser une implémentation de cache personnalisée pour stocker des jetons, si vous avez une exigence d’utiliser un mécanisme de stockage plus sûr et persistant.
Notez que nous recommandons de ne pas utiliser le plugiciel Capacitor pour stocker les jetons, car cela est soutenu par UserDefaults et SharedPreferences sur iOS et Android respectivement. Les données stockées à l’aide de ces API ne sont pas cryptées, non sécurisées et peuvent également être synchronisées dans le nuage.
Ionic & Capacitor (React) - Étape 2 - Configurer le composant Auth0Provider Ajoutez la composante Auth0Provider
d’une manière qui enveloppe votre composante App
, puis exécutez votre application pour vérifier que le SDK est initialisé correctement et que votre application ne lance pas d’erreurs liées à Auth0.
+Au cours de son fonctionnement, la trousse SDK React Auth0 utilise React Context pour gérer l’état d’authentification de vos utilisateurs. Une façon d’intégrer Auth0 avec votre application React est d’envelopper votre composant racine avec un Auth0Provider
que vous pouvez importer à partir de la trousse SDK.
Le composant Auth0Provider
prend les props suivants :
domain
: La valeur du domain
présente dans les paramètres de l’application que vous avez créée dans votre Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité Domaines personnalisés d’Auth0.
clientId
: La valeur de l’identifiant du client présente dans les paramètres de l’application que vous avez créée dans votre Auth0 Dashboard.
useRefreshTokens
: Pour utiliser auth0-react avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d’actualisation.
useRefreshTokensFallback
: Pour utiliser auth0-react avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.
authorizationParams.redirect_uri
: L’URL vers laquelle vous souhaitez rediriger vos utilisateurs après qu’ils se soient authentifiés avec Auth0.
Pour conserver l’authentification après la fermeture et la réouverture de l’application, vous pouvez définir cacheLocation
sur localstorage
lors de la configuration du SDK, mais soyez conscient des risques liés au stockage de jetons dans localstorage. De plus, localstorage devrait être traité comme transitoire dans l’application Capacitor car les données pourraient être récupérées de façon inattendue dans certaines circonstances. Veuillez lire les directives sur le stockage dans la documentation Capacitor.
En outre, le SDK a la capacité d’utiliser une implémentation de cache personnalisée pour stocker des jetons, si vous avez une exigence d’utiliser un mécanisme de stockage plus sûr et persistant.
Notez que nous recommandons de ne pas utiliser le plugiciel Capacitor pour stocker les jetons, car cela est soutenu par UserDefaults et SharedPreferences sur iOS et Android respectivement. Les données stockées à l’aide de ces API ne sont pas cryptées, non sécurisées et peuvent également être synchronisées dans le nuage.
Ionic & Capacitor (React) - Étape 4 - Configurer le composant Auth0Provider Ajoutez le composant Auth0Provider
d’une manière qui enveloppe votre composant App
, puis exécutez votre application pour vérifier que le SDK est initialisé correctement et que votre application ne lance pas d’erreurs liées à Auth0.
- Sorry about that. Here's a couple things to double check:
ensure the correct application is selected
did you save after entering your URLs?
make sure the domain and Client ID imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
assurez-vous que la bonne application est sélectionnée
avez-vous procédé à un enregistrement après avoir saisi vos URL?
assurez-vous que le domaine et l’identifiant client ont été importés correctement
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="login-button.tsx" }}}
-Dans une application Capacitor, le plugiciel de navigateur Capacitor effectue une redirection vers la page de connexion universelleAuth0. Définissez le paramètre openUrl
sur la fonction loginWithRedirect
pour utiliser Browser.open
de sorte que l’URL soit ouverte à l’aide du composant navigateur du système de l’appareil (SFSafariViewController sur iOS et Chrome Custom Tabs sur Android).
Par défaut, la méthode loginWithRedirect
de la trousse SDK utilise window.location.href
pour accéder à la page de connexion dans l’application de navigateur par défaut sur l'appareil de l’utilisateur plutôt que dans le composant de navigateur système approprié pour la plate-forme. L’utilisateur quitterait votre application pour s’authentifier et pourrait rendre l’expérience utilisateur sous-optimale.
Ionic & Capacitor (React) - Étape 5 - Ajouter une connexion à votre application La fonction loginWithRedirect
indique à la trousse SDK d’initier le flux de connexion, en utilisant la fonction Browser.open
pour ouvrir l’URL de connexion avec le composant navigateur du système de la plate-forme en définissant le paramètre openUrl
. Cela permet à votre utilisateur de se connecter à votre application. Les utilisateurs sont redirigés vers la page de connexion à Auth0 et ne reçoivent aucune erreur.
+Dans une application Capacitor, le plugiciel Capacitor’s Browser effectue une redirection vers la Universal Login Page (page de connexion universelle) d’Auth0 Auth0. Définissez le paramètre openUrl
sur la fonction loginWithRedirect
pour utiliser Browser.open
afin que l’URL soit ouverte à l’aide du composant de navigateur système de l’appareil (SFSafariViewController sur iOS et Chrome Custom Tabs [Onglets personnalisés Chrome] sur Android).
Par défaut, la méthode loginWithRedirect
de la trousse SDK utilise window.location.href
pour accéder à la page de connexion dans l’application de navigateur par défaut sur l’appareil de l’utilisateur plutôt que dans le composant de navigateur système approprié pour la plate-forme. L’utilisateur quitterait votre application pour s’authentifier et pourrait rendre l’expérience utilisateur sous-optimale.
Ionic & Capacitor (React) - Étape 5 - Ajouter une connexion à votre application La fonction loginWithRedirect
indique à la trousse SDK d’initier le flux de connexion, en utilisant la fonction Browser.open
pour ouvrir l’URL de connexion avec le composant navigateur du système de la plateforme en définissant le paramètre openUrl
. Cela permet à votre utilisateur de se connecter à votre application. Les utilisateurs sont redirigés vers la page de connexion à Auth0 et ne reçoivent aucune erreur.
- Sorry about that. Here's a couple things to double check:
ensure that there are no errors in the browser's console window at the point of login
ensure the domain and Client ID are correct according to your Auth0 application in the dashboard
if you are redirected to Auth0 and receive an error page, check the "technical details" section at the bottom for the reason for the failure
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
assurez-vous qu’il n’y a pas d’erreurs dans la fenêtre de la console du navigateur au point de connexion
assurez-vous que le domaine et l’identifiant client sont corrects selon votre application Auth0 dans le tableau de bord
si vous êtes redirigé vers Auth0 et recevez une page d’erreur, consultez la section « détails techniques » en bas pour connaître la raison de l’échec
## Gérer le rappel de connexion {{{ data-action="code" data-code="app.tsx" }}}
-Une fois que les utilisateurs se connectent avec la page de connexion universelle, ils se redirigent vers votre application via une URL avec un schéma d’URL personnalisé. L’événement appUrlOpen
doit être géré dans votre application. Vous pouvez appeler la méthode handleRedirectCallback
à partir de la trousse SDK Auth0 pour initialiser l’état d’authentification.
Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Pour vérifier le succès, vérifiez la présence des paramètres code
et state
dans l’URL.
La méthode Browser.close()
devrait fermer le navigateur lorsque cet événement est déclenché.
Cet article suppose que vous utiliserez des schémas d’URL personnalisés pour gérer le rappel dans votre application. Pour ce faire, enregistrez votre YOUR_PACKAGE_ID
comme schéma d’URL pour la plateforme de votre choix. Pour en savoir plus, lire Defining a Custom URL Scheme (Définition d’un schéma d’URL personnalisé) pour iOS ou Create Deep Links to App Content (Création de liens profonds vers le contenu des applications) pour Android.
Ionic & Capacitor (React) - Étape 6 - Gérer le rappel de connexion Ajoutez l’appUrlOpen
au composant App
de votre application et connectez-vous. La fenêtre du navigateur devrait se fermer une fois que l’utilisateur s’authentifie et se connecte à votre application.
+Une fois que les utilisateurs sont connectés avec la page de connexion universelle, ils sont redirigés vers votre application au moyen d’une URL avec un schéma d’URL personnalisé. L’événement appUrlOpen
doit être traité au sein de votre application. Vous pouvez appeler la méthode handleRedirectCallback
à partir de la trousse SDK Auth0 pour initialiser l’état d’authentification.
Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Vérifiez que les paramètres code
et state
sont présents dans l’URL.
La méthode Browser.close()
devrait fermer le navigateur lorsque cet événement est déclenché.
Cet article suppose que vous utiliserez des schémas d’URL personnalisés pour gérer le rappel dans votre application. Pour ce faire, enregistrez votre YOUR_PACKAGE_ID
comme schéma d’URL pour la plateforme de votre choix. Pour en savoir plus, lire Defining a Custom URL Scheme (Définition d’un schéma d’URL personnalisé) pour iOS ou Create Deep Links to App Content (Création de liens profonds vers le contenu des applications) pour Android.
Ionic & Capacitor (React) - Étape 6 - Gérer le rappel de connexion Ajoutez appUrlOpen
au composant App
de votre application et connectez-vous. La fenêtre du navigateur devrait se fermer une fois que l’utilisateur s’authentifie et se connecte à votre application.
- Sorry about that. Here's a couple things to double check:
check that the custom URL scheme is registered for your chosen platform. On iOS, define a custom URL scheme, or add an intent filter with your custom scheme on Android
if the event fires but you receive an error, check the logs in your Auth0 Dashboard for the reason for the error
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
vérifiez que le schéma d’URL personnalisé est enregistré pour la plateforme choisie. Sur iOS, définissez un schéma d’URL personnalisé ou ajoutez un filtre d’intention avec votre schéma personnalisé sur Android
si l’événement se déclenche mais que vous recevez une erreur, consultez les journaux dans votre Auth0 Dashboard pour comprendre les causes de l’erreur
## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="logout-button.tsx" }}}
-Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent se rediriger vers le terminal de connexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor devrait effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience sous-optimale.
Pour y parvenir avec Ionic et Capacitor en conjonction avec le SDK Auth0 :
Construire l’URL de votre application Auth0 devrait utiliser pour rediriger vers après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-le à votre configuration d’URLs de déconnexions permises dans le Auth0 Dashboard
Déconnectez-vous du SDK en appelant logout
et passez votre URL de redirection comme paramètre logoutParams.returnTo
.
Définir le paramètre openUrl
sur un rappel qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide de Browser.open
.
De la même manière que pour l’étape de connexion, si vous ne définissez pas openUrl
lors de l'appel de logout
, le SDK redirige l’utilisateur vers l’URL de déconnexion à l’aide de l’application de navigateur par défaut sur l’appareil, ce qui offre une expérience utilisateur sous-optimale.
Ionic & Capacitor (React) - Étape 7 - Ajouter une déconnexion à votre application Permettre à vos utilisateurs de se déconnecter de votre application. Vérifiez que vous redirigez vers Auth0, puis vers l’adresse spécifiée dans le paramètre returnTo
. Vérifiez que vous n’êtes plus connecté à votre application.
+Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent être redirigés vers le point de terminaison de déconnexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor doit effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience frustrante.
Pour y parvenir avec Ionic et Capacitor en conjonction avec le SDK Auth0 :
Créez l’URL de votre application vers laquelle Auth0 doit rediriger après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-la à votre configuration URL de déconnexions autorisées dans Auth0 Dashboard
Déconnectez-vous de la trousse SDK en appelant logout
et transmettez votre URL de redirection comme paramètre logoutParams.returnTo
.
Définissez le paramètre openUrl
sur un callback qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide de Browser.open
.
De la même manière que pour l’étape de connexion, si vous ne définissez pas openUrl
lors de l’appel de logout
, le SDK redirige l’utilisateur vers l’URL de déconnexion à l’aide de l’application de navigateur par défaut sur l’appareil, ce qui offre une expérience utilisateur sous-optimale.
Ionic & Capacitor (React) - Étape 7 - Ajouter une déconnexion à votre application Fournir un moyen pour vos utilisateurs de se déconnecter de votre application. Vérifiez que vous redirigez vers Auth0, puis vers l’adresse spécifiée dans le paramètre returnTo
. Vérifiez que vous n’êtes plus connecté à votre application.
@@ -80,10 +80,10 @@ locale: fr-CA
## Afficher le profil utilisateur {{{ data-action="code" data-code="user-profile.tsx" }}}
-La trousse SDK React Auth0 récupère le profil utilisateur associé aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont disponibles via la propriété user
exposée par l'appel useAuth0()
.
L’initialisation de la trousse SDK est asynchrone, et vous devez protéger le profil utilisateur en vérifiant les propriétés isLoading
et user
. Une fois que isLoading
est false
et que le user
a une valeur, le profil d’utilisateur peut être utilisé.
Ionic & Capacitor (React) - Étape 8 - Afficher le profil utilisateur Permettre à vos utilisateurs de voir leurs détails de leur profil utilisateur dans l’application et vérifier que vous êtes en mesure de récupérer et de voir les informations de votre profil à l’écran une fois que vous avez ouvert une session.
+La trousse SDK React Auth0 récupère le user’s profile (profil utilisateur) associé aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont accessibles via la propriété user
exposée par l’appel useAuth0()
.
L’initialisation de la trousse SDK est asynchrone, et vous devez protéger le profil utilisateur en activant les propriétés isLoading
et user
. Une fois que isLoading
est false
et que user
a une valeur, le profil utilisateur peut être utilisé.
Ionic & Capacitor (React) - Étape 8 - Afficher le profil utilisateur Fournir un moyen pour que vos utilisateurs puissent voir leurs détails de profil utilisateur dans l’application et vérifiez que vous êtes en mesure de récupérer et d’afficher les informations de votre profil à l’écran une fois que vous avez ouvert une session.
- Sorry about that. Here's a couple things to double check:
check that you are only reading the user's profile when isLoading
is false
check that user
resolves to an object and is not undefined
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
vérifiez que vous lisez uniquement le profil utilisateur lorsque isLoading
est false
vérifiez que user
résout un objet et n’est pas undefined
.
diff --git a/fr-ca/articles/quickstart/native/ionic-vue/interactive.md b/fr-ca/articles/quickstart/native/ionic-vue/interactive.md
index a1d872a455..2202e5d0b6 100644
--- a/fr-ca/articles/quickstart/native/ionic-vue/interactive.md
+++ b/fr-ca/articles/quickstart/native/ionic-vue/interactive.md
@@ -9,78 +9,78 @@ files:
- files/App
- files/UserProfile
github:
- path: https://github.com/auth0-samples/auth0-ionic-samples/tree/main/vue
+ path: vue
locale: fr-CA
---
# Ajouter la connexion à votre application Ionic Vue avec l’application Capacitor
-Auth0 vous permet d’ajouter rapidement l’authentification et de pouvoir accéder aux informations relatives au profil utilisateur dans votre application. Ce guide montre comment intégrer Auth0 avec une application Ionic (Vue) et Capacitor en utilisant la trousse SDK Vue Auth0.
+Auth0 vous permet d’ajouter rapidement l’authentification et de pouvoir accéder aux informations relatives au profil utilisateur dans votre application. Ce guide montre comment intégrer Auth0 avec une application Ionic (Vue) et Capacitor en utilisant la trousse SDK Vue Auth0.
-## Premiers pas
+## Démarrage
-Ce guide rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez le guide Using Capacitor with Ionic Framework guideguide (Utiliser Capacitor avec Ionic Framework) pour commencer avec une application simple ou clonez nos exemples d’applications.
Vous devez également connaître le Flux de travail de développement Capacitor.
+Ce guide de démarrage rapide suppose que vous avez déjà une application Ionic en cours d’exécution avec Capacitor. Si ce n’est pas le cas, consultez Utiliser Capacitor avec Ionic Framework pour commencer avec une application simple ou clonez nos our sample apps (exemples d’applications).
Vous devez également être familiarisé avec Capacitor development workflow (le flux de production de développement Capacitor).
-## Configurer Auth0
+## Configuration d’Auth0
-Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. Vous allez configurer l’authentification pour votre projet dans l’application Auth0.
Tout au long de cet article, YOUR_PACKAGE_ID
est l’identificateur du package de votre application. Il peut être trouvé et configuré dans le champ appId
de votre fichier capacitor.config.ts
. Voir Schéma de configuration de Capacitor pour plus d’informations.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.
Configuration des Callback URL
Une Callback URL est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
Configurer les URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
.
Configurer les origines autorisées
Pour pouvoir faire des requêtes à partir de votre application native vers Auth0, définissez les origines autorisées suivantes dans vos Application Settings (Paramètres d’application).
Si vous suivez notre projet à titre d’exemple, définissez ceci sur capacitor://localhost, http://localhost
pour iOS et Android respectivement.
Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les paramètres d’application.
+Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.
Tout au long de cet article, YOUR_PACKAGE_ID
est l’identificateur du package de votre application. Il peut être trouvé et configuré dans le champ appId
de votre fichier capacitor.config.ts
. Voir Schéma de configuration de Capacitor pour plus d’informations.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.
Configurer les URL de rappel
Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
Configuration des URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre projet à titre d’exemple, définissez ceci sur YOUR_PACKAGE_ID://{yourDomain}/capacitor/YOUR_PACKAGE_ID/callback
.
Configurer les origines autorisées
Pour pouvoir faire des requêtes à partir de votre application d’origine vers Auth0, définissez les origines autorisées dans vos Application Settings (Paramètres d’application).
Si vous suivez notre projet à titre d’exemple, définissez ceci sur capacitor://localhost, http://localhost
pour iOS et Android respectivement.
Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les Application Settings (Paramètres d’application).
## Installer la trousse SDK Vue Auth0
-Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Vue Auth0 :
npm install @auth0/auth0-vue
La trousse SDK expose plusieurs types qui vous aident à intégrer Auth0 avec votre application Vue, y compris un module et un service d’authentification.
Installer les plugiciels Capacitor
Ce guide rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :
npm install @capacitor/browser @capacitor/app
@capacitor/browser
: vous permet d’interagir avec le navigateur de système de l’appareil et est utilisé pour ouvrir l’URL vers le point de terminaison d’autorisation de Auth0
@capacitor/app
: vous permet de souscrire à des événements d’application de haut niveau, utiles pour la gestion des callbacks depuis Auth0
Le plugiciel de navigateur de Capacitor sur iOS utilise SFSafariViewController
, qui sur iOS 11+ ne partage pas les témoins avec Safari sur l’appareil. Cela signifie que SSO ne fonctionnera pas sur ces appareils. Si vous avez besoin de SSO, veuillez utiliser un plugiciel compatible qui utilise ASWebAuthenticationSession.
+Exécutez la commande suivante dans le répertoire de votre projet pour installer la trousse SDK Vue Auth0 :
npm install @auth0/auth0-vue
La trousse SDK expose plusieurs types qui vous aident à intégrer Auth0 avec votre application Vue, y compris un module et un service d’authentification.
Installer les plugiciels Capacitor
Ce guide rapide et cet exemple utilisent certains des plugiciels officiels Capacitor. Installez-les dans votre application à l’aide de la commande suivante :
npm install @capacitor/browser @capacitor/app
@capacitor/browser
: vous permet d’interagir avec le navigateur de système de l’appareil et est utilisé pour ouvrir l’URL vers le point de terminaison d’autorisation de Auth0
@capacitor/app
: vous permet de souscrire à des événements d’application de haut niveau, utiles pour la gestion des Callbacks depuis Auth0
Le plugiciel de navigateur de Capacitor sur iOS utilise SFSafariViewController
, qui sur iOS 11+ ne partage pas les témoins avec Safari sur l’appareil. Cela signifie que SSO ne fonctionnera pas sur ces appareils. Si vous avez besoin de SSO, veuillez utiliser un plugiciel compatible qui utilise ASWebAuthenticationSession.
## Configurer le plugiciel CreateAuht0 {{{ data-action="code" data-code="main.ts" }}}
-La trousse SDK exporte createAuth0
, un composable qui contient tous les services nécessaires au fonctionnement du SDK. Ce composable doit être enregistré avec votre application et être configuré avec votre domaine Auth0 et votre ID client.
Le composable createAuth0
prend la configuration suivante :
domain
: la valeur domain
présente dans les Settings (Paramètres) de l’application que vous avez créée dans le Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité de domaines personnalisés d'Auth0.
clientId
: la valeur de l’identificateur client présente dans les Settings (Paramètres) de l’application que vous avez créée dans l'Auth0 Dashboard.
useRefreshTokens
: pour utiliser auth0-vue avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d’actualisation.
useRefreshTokensFallback
: pour utiliser auth0-vue avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.
authorizationParams.redirect_uri
: URL pour rediriger vos utilisateurs après qu’ils se sont authentifiés avec Auth0.
Pour conserver l’authentification après la fermeture et la réouverture de l’application, vous pouvez définir cacheLocation
sur localstorage
lors de la configuration de la trousse SDK, mais soyez conscient des risques liés au stockage de jetons dans localstorage. De plus, localstorage devrait être traité comme transitoire dans l’application Capacitor car les données pourraient être récupérées de façon inattendue dans certaines circonstances. Veuillez lire les directives sur le stockage dans la documentation Capacitor.
En outre, la trousse SDK a la capacité d’utiliser une implémentation de cache personnalisée pour stocker des jetons, si vous avez une exigence d’utiliser un mécanisme de stockage plus sûr et persistant.
Notez que nous recommandons de ne pas utiliser le plugiciel Capacitor pour stocker les jetons, car cela est soutenu par UserDefaults et SharedPreferences sur iOS et Android respectivement. Les données stockées à l’aide de ces API ne sont pas chiffrées, non sécurisées et peuvent également être synchronisées dans le nuage.
Guide rapide Ionic - Étape 4 - Point de contrôle Maintenant que vous avez configuré votre application avec la trousse SDK Vue Auth0, exécutez votre application pour vérifier que la trousse SDK est initialisée sans erreur et que votre application s’exécute comme auparavant.
+La trousse SDK exporte createAuth0
, un composable qui contient tous les services nécessaires au fonctionnement du SDK. Ce composable doit être enregistré avec votre application et être configuré avec votre domaine Auth0 et votre ID client.
Le composable createAuth0
prend la configuration suivante :
domain
: La valeur domain
présente dans les Settings (Paramètres) de l’application que vous avez créée dans le Auth0 Dashboard, ou votre domaine personnalisé si vous utilisez la fonctionnalité de domaines personnalisés d’Auth0.
clientId
: La valeur de l’identificateur client présente dans les Settings (Paramètres) de l’application que vous avez créée dans l’Auth0 Dashboard.
useRefreshTokens
: Pour utiliser auth0-vue avec Ionic sur Android et iOS, il est nécessaire d’activer les jetons d’actualisation.
useRefreshTokensFallback
: Pour utiliser auth0-vue avec Ionic sur Android et iOS, il est nécessaire de désactiver le iframe de substitution.
authorizationParams.redirect_uri
: URL pour rediriger vos utilisateurs après qu’ils se sont authentifiés avec Auth0.
Pour conserver l’authentification après la fermeture et la réouverture de l’application, vous pouvez définir cacheLocation
sur localstorage
lors de la configuration de la trousse SDK, mais soyez conscient des risques liés au stockage de jetons dans localstorage. De plus, localstorage devrait être traité comme transitoire dans l’application Capacitor car les données pourraient être récupérées de façon inattendue dans certaines circonstances. Veuillez lire les directives sur le stockage dans la documentation Capacitor.
En outre, la trousse SDK a la capacité d’utiliser une implémentation de cache personnalisée pour stocker des jetons, si vous avez une exigence d’utiliser un mécanisme de stockage plus sûr et persistant.
Notez que nous recommandons de ne pas utiliser le plugiciel Capacitor pour stocker les jetons, car cela est soutenu par UserDefaults et SharedPreferences sur iOS et Android respectivement. Les données stockées à l’aide de ces API ne sont pas chiffrées, non sécurisées et peuvent également être synchronisées dans le nuage.
Démarrage rapide Ionic - Étape 4 - Point de contrôle Maintenant que vous avez configuré votre application avec la trousse SDK Vue Auth0, exécutez votre application pour vérifier que la trousse SDK est initialisée sans erreur et que votre application s’exécute comme auparavant.
- Sorry about that. Here's a couple things to double check:
ensure the correct application is selected
did you save after entering your URLs?
make sure the domain and Client ID imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
assurez-vous que la bonne application est sélectionnée
avez-vous procédé à un enregistrement après avoir saisi vos URL?
assurez-vous que le domaine et l’identifiant client ont été importés correctement
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="LoginButton.vue" }}}
-Dans une application Capacitor, le plugiciel de navigateur Capacitor effectue une redirection vers la page de connexion universelleAuth0. Définissez le paramètre openUrl
sur la fonction loginWithRedirect
pour utiliser Browser.open
de sorte que l’URL soit ouverte à l’aide du composant navigateur du système de l’appareil (SFSafariViewController sur iOS et Chrome Custom Tabs sur Android).
Par défaut, la méthode loginWithRedirect
de la trousse SDK utilise window.location.href
pour accéder à la page de connexion dans l’application de navigateur par défaut sur l’appareil de l’utilisateur plutôt que dans le composant de navigateur système approprié pour la plateforme. L’utilisateur quitterait votre application pour s’authentifier et pourrait rendre l’expérience utilisateur frustrante.
Ionic - Étape 5 - Point de contrôle La fonction loginWithRedirect
indique à la trousse SDK d’initier le flux de connexion, en utilisant la fonction Browser.open
pour ouvrir l’URL de connexion avec le composant navigateur du système de la plateforme en définissant le paramètre openUrl
. Cela permet à votre utilisateur de se connecter à votre application. Les utilisateurs sont redirigés vers la page de connexion à Auth0 et ne reçoivent aucune erreur.
+Dans une application Capacitor, le plugicielCapacitor’s Browser effectue une redirection vers la Universal Login Page (page de connexion universelle) Auth0. Définissez le paramètre openUrl
sur la fonction loginWithRedirect
pour utiliser Browser.open
afin que l’URL soit ouverte à l’aide du composant de navigateur système de l’appareil (SFSafariViewController sur iOS et Chrome Custom Tabs [Onglets personnalisés Chrome] sur Android).
Par défaut, la méthode loginWithRedirect
de la trousse SDK utilise window.location.href
pour accéder à la page de connexion dans l’application de navigateur par défaut sur l’appareil de l’utilisateur plutôt que dans le composant de navigateur système approprié pour la plateforme. L’utilisateur quitterait votre application pour s’authentifier et pourrait rendre l’expérience utilisateur frustrante.
Ionic – Étape 5 – Point de contrôle La fonction loginWithRedirect
indique à la trousse SDK d’initier le flux de connexion, en utilisant la fonction Browser.open
pour ouvrir l’URL de connexion avec le composant navigateur du système de la plateforme en définissant le paramètre openUrl
. Cela permet à votre utilisateur de se connecter à votre application. Les utilisateurs sont redirigés vers la page de connexion à Auth0 et ne reçoivent aucune erreur.
- Sorry about that. Here's a couple things to double check:
ensure that there are no errors in the browser's console window at the point of login
ensure the domain and Client ID are correct according to your Auth0 application in the dashboard
if you are redirected to Auth0 and receive an error page, check the "technical details" section at the bottom for the reason for the failure
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
assurez-vous qu’il n’y a pas d’erreurs dans la fenêtre de la console du navigateur au point de connexion
assurez-vous que le domaine et l’identifiant client sont corrects selon votre application Auth0 dans le tableau de bord
si vous êtes redirigé vers Auth0 et recevez une page d’erreur, vérifiez la section des « détails techniques » en bas de la page pour connaître la raison de l’échec
-## Gérer le callback de connexion {{{ data-action="code" data-code="App.vue" }}}
+## Gérer le rappel de connexion {{{ data-action="code" data-code="App.vue" }}}
-Une fois que les utilisateurs sont connectés avec la page de connexion universelle, ils sont redirigés vers votre application via une URL avec un schéma d’URL personnalisé. L’événement appUrlOpen
doit être géré dans votre application. Vous pouvez appeler la méthode handleRedirectCallback
à partir de la trousse SDK Auth0 pour initialiser l’état d’authentification.
Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Pour vérifier le succès, vérifiez la présence du code
et des paramètres state
dans l’URL.
La méthode Browser.close()
devrait fermer le navigateur lorsque cet événement est déclenché.
Cet article suppose que vous utiliserez des schémas d’URL personnalisés pour gérer le callback dans votre application. Pour ce faire, enregistrez votre YOUR_PACKAGE_ID
comme schéma d’URL pour la plateforme de votre choix. Pour en savoir plus, lisez Définition d’un schéma d’URL personnalisé pour iOS ou Création de liens profonds vers le contenu des applications pour Android.
Ionic - Étape 6 - Point de contrôle Ajoutez appUrlOpen
au composant App
de votre application et connectez-vous. La fenêtre du navigateur devrait se fermer une fois que l’utilisateur s’authentifie et se connecte à votre application.
+Une fois que les utilisateurs sont connectés avec la page de connexion universelle, ils sont redirigés vers votre application au moyen d’une URL avec un schéma d’URL personnalisé. L’événement appUrlOpen
doit être traité au sein de votre application. Vous pouvez appeler la méthode handleRedirectCallback
à partir de la trousse SDK Auth0 pour initialiser l’état d’authentification.
Vous pouvez utiliser cette méthode uniquement sur une redirection depuis Auth0. Vérifiez que les paramètres code
et state
sont présents dans l’URL.
La méthode Browser.close()
devrait fermer le navigateur lorsque cet événement est déclenché.
Cet article suppose que vous utiliserez des schémas d’URL personnalisés pour gérer le callback dans votre application. Pour ce faire, enregistrez votre YOUR_PACKAGE_ID
comme schéma d’URL pour la plateforme de votre choix. Pour en savoir plus, lisez Définition d’un schéma d’URL personnalisé pour iOS ou Création de liens profonds vers le contenu des applications pour Android.
Ionic - Étape 6 - Point de contrôle Ajoutez appUrlOpen
au composant App
de votre application et connectez-vous. La fenêtre du navigateur devrait se fermer une fois que l’utilisateur s’authentifie et se connecte à votre application.
- Sorry about that. Here's a couple things to double check:
check that the custom URL scheme is registered for your chosen platform. On iOS, define a custom URL scheme, or add an intent filter with your custom scheme on Android
if the event fires but you receive an error, check the logs in your Auth0 Dashboard for the reason for the error
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
vérifiez que le schéma d’URL personnalisé est enregistré pour la plateforme choisie. Sur iOS, définissez un schéma d’URL personnalisé ou ajoutez un filtre d’intention avec votre schéma personnalisé sur Android
si l’événement se déclenche mais que vous recevez une erreur, consultez les journaux de votre Auth0 Dashboard pour connaître la cause de l’erreur
## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="LogoutButton.vue" }}}
-Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent être redirigés vers le point de terminaison de déconnexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor doit effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience frustrante.
Pour y parvenir avec Ionic et Capacitor en conjonction avec le SDK Auth0 :
Créez l’URL de votre application vers laquelle Auth0 doit rediriger après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-la à votre configuration Allowed Logout URLs URL de déconnexions autorisées dans Auth0 Dashboard
Déconnectez-vous de la trousse SDK en appelant logout
et transmettez votre URL de redirection comme paramètre logoutParams.returnTo
.
Définissez le paramètre openUrl
sur un callback qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide de Browser.open
.
De la même manière que pour l’étape de connexion, si vous ne définissez pas openUrl
lors de l’appel de logout
, la trousse SDK redirige l’utilisateur vers l’URL de déconnexion à l’aide de l’application de navigateur par défaut sur l’appareil, ce qui offre une expérience utilisateur sous-optimale.
Ionic - Étape 7 - Point de contrôle Fournir un moyen pour vos utilisateurs de se déconnecter de votre application. Vérifiez que vous redirigez vers Auth0, puis vers l’adresse spécifiée dans le paramètre returnTo
. Vérifiez que vous n’êtes plus connecté à votre application.
+Maintenant que les utilisateurs peuvent se connecter, vous devez configurer une façon de se déconnecter. Les utilisateurs doivent être redirigés vers le point de terminaison de déconnexion Auth0 dans le navigateur pour effacer leur session de navigation. Encore une fois, le plugiciel du navigateur de Capacitor doit effectuer cette redirection afin que l’utilisateur ne quitte pas votre application et ne vive pas une expérience frustrante.
Pour y parvenir avec Ionic et Capacitor en conjonction avec le SDK Auth0 :
Créez l’URL de votre application vers laquelle Auth0 doit rediriger après la déconnexion. Il s’agit d’une URL qui utilise votre schéma personnalisé enregistré et le domaine Auth0. Ajoutez-la à votre configuration URL de déconnexions autorisées dans Auth0 Dashboard
Déconnectez-vous de la trousse SDK en appelant logout
et transmettez votre URL de redirection comme paramètre logoutParams.returnTo
.
Définissez le paramètre openUrl
sur un callback qui utilise le plugiciel de navigateur Capacitor pour ouvrir l’URL à l’aide de Browser.open
.
De la même manière que pour l’étape de connexion, si vous ne définissez pas openUrl
lors de l’appel de logout
, la trousse SDK redirige l’utilisateur vers l’URL de déconnexion à l’aide de l’application de navigateur par défaut sur l’appareil, ce qui offre une expérience utilisateur sous-optimale.
Ionic - Étape 7 - Point de contrôle Fournir un moyen pour vos utilisateurs de se déconnecter de votre application. Vérifiez que vous redirigez vers Auth0, puis vers l’adresse spécifiée dans le paramètre returnTo
. Vérifiez que vous n’êtes plus connecté à votre application.
- Sorry about that. Here's a couple things to double check:
check that the URL you provided to in the returnTo
parameter is registered as an allowed callback URL in your Auth0 Dashboard
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
vérifiez que l’URL que vous avez fournie dans le paramètre returnTo
est enregistrée comme URL de rappel autorisée dans votre Tableau de bord Auth0
## Afficher le profil utilisateur {{{ data-action="code" data-code="UserProfile.vue" }}}
-La trousse SDK Vue Auth0 récupère le profil utilisateur associé aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont disponibles via la propriété user
exposée par le composable useAuth0()
.
L’initialisation de la trousse SDK est asynchrone, et vous devez protéger le profil utilisateur en activant les propriétés isLoading
et user
. Une fois que isLoading
est false
et que user
a une valeur, le profil utilisateur peut être utilisé.
Ionic - Étape 8 - Point de contrôle Fournir un moyen pour que vos utilisateurs puissent voir leurs détails de profil utilisateur dans l’application et vérifiez que vous êtes en mesure de récupérer et de voir les informations de votre profil à l’écran une fois que vous avez ouvert une session.
+La trousse SDK Vue Auth0 récupère le profil utilisateur associé aux utilisateurs connectés dans n’importe quel composant dont vous avez besoin, comme leur nom ou leur image de profil, pour personnaliser l’interface utilisateur. Les informations de profil sont accessibles à partir de la propriété user
exposée par la fonction composable useAuth0()
.
L’initialisation de la trousse SDK est asynchrone, et vous devez protéger le profil utilisateur en activant les propriétés isLoading
et user
. Une fois que isLoading
est false
et que user
a une valeur, le profil utilisateur peut être utilisé.
Ionic - Étape 8 - Point de contrôle Assurez-vous que vos utilisateurs ont un moyen de consulter leurs informations de profil dans l’application et vérifiez que vous êtes en mesure de récupérer et d’afficher les informations de votre profil à l’écran une fois que vous vous êtes connecté.
diff --git a/fr-ca/articles/quickstart/native/ios-swift/interactive.md b/fr-ca/articles/quickstart/native/ios-swift/interactive.md
index 64f69f191a..873bf12474 100644
--- a/fr-ca/articles/quickstart/native/ios-swift/interactive.md
+++ b/fr-ca/articles/quickstart/native/ios-swift/interactive.md
@@ -8,19 +8,19 @@ files:
- files/ProfileView
- files/User
github:
- path: https://github.com/auth0-samples/auth0-ios-swift-sample/tree/master/Sample-01
+ path: Sample-01
locale: fr-CA
---
# Ajouter une connexion à votre application iOS ou macOS
-Ce guide explique comment ajouter l’authentification et accéder aux informations du profil utilisateur dans n’importe quelle application iOS/macOS à l’aide du SDK Auth0.swift.
Pour utiliser ce guide rapide, vous devez:
Vous inscrire pour avoir un compte Auth0 gratuit ou vous connecter à Auth0.
Avoir une application iOS/macOS existante que vous souhaitez intégrer Vous pouvez également consulter ou télécharger une application faisant office d’exemple lorsque vous vous connectez.
+Ce guide explique comment ajouter l’authentification et accéder aux informations du profil utilisateur dans n’importe quelle application iOS/macOS à l’aide du SDK Auth0.swift.
Pour utiliser ce guide rapide, vous devez :
vous inscrire à un compte Auth0 gratuit ou vous connecter à Auth0.
avoir une application iOS/macOS existante que vous souhaitez intégrer. Vous pouvez également consulter ou télécharger une application faisant office d’exemple lorsque vous vous connectez.
-## Configurer Auth0
+## Configuration d’Auth0
-Pour utiliser les services Auth0, vous devez avoir une application configurée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour l’application que vous développez.
Configurer une application Auth0.
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application Auth0 Native existante. Auth0 attribue à chaque application un ID client unique alphanumérique que votre application utilise pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce démarrage rapide met automatiquement à jour votre application Auth0 dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Consultez un exemple d’application si vous préférez explorer une configuration complète.
Configuration des callback URL et des URL de déconnexion.
Auth0 fait appel aux callback URL et aux URL de déconnexion pour rediriger les utilisateurs vers votre application. Auth0 fait appel à la callback URL après avoir authentifié l’utilisateur et l’URL de déconnexion après avoir supprimé le témoin de session. Si vous ne définissez pas les callback URL et les URL de déconnexion, les utilisateurs ne pourront pas se connecter et se déconnecter de l’application, et votre application produira une erreur.
Sur iOS 17.4+ et macOS 14.4+, il est possible d’utiliser des liens universels comme callback URL et URL de déconnexion. Lorsqu’activé, Auth0.swift reviendra à l’utilisation d’un schéma d’URL personnalisé sur les anciennes versions iOS/MacOS.
Cette fonctionnalité nécessite un Xcode 15.3+ et un compte Apple Developer payant.
Ajoutez les URL suivantes aux callback URL et aux URL de déconnexion, en fonction de la plateforme de votre application. Si vous avez un domaine personnalisé, utilisez-le à la place du domaine de votre locataire Auth0.
iOS
https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback,
+Pour utiliser les services Auth0, vous devez avoir une application configurée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour l’application que vous développez.
Configurer une application Auth0
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionnez une application Auth0 native existante. Auth0 attribue à chaque application un ID client unique alphanumérique que votre application utilise pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce démarrage rapide met automatiquement à jour votre application Auth0 dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Consultez un exemple d’application si vous préférez explorer une configuration complète.
Configuration des Callback URL et des URL de déconnexion.
Auth0 fait appel aux Callback URL et aux URL de déconnexion pour rediriger les utilisateurs vers votre application. Auth0 fait appel à une URL de rappel après avoir authentifié l’utilisateur et à une URL de déconnexion après avoir supprimé le témoin de session. Si vous ne définissez pas les Callback URL et les URL de déconnexion, les utilisateurs ne pourront pas se connecter et se déconnecter de l’application, et votre application produira une erreur.
Sur iOS 17.4+ et macOS 14.4+, il est possible d’utiliser des liens universels comme callback URL et URL de déconnexion. Lorsqu’activé, Auth0.swift reviendra à l’utilisation d’un schéma d’URL personnalisé sur les anciennes versions iOS/MacOS.
Cette fonctionnalité nécessite un Xcode 15.3+ et un compte Apple Developer payant.
Ajoutez les URL suivantes aux URL de rappel et URL de déconnexion, selon la plateforme de votre app. Si vous avez un domaine personnalisé, utilisez-le à la place du domaine de votre locataire Auth0.
iOS
https://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback,
YOUR_BUNDLE_IDENTIFIER://${account.namespace}/ios/YOUR_BUNDLE_IDENTIFIER/callback
@@ -38,7 +38,7 @@ com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
-1. Configurer le domaine associé.
Cette étape nécessite un compte Apple Developer payant. Il est nécessaire d’utiliser des liens universels comme callback URL et URL de déconnexion. Ignorez cette étape pour utiliser plutôt un schéma d’URL personnalisé.
Configurer l’ID Team et l’identifiant de l’ensemble
Allez à la page des paramètres de votre application Auth0, faites défiler jusqu’en bas, et ouvrez Advanced Settings (Paramètres avancés) > Device Settings ( Paramètres de l’appareil). Dans la section iOS , définissez Team ID sur votre Apple Team ID et App ID sur l’identifiant de l’ensemble de votre application.
![Auth0 Dashboard> Applications > Applications > [Native App] > Settings tab (Onglet des paramètres) > Advanced Settings (Paramètres avancés) > Device Settings tab (Onglet des paramètres de l’appareil)](//images.ctfassets.net/cdy7uua7fh8z/62v9bB3bUVMw9XLND5lcMI/a44aa1441c4a91d615accddb0c23ea80/IOS_Settings_-_French.png)
Cette action ajoutera votre application au fichier apple-app-site-association
de votre locataire Auth0.
Ajoutez la capacité de domaine associé.
Dans Xcode, allez à l’onglet Signing and Capabilities (Signature et capacités) des paramètres cibles de votre application, puis appuyez sur le bouton + Capability (capacité) Puis sélectionnez Domaines associés.

Ensuite, ajoutez l’entrée suivante sous Domaines associé :
webcredentials:labs-fundtraining.us.auth0.com
+Configurer le domaine associé
Cette étape nécessite un compte Apple Developer payant. Il est nécessaire d’utiliser des liens universels comme callback URL et URL de déconnexion. Ignorez cette étape pour utiliser plutôt un schéma d’URL personnalisé.
Configurer l’ID Team et l’identifiant de l’ensemble
Allez à la page des paramètres de votre application Auth0, faites défiler jusqu’en bas, et ouvrez Advanced Settings (Paramètres avancés) > (Paramètres de l’appareil). Dans la section iOS, définissez Team ID sur votre Apple Apple Team ID et App ID sur l’identifiant de l’ensemble de votre application.
![Auth0 Dashboard> Applications > Applications > [Native App] > Settings tab (Onglet des paramètres) > Advanced Settings (Paramètres avancés) > Device Settings tab (Onglet des paramètres de l’appareil)](//images.ctfassets.net/cdy7uua7fh8z/62v9bB3bUVMw9XLND5lcMI/a44aa1441c4a91d615accddb0c23ea80/IOS_Settings_-_French.png)
Cette action ajoutera votre application au fichier apple-app-site-association
de votre locataire Auth0.
Ajouter la capacité de domaine associé
Dans Xcode, allez à l’ongletSigning and Capabilities (Signature et capacités) des paramètres cibles de votre application, puis appuyez sur le bouton + Capability (Capacité). Sélectionnez ensuite Associated Domains (Domaines associés).

Ajoutez l’entry suivante sous Associated Domains (Domaines associés) :
webcredentials:labs-fundtraining.us.auth0.com
@@ -51,56 +51,56 @@ com.example.MyApp://example.us.auth0.com/ios/com.example.MyApp/callback
-Ensuite, sélectionnez la règle de dépendance et appuyez sur Add Package (Ajouter le package).
Pour plus d’informations sur SPM consultez la documentation officielle.
Utilisation de Cocoapods
Ajoutez la ligne suivante à votre Podfile
:
pod 'Auth0', '~> 2.0'
+Ensuite, sélectionnez la règle de dépendance et appuyez sur Add Package (Ajouter le package).
Pour plus d’informations sur SPM consultez la documentation officielle.
Utilisation de Cocoapods
Ajoutez la ligne suivante à votre Podfile
:
pod 'Auth0', '~> 2.0'
-Ensuite, exécutez pod install
.
Pour plus d’informations sur CocoaPods, consultez la documentation officielle.
Utilisation de Carthage
Ajoutez la ligne suivante à votre Cartfile
:
github "auth0/Auth0.swift" ~> 2.0
+Ensuite, exécutez pod install
.
Pour plus d’informations sur CocoaPods, consultez la documentation officielle.
Utilisation de Carthage
Ajoutez la ligne suivante à votre Cartfile
:
github "auth0/Auth0.swift" ~> 2.0
-Ensuite, exécutez carthage bootstrap --use-xcframeworks
.
Pour en savoir plus sur Carthage, consultez la documentation officielle.
+Ensuite, exécutez carthage bootstrap --use-xcframeworks
.
Pour en savoir plus sur Carthage, consultez la documentation officielle.
-## Configurer la trousse SDK {{{ data-action="code" data-code="Auth0.plist" }}}
+## Configuration de la trousse SDK {{{ data-action="code" data-code="Auth0.plist" }}}
-La trousse SDK Auth0.swift a besoin de votre domaine Auth0 et de votre ID client. Ces valeurs se trouvent dans la page des paramètres de votre application Auth0.
domain : Le domaine de votre locataire Auth0. Si vous avez un domaine personnalisé, utilisez-le à la place du domaine de votre locataire Auth0.
ID client : L’ID alphanumérique unique de l’application Auth0 que vous avez configuré précédemment dans ce démarrage rapide.
Créez un fichier plist
nommé Auth0.plist
dans votre ensemble d’application contenant les valeurs du domaine Auth0 et de l’ID client.
Vous pouvez également configurer la trousse SDK de manière programmatique. Consultez README pour en savoir plus.
Démarrage rapide iOS Swift – Étape 3 – Point de contrôle Vous avez configuré la trousse SDK Auth0.swift. Exécutez votre application afin de vérifier qu’elle ne produit pas d’erreurs liées à la trousse SDK.
+La trousse SDK Auth0.swift a besoin de votre domain (domaine) Auth0 et de votre Client ID (Identifiant client). Ces valeurs se trouvent dans la page des paramètres de votre application Auth0.
domain (domaine) : Le domaine de votre locataire Auth0. Si vous avez un domaine personnalisé, utilisez-le à la place du domaine de votre locataire Auth0.
Client ID (Identifiant client) L’identifiant alphanumérique unique de l’application Auth0 que vous avez configuré précédemment dans ce démarrage rapide.
Créez un fichier plist
nommé Auth0.plist
dans votre ensemble d’application contenant les valeurs du domaine Auth0 et de l’identifiant client.
Vous pouvez également configurer la trousse SDK de manière programmatique. Consultez README pour en savoir plus.
Démarrage rapide iOS Swift - Étape 3 - Point de contrôle Vous avez configuré la trousse SDK Auth0.swift. Exécutez votre application afin de vérifier qu’elle ne produit pas d’erreurs liées à la trousse SDK.
- If your app produces errors related to the SDK:
Make sure you selected the correct Auth0 application
Verify you saved your URL updates
Ensure you set the Auth0 domain and Client ID correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si votre application génère des erreurs liées à la trousse SDK :
Assurez-vous d’avoir sélectionné la bonne application Auth0
Vérifiez que vous avez enregistré vos mises à jour d’URL
Assurez-vous d’avoir défini correctement le domaine Auth0 et l’identifiant client
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
## Ajouter une fonctionnalité de connexion à votre application {{{ data-action="code" data-code="MainView.swift#20:31" }}}
-Importez le module Auth0
dans le fichier où vous souhaitez afficher la page de connexion. Ensuite, affichez la page Connexion universelle dans l’action de votre bouton Login (connexion).
Vous pouvez utiliser async/await ou Combine au lieu de l’API basée sur les rappels. Consultez README pour apprendre davantage.
Démarrage rapide iOS Swift – Étape 4 – Point de contrôle Appuyez sur le bouton Login (Connexion) et vérifiez que :
Une boîte d’alerte s’affiche demandant le consentement.
Choisir Continue (Continuer) ouvre la page de connexion universelle dans un modal Safari.
Vous pouvez vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe ou un fournisseur social.
Le modal Safari se ferme automatiquement par la suite.
+Importez le module Auth0
dans le fichier où vous souhaitez présenter la page de connexion. Ensuite, présentez la page Universal Login (Connexion universelle) dans l’action de votre bouton Login (Connexion).
Vous pouvez utiliser async/await ou Combine au lieu de l’API basée sur les rappels. Consultez README pour en savoir plus.
Démarrage rapide iOS Swift – Étape 4 – Point de contrôle Appuyez sur le bouton Login (Connexion) et vérifiez que :
Une boîte d’alerte s’affiche demandant le consentement.
Sélectionner Continue (Continuer) ouvre la page de connexion universelle dans un modal Safari.
Vous pouvez vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe ou un fournisseur social.
Le modal Safari se ferme automatiquement par la suite.
- If login fails or produces errors:
Verify you entered the correct callback URL
Ensure you set the Auth0 domain and Client ID correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si la connexion échoue ou génère des erreurs :
Vérifiez que vous avez saisi la bonne URL de rappel
Assurez-vous de définir correctement le domaine Auth0 et l’identifiant client
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="MainView.swift#34:45" }}}
-Maintenant que vous pouvez vous connecter à votre application, vous avez besoin d’un moyen de vous log out (déconnecter). Dans l’action de votre bouton Logout (Déconnexion) , faites usage de la méthode clearSession()
pour effacer le témoin de session de la connexion universelle.
Démarrage rapide iOS Swift – Étape 5 – Point de contrôle Appuyez sur le bouton Logout (Connexion) et vérifiez que :
Une boîte d’alerte s’affiche demandant le consentement.
Choisir Continue (Continuer) ouvre une page dans un modal Safari.
Le modal Safari se ferme automatiquement par la suite.
+Maintenant que vous pouvez vous connecter à votre application, vous avez besoin d’un moyen de vous déconnecter. Dans l’action de votre bouton Logout (Déconnexion), faites usage de la méthode clearSession()
pour effacer le témoin de session de la connexion universelle.
Démarrage rapide iOS Swift - Étape 5 - Point de contrôle Appuyez sur le bouton Logout (Déconnexion) et vérifiez que :
Une boîte d’alerte s’affiche demandant le consentement.
Choisir Continue (Poursuivre) ouvre une page dans une boîte de dialogue modale Safari.
La boîte de dialogue modale Safari se ferme automatiquement par la suite.
- If logout fails or produces errors:
Verify you entered the correct callback URL
Ensure you set the Auth0 domain and Client ID correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Si la déconnexion échoue ou génère des erreurs :
Vérifiez que vous avez saisi la bonne URL de rappel
Assurez-vous de définir correctement le domaine Auth0 et l’identifiant client
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
## Accéder aux informations du profil utilisateur {{{ data-action="code" data-code="User.swift#11:14" }}}
-L’instance Credentials
que vous avez obtenue après vous être connecté inclut un ID token (jeton d’ID). Le jeton d’ID contient les informations de profil associées à l’utilisateur connecté, telles que son courriel et sa photo de profil. Vous pouvez utiliser ces informations pour personnaliser l’interface utilisateur de votre application.
La trousse SDK Auth0.swift inclut un utilitaire pour décoder les JWT comme le jeton d’ID. Commencez par importer le module JWTDecode
dans le fichier où vous souhaitez accéder aux informations du profil utilisateur. Ensuite, utilisez la méthode decode(jwt:)
pour décoder le jeton d’ID et accéder aux demandes qu’il contient.
Vous pouvez récupérer les dernières informations utilisateur avec la méthode userInfo(withAccessToken:)
. Consultez les EXAMPLES (EXEMPLES) pour en savoir plus.
Démarrage rapide iOS Swift – Étape 6 – Point de contrôle Vérifiez que vous pouvez accéder à email
, picture
, ou à toute autre demande après vous être connecté.
+L’instance Credentials
que vous avez obtenue après vous être connecté inclut un jeton d’ID. Le jeton d’ID contient les informations de profil associées à l’utilisateur connecté, telles que son courriel et sa photo de profil. Vous pouvez utiliser ces informations pour personnaliser l’interface utilisateur de votre application.
La trousse SDK Auth0.swift inclut un utilitaire pour décoder les JWT, comme le jeton d’ID. Commencez par importer le module JWTDecode
dans le fichier où vous souhaitez accéder aux informations du profil utilisateur. Ensuite, utilisez la méthode decode(jwt:)
pour décoder le jeton d’ID et accéder aux demandes qu’il contient.
Vous pouvez récupérer les dernières informations utilisateur avec la méthode userInfo(withAccessToken:)
. Consultez les EXAMPLES (EXEMPLES) pour en savoir plus.
Démarrage rapide iOS Swift - Étape 6 - Point de contrôle Vérifiez que vous pouvez accéder à email
, picture
, ou à toute autre demande après vous être connecté.
- If you cannot access the user information:
Verify you imported the JWTDecode
module where you invoke the decode(jwt:)
method
Make sure you spelled your claims correctly
Still having issues? Check out our documentation or visit our community forums to get more help.
+ Si vous ne pouvez pas accéder aux informations de l’utilisateur :
Vérifiez que vous avez importé le module JWTDecode
dans lequel vous appelez la méthode decode(jwt:)
Vérifiez l’orthographe de vos requêtes.
Vous rencontrez toujours des problèmes? Consultez notre documentation ou visitez nos forums communautaires pour obtenir de l’aide.
diff --git a/fr-ca/articles/quickstart/native/maui/interactive.md b/fr-ca/articles/quickstart/native/maui/interactive.md
index ec399f8b3d..4e568a4bc0 100644
--- a/fr-ca/articles/quickstart/native/maui/interactive.md
+++ b/fr-ca/articles/quickstart/native/maui/interactive.md
@@ -5,24 +5,24 @@ interactive: true
files:
- files/MainPage.xaml
github:
- path: https://github.com/auth0-samples/auth0-maui-samples/tree/master/Sample
+ path: Sample
locale: fr-CA
---
# Ajouter une connexion à votre application MAUI
-Auth0 vous permet d’ajouter rapidement l’authentification à presque tous les types d’application. Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les informations de profil utilisateur dans n’importe quelle application .NET MAUI à l’aide des SDK Auth0 de MAUI.
La trousse SDK MAUI prend en charge Android, iOS, macOS et Windows. Poursuivez la lecture pour en savoir plus sur la configuration propre à chaque plateforme.
+Auth0 vous permet d’ajouter rapidement l’authentification à presque tous les types d’application. Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les informations de profil utilisateur dans n’importe quelle application .NET MAUI à l’aide des SDK Auth0 de MAUI.
La trousse SDK MAUI prend en charge Android, iOS, macOS et Windows. Poursuivez la lecture pour en savoir plus sur la configuration propre à chaque plateforme.
-## Configurer Auth0
+## Configuration d’Auth0
-Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, vous pouvez plutôt consulter une application faisant office d’exemple.
Configuration des callback URL
Une callback URL est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.
Si vous suivez notre exemple, définissez cette URL comme suit : myapp://callback
.
Configurer les URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après qu’ils se sont déconnectés. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre exemple, définissez cette URL comme suit : myapp://callback
.
+Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour le projet que vous développez.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application Auth0 ou sélectionner une application existante qui représente le projet avec lequel vous souhaitez effectuer l’intégration. Dans Auth0, chaque application se voit attribuer un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce guide de démarrage rapide seront automatiquement mis à jour pour votre application dans le Tableau de bord, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.
Configuration des URL de rappel
Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.
Si vous suivez notre exemple, définissez cette URL comme suit : myapp://callback
.
Configuration des URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre exemple, définissez cette URL comme suit : myapp://callback
.
## Installer la trousse SDK Auth0
-Auth0 propose une trousse SDK MAUI pour simplifier le processus d’implémentation de l’authentification Auth0 dans les applications MAUI.
Utilisez le Gestionnaire de packages NuGet (Tools [Outils] -> Library Package Manager [Gestionnaire de packages de bibliothèque] -> Package Manager Console [Console du gestionnaire de package]) pour installer le package Auth0.OidcClient.MAUI
.
Sinon, vous pouvez utiliser la Console du gestionnaire de packages NuGet (Install-Package
) ou le dotnet
CLI (dotnet add
).
Install-Package Auth0.OidcClient.MAUI
+Auth0 propose une trousse SDK MAUI pour simplifier le processus de mise en œuvre de l’authentification Auth0 dans les applications MAUI.
Utilisez le gestionnaire de paquet NuGet (Outils -> Gestionnaire de paquets de la bibliothèque -> Console du gestionnaire de paquets) pour installer le paquet Auth0.OidcClient.MAUI
.
Vous pouvez aussi utiliser la Console du gestionnaire de paquets NuGet (Install-Package
) ou le dotnet
interface de ligne de commande (CLI) (dotnet add
).
Install-Package Auth0.OidcClient.MAUI
@@ -32,22 +32,22 @@ locale: fr-CA
-## Configuration particulière de la plateforme
+## Configuration propre à la plateforme
-Une configuration particulière à la plateforme est nécessaire pour utiliser la trousse SDK avec Android et Windows.
Android
Créer une nouvelle activité qui étend WebAuthenticatorCallbackActivity
:
[Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop, Exported = true)]
+Une configuration propre à la plateforme est nécessaire pour utiliser la trousse SDK avec Android et Windows.
Android
Créez une nouvelle activité qui étend WebAuthenticatorCallbackActivity
:
[Activity(NoHistory = true, LaunchMode = LaunchMode.SingleTop, Exported = true)]
[IntentFilter(new[] { Intent.ActionView },
- Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable },
+ Categories = new[] { Intent.CategoryDefault, Intent.CategoryBrowsable },
- DataScheme = CALLBACK_SCHEME)]
+ DataScheme = CALLBACK_SCHEME)]
public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthenticatorCallbackActivity
{
- const string CALLBACK_SCHEME = "myapp";
+ const string CALLBACK_SCHEME = "myapp";
}
@@ -55,35 +55,35 @@ public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthent
L’activité ci-dessus garantira que l’application peut gérer l’URL myapp://callback
lorsque Auth0 redirige de nouveau vers l’application Android après la connexion.
Windows
Pour garantir la réactivation correcte de votre application après la redirection vers Auth0, vous devez faire deux choses :
Ajouter le protocole correspondant au Package.appxmanifest
. Dans ce cas, il est défini sur myapp
, mais vous pouvez le changer à votre guise (veillez également à mettre à jour toutes les URL Auth0 correspondantes).
<Applications>
- <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
+ <Application Id="App" Executable="$targetnametoken$.exe" EntryPoint="$targetentrypoint$">
- <Extensions>
+ <Extensions>
- <uap:Extension Category="windows.protocol">
+ <uap:Extension Category="windows.protocol">
- <uap:Protocol Name="myapp"/>
+ <uap:Protocol Name="myapp"/>
- </uap:Extension>
+ </uap:Extension>
- </Extensions>
+ </Extensions>
- </Application>
+ </Application>
</Applications>
-Appeler Activator.Default.CheckRedirectionActivation()
dans le fichier propre à Windows App.xaml.cs
.
public App()
+Appelez Activator.Default.CheckRedirectionActivation()
dans le fichier propre à App.xaml.cs
.
public App()
{
- if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
+ if (Auth0.OidcClient.Platforms.Windows.Activator.Default.CheckRedirectionActivation())
- return;
+ return;
- this.InitializeComponent();
+ this.InitializeComponent();
}
@@ -94,33 +94,31 @@ public class WebAuthenticatorActivity : Microsoft.Maui.Authentication.WebAuthent
## Instancier Auth0Client. {{{ data-action="code" data-code="MainPage.xaml.cs#3:10" }}}
-Pour intégrer Auth0 dans votre application, instanciez une instance de la classe Auth0Client
en passant une instance de Auth0ClientOptions
qui contient votre domaine Auth0, votre ID client et les permissions requises. De plus, vous devez également configurer RedirectUri
et PostLogoutRedirectUri
pour garantir qu’Auth0 peut rediriger vers l’application en utilisant les URL configurées.
using Auth0.OidcClient;
+Pour intégrer Auth0 dans votre application, instanciez une instance de la classe Auth0Client
en passant une instance de Auth0ClientOptions
qui contient votre domaine Auth0, votre identifiant client et les permissions requises. De plus, vous devez également configurer RedirectUri
et PostLogoutRedirectUri
pour garantir qu’Auth0 peut rediriger vers l’application en utilisant les URL configurées.
using Auth0.OidcClient;
-var client = new Auth0Client(new Auth0ClientOptions
+ var client = new Auth0Client(new Auth0ClientOptions {
-{
-
- Domain = "${account.namespace}",
+ Domain = "${account.namespace}",
- ClientId = "${account.clientId}",
+ ClientId = "${account.clientId}",
- RedirectUri = "myapp://callback",
+ RedirectUri = "myapp://callback",
- PostLogoutRedirectUri = "myapp://callback",
+ PostLogoutRedirectUri = "myapp://callback",
- Scope = "openid profile email"
+ Scope = "openid profile email"
-});
+ });
-Par défaut, la trousse SDK utilisera les onglets personnalisés Chrome pour Android, ASWebAuthenticationSession pour iOS et macOS, et utilisera le navigateur par défaut de votre système sur Windows.
Démarrage rapide MAUI – Étape 4 – Point de contrôle Votre Auth0Client
devrait maintenant être correctement instancié. Éxecutez votre application pour vérifier que :
L’ Auth0Client
est correctement instancié dans la MainPage
.
Votre application ne génère aucune erreur liée à Auth0.
+En règle générale, la trousse SDK emploiera les onglets personnalisés de Chrome pour Android, ASWebAuthenticationSession pour iOS et macOS, et le navigateur par défaut de votre système sur Windows.
Démarrage rapide MAUI - Étape 4 - Point de contrôle Votre Auth0Client
devrait maintenant être correctement instancié. Exécutez votre application pour vérifier que :
l’Auth0Client
est correctement instancié dans la MainPage
,
votre application ne génère aucune erreur liée à Auth0.
- Sorry about that. Here are a couple things to double-check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
assurez-vous que la bonne application est sélectionnée
avez-vous procédé à un enregistrement après avoir saisi vos URL?
assurez-vous que le domaine et l’identifiant client sont importés correctement
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
@@ -131,30 +129,30 @@ var client = new Auth0Client(new Auth0ClientOptions
-S’il n’y a pas d’erreur, vous pouvez accéder à User
, IdentityToken
, AccessToken
et RefreshToken
dans le LoginResult
renvoyé par LoginAsync()
.
Démarrage rapide MAUI – Étape 5 – Point de contrôle Vous devez désormais pouvoir vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe.
Appuyez sur le bouton de connexion et vérifiez que :
Votre application vous redirige vers la page de connexion universelle d’Auth0.
Vous pouvez vous connecter ou vous inscrire.
Auth0 vous redirige vers votre application.
+S’il n’y a pas d’erreur, vous pouvez accéder à User
, IdentityToken
, AccessToken
et RefreshToken
dans le LoginResult
renvoyé par LoginAsync()
.
Démarrage rapide MAUI – Étape 5 – Point de contrôle Vous devez désormais pouvoir vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe.
Appuyez sur le bouton de connexion et vérifiez que :
Votre application vous redirige vers la page Connexion universelle Auth0.
Vous pouvez vous connecter ou vous inscrire.
Auth0 vous redirige vers votre application.
- Sorry about that. Here's something to double-check:
you called LoginAsync
as expected
Still having issues? Check out our documentation or visit our community page to get more help.
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
vous avez appelé LoginAsync
comme prévu
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
-## Ajouter une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="MainPage.xaml.cs#32:32" }}}
+## Ajoutez une fonctionnalité de déconnexion à votre application {{{ data-action="code" data-code="MainPage.xaml.cs#32:32" }}}
Les utilisateurs qui se connectent à votre projet auront également besoin d’un moyen de se déconnecter. Créez un bouton de déconnexion en utilisant la méthode LogoutAsync()
de la trousse SDK. Lorsque les utilisateurs se déconnectent, ils seront redirigés vers votre point de terminaison de déconnexion Auth0, qui par la suite les redirigera immédiatement vers l’URL de déconnexion que vous avez configurée précédemment dans ce démarrage rapide.
await client.LogoutAsync();
-Démarrage rapide MAUI – Étape 6 – Point de contrôle Executez votre application et cliquez sur le bouton de déconnexion, vérifiez que :
Votre application vous redirige vers l’adresse que vous avez précisée comme l’une des URL de déconnexion autorisées dans les paramètres de votre application.
Vous n’êtes plus connecté à votre application.
+Démarrage rapide MAUI – Étape 6 – Point de contrôle Exécutez votre application et cliquez sur le bouton de déconnexion, vérifiez que :
Votre application vous redirige vers l’adresse que vous avez précisée comme l’une des URL de déconnexion autorisées dans les paramètres de votre application.
Vous n’êtes plus connecté à votre application.
- Sorry about that. Here are a couple things to double-check:
you configured the correct Logout URL
you called LogoutAsync
as expected.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
vous avez configuré la bonne URL de déconnexion
vous avez appelé LogoutAsync
comme prévu
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
## Afficher les informations du profil utilisateur {{{ data-action="code" data-code="MainPage.xaml.cs#55:58" }}}
-Maintenant que vos utilisateurs peuvent se connecter et se déconnecter, vous voulez probablement pouvoir récupérer et utiliser les informations de profil associées aux utilisateurs authentifiés. Par exemple, vous voudrez peut-être pouvoir afficher le nom ou la photo de profil d’un utilisateur connecté dans votre projet.
La trousse SDK Auth0 de MAUI fournit des informations sur l’utilisateur par l’intermédiaire de la propriété LoginResult.User
.
+Maintenant que vos utilisateurs peuvent se connecter et se déconnecter, vous voudrez probablement pouvoir récupérer les profile information (informations de profil) associées aux utilisateurs authentifiés. Par exemple, vous voudrez peut-être pouvoir afficher le nom ou la photo de profil d’un utilisateur connecté dans votre projet.
La trousse SDK Auth0 de MAUI fournit des informations sur l’utilisateur par l’intermédiaire de la propriété LoginResult.User
.
diff --git a/fr-ca/articles/quickstart/native/net-android-ios/interactive.md b/fr-ca/articles/quickstart/native/net-android-ios/interactive.md
index ac458a8482..06b11d8815 100644
--- a/fr-ca/articles/quickstart/native/net-android-ios/interactive.md
+++ b/fr-ca/articles/quickstart/native/net-android-ios/interactive.md
@@ -7,24 +7,24 @@ files:
- files/AppDelegate
- files/MyViewController
github:
- path: https://github.com/auth0-samples/auth0-xamarin-oidc-samples/tree/master/Quickstart/01-Login
+ path: Quickstart/01-Login
locale: fr-CA
---
# Ajouter une connexion à votre application .NET Android ou iOS
-Auth0 vous permet d’ajouter rapidement l’authentification à presque tous les types d’application. Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les informations de profil utilisateur dans n’importe quelle application .NET Android et iOS à l’aide des SDK Auth0 Android et iOS.
Ce guide de démarrage couvre .NET Android et iOS, les futures générations de Xamarin.Android
et de Xamarin.iOS
. Si vous utilisez encore Xamarin.Android
et Xamarin.iOS
, vous pouvez suivre ce guide, car l’intégration est identique et les SDK sont compatibles.
Pour utiliser ce guide rapide, vous devez:
Vous inscrire à un compte Auth0 gratuit ou vous connecter à Auth0.
Avoir un projet Android ou iOS fonctionnel utilisant .NET 6 (ou une version ultérieure) avec lequel vous souhaitez vous intégrer. Vous pouvez également consulter ou télécharger une application faisant office d’exemple lorsque vous vous connectez.
+Auth0 vous permet d’ajouter rapidement l’authentification à presque tous les types d’application. Ce guide explique comment intégrer Auth0, ajouter l’authentification et afficher les informations de profil utilisateur dans n’importe quelle application .NET Android et iOS à l’aide des SDK Auth0 pour Android et iOS.
Ce guide de démarrage couvre .NET Android et iOS, les futures générations de Xamarin.Android
et de Xamarin.iOS
. Si vous utilisez encore Xamarin.Android
et Xamarin.iOS
, vous pouvez suivre ce guide, car l’intégration est identique et les SDK sont compatibles.
Pour utiliser ce guide rapide, vous devez :
Vous inscrire à un compte Auth0 gratuit ou vous connecter à Auth0.
Avoir un projet Android ou iOS fonctionnel utilisant .NET 6 (ou une version ultérieure) avec lequel vous souhaitez vous intégrer. Vous pouvez également consulter ou télécharger une application faisant office d’exemple lorsque vous vous connectez.
-## Configuration d'Auth0
+## Configuration d’Auth0
-Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. Vous allez configurer l’authentification pour votre projet dans l'application Auth0.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application «Application native», ou sélectionnez une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identificateur client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via le SDK.
Tous les paramètres que vous configurez à l’aide de ce guide rapide seront automatiquement mis à jour pour votre application dans le Dashboard, où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, consultez plutôt un exemple d'application.
Configuration des Callback URL
Une Callback URL est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.
Si vous suivez notre exemple de projet, définissez l’une des URL suivantes selon votre plateforme :
Android : YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback
iOS : YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback
Configurer des URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre exemple de projet, définissez l’une des URL suivantes selon votre plateforme :
Android : YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback
iOS : YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback
Enfin, assurez-vous que Application Type (Type d’application) de votre application est défini sur Native dans les Application Settings (Paramètres de l’application).
+Pour utiliser les services Auth0, vous devez avoir une application installée dans Auth0 Dashboard. L’application Auth0 est l’endroit où vous allez configurer le fonctionnement de l’authentification pour votre projet.
Configurer une application
Utilisez le sélecteur interactif pour créer une nouvelle application « Application native », ou sélectionnez une application existante qui représente le projet avec lequel vous souhaitez vous intégrer. Dans Auth0, il est attribué à chaque application un identifiant client unique alphanumérique que votre code d’application utilisera pour appeler les API Auth0 via la trousse SDK.
Tous les paramètres que vous configurez à l’aide de ce démarrage rapide seront automatiquement mis à jour pour votre application dans le Dashboard, qui est l’endroit où vous pourrez gérer vos applications à l’avenir.
Si vous préférez explorer une configuration complète, consultez plutôt un exemple d’application.
Configuration des URL de rappel
Une URL de rappel est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur authentification. Si elle n’est pas définie, les utilisateurs ne seront pas redirigés vers votre application après s’être connectés.
Si vous suivez notre exemple de projet, définissez l’une des URL suivantes selon votre plateforme :
Android : YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback
iOS : YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback
Configuration des URL de déconnexion
Une URL de déconnexion est une URL intégrée dans votre application vers laquelle vous souhaitez qu’Auth0 redirige les utilisateurs après leur déconnexion. Si elle n’est pas définie, les utilisateurs ne pourront pas se déconnecter de votre application et recevront un message d’erreur.
Si vous suivez notre exemple de projet, définissez l’une des URL suivantes selon votre plateforme :
Android : YOUR_PACKAGE_NAME://{yourDomain}/android/YOUR_PACKAGE_NAME/callback
iOS : YOUR_BUNDLE_ID://{yourDomain}/ios/YOUR_BUNDLE_ID/callback
Enfin, assurez-vous que le type d’application pour votre application est défini sur Native dans les Application Settings (Paramètres d’application).
-## Installer le SDK Auth0
+## Installer la trousse SDK Auth0
-Auth0 propose une trousse SDK Android et iOS pour simplifier le processus d’implémentation de l’authentification Auth0 dans les applications .NET Android et iOS.
Utilisez le gestionnaire de packages NuGet (Tools (Outils) -> Library Package Manager (Gestionnaire de packages de bibliothèque) -> Package Manager Console (Console du gestionnaire de packages)) pour installer le Auth0.OidcClient.AndroidX
ou Auth0.OidcClient.iOS
, pour développer une application Android ou iOS.
Sinon, vous pouvez utiliser la Package Manager Console (Console du gestionnaire de packages) NuGet (Install-Package
) ou l'interface de ligne de commande dotnet
(dotnet add
).
Install-Package Auth0.OidcClient.AndroidX
+Auth0 propose une trousse SDK Android et iOS pour simplifier le processus d’implémentation de l’authentification Auth0 dans les applications .NET Android et iOS.
Utilisez le gestionnaire de packages NuGet (Tools (Outils) -> Library Package Manager (Gestionnaire de packages de bibliothèque) -> Package Manager Console (Console du gestionnaire de packages)) pour installer le package Auth0.OidcClient.AndroidX
ou Auth0.OidcClient.iOS
, pour développer une application Android ou iOS.
Sinon, vous pouvez utiliser la Console du gestionnaire de packages NuGet (Install-Package
) ou le dotnet
CLI (dotnet add
).
Install-Package Auth0.OidcClient.AndroidX
Install-Package Auth0.OidcClient.iOS
@@ -55,18 +55,18 @@ var client = new Auth0Client(new Auth0ClientOptions {
-Par défaut, la trousse SDK utilisera les onglets personnalisés Chrome pour Android et ASWebAuthenticationSession pour iOS.
Guixe rapide .NET Android/iOS - Étape 3 - Point de contrôle Votre Auth0Client
devrait maintenant être correctement instancié. Exécutez votre application pour vérifier que :
L’Auth0Client
est instancié correctement dans Activity
(Android) ou UIViewController
(iOS).
Votre application ne génère aucune erreur liée à Auth0.
+Par défaut, la trousse SDK utilisera les onglets personnalisés Chrome pour Android et ASWebAuthenticationSession pour iOS.
Démarrage rapide .NET Android/iOS - Étape 3 - Point de contrôle Votre Auth0Client
devrait maintenant être correctement instancié. Exécutez votre application pour vérifier que :
l’Auth0Client
est instancié correctement dans Activity
(Android) ou UIViewController
(iOS) ;
votre application ne génère aucune erreur liée à Auth0.
- Sorry about that. Here are a couple things to double-check:
make sure the correct application is selected
did you save after entering your URLs?
make sure the domain and client ID are imported correctly
Still having issues? Check out our documentation or visit our community page to get more help.
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
assurez-vous que la bonne application est sélectionnée
avez-vous procédé à un enregistrement après avoir saisi vos URL?
assurez-vous que le domaine et l’identifiant client sont importés correctement
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
## Configurer Android {{{ data-action="code" data-code="MainActivity.cs#2:9" }}}
-Une fois un utilisateur authentifié avec succès, il est redirigé vers la Callback URL que vous avez configurée précédemment dans ce guide rapide.
Pour gérer la fonction Callback sur les appareils Android, vous devez enregistrer une intention qui gère cette Callback URL. Une façon simple de le faire est d’enregistrer l’intention sur la même activité à partir de laquelle vous avez appelé la méthode LoginAsync pour instancier le flux d’authentification.
Assurez-vous de remplacer YOUR_ANDROID_PACKAGE_NAME
dans l’exemple de code par le nom réel du package de votre application, comme com.mycompany.myapplication
, et de vous assurer que tout le texte des champs DataScheme
, DataHost
et DataPathPrefix
est en majuscules. De plus, définissez LaunchMode = LaunchMode.SingleTask
pour l’activité; sinon, le système créera une nouvelle instance de l’activité chaque fois que la Callback URL est appelée.
De plus, vous devez gérer l’intention dans l’événement OnNewIntent
dans votre classe Activity
. Vous devez notifier le client OIDC Auth0 pour terminer le flux d’authentification en appelant la méthode Send
du singleton ActivityMediator
, en transférant l’URL qui a été envoyée.
protected override void OnNewIntent(Intent intent)
+Une fois un utilisateur authentifié avec succès, il est redirigé vers l’URL de rappel que vous avez configurée précédemment dans ce guide rapide.
Pour gérer la fonction Callback sur les appareils Android, vous devez enregistrer une intention qui gère cette URL de rappel. Une façon simple de le faire est d’enregistrer l’intention sur la même activité à partir de laquelle vous avez appelé la méthode LoginAsync pour instancier le flux d’authentification.
Assurez-vous de remplacer YOUR_ANDROID_PACKAGE_NAME
dans l’exemple de code par le nom réel du package de votre application, comme com.mycompany.myapplication
, et de vous assurer que tout le texte des champs DataScheme
, DataHostet
et DataPathPrefix
est en majuscules. De plus, définissez LaunchMode = LaunchMode.SingleTask
pour l’activité; sinon, le système créera une nouvelle instance de l’activité chaque fois que l’URL de rappel est appelée.
De plus, vous devez gérer l’intention dans l’événement OnNewIntent
dans votre classe Activity
. Vous devez notifier le client OIDC Auth0 pour terminer le flux d’authentification en appelant la méthode Send
du singleton ActivityMediator
, en transmettant l’URL qui a été envoyée.
protected override void OnNewIntent(Intent intent)
{
@@ -80,10 +80,10 @@ var client = new Auth0Client(new Auth0ClientOptions {
-## Configurer iOS {{{ data-action="code" data-code="AppDelegate.cs#6:11" }}}
+## Configurer iOS {{{ data-action="code" data-code="AppDelegate.cs#6:11" }}}
-Après qu’un utilisateur s’est authentifié avec succès, il est redirigé vers la Callback URL de rappel que vous avez configurée précédemment dans ce guide rapide.
Pour gérer le callback (rappel) sur les appareils iOS :
Ouvrez le fichier Info.plist
de votre application dans Visual Studio, puis accédez à l’onglet Advanced (Avancé) .
Sous URL Types (Types d'URL), cliquez sur le bouton Add URL Type (Ajouter le type d’URL).
Définissez Identifier (Identificateur) sur Auth0, les URL Schemes (Schémas d’URL) identiques à Bundle Identifier (Identificateur du bundle)
de votre application et le Role (Rôle) sur None (Aucun)
.
Voici un exemple de la représentation XML de votre fichier Info.plist
après avoir ajouté le type d’URL :
<key>CFBundleURLTypes</key>
+Une fois un utilisateur authentifié avec succès, il est redirigé vers l’URL de rappel que vous avez configurée précédemment dans ce guide rapide.
Pour gérer la callback sur les appareils iOS :
Ouvrez le fichier Info.plist
de votre application dans Visual Studio, puis accédez à l’onglet Advanced (Avancé).
Sous URL Types (Types d’URL), cliquez sur le bouton Add URL Type (Ajouter le type d’URL).
Définissez Identifier (Identificateur) sur Auth0, les URL Schemes (Schémas d’URL) identiques à Bundle IdentifierRole (Rôle)
Voici un exemple de la représentation XML de votre fichier Info.plist
après avoir ajouté le type d’URL :
<key>CFBundleURLTypes</key>
<array>
@@ -111,35 +111,35 @@ var client = new Auth0Client(new Auth0ClientOptions {
-De plus, vous devez gérer la Callback URL dans l’événement OpenUrl
dans votre classe AppDelegate
. Vous devez notifier le client OIDC Auth0 pour terminer le flux d’authentification en appelant la méthode Send
du singleton ActivityMediator
, en transmettant l’URL qui a été envoyée.
+De plus, vous devez gérer l’URL de rappel dans l’événement OpenUrl
dans votre classe AppDelegate
. Vous devez notifier le client OIDC Auth0 pour terminer le flux d’authentification en appelant la méthode Send
du singleton ActivityMediator
, en transmettant l’URL qui a été envoyée.
## Ajouter une fonctionnalité de connexion à votre application
-À présent que vous avez configuré votre application Auth0 et la trousse SDK Auth0, vous devez configurer la connexion pour votre projet. Pour ce faire, vous utiliserez la méthode LoginAsync()
de la trousse SDK pour créer un bouton de connexion qui redirige les utilisateurs vers la page de connexion universelle Auth0.
var loginResult = await client.LoginAsync();
+À présent que vous avez configuré votre application Auth0 et la trousse SDK Auth0, vous devez configurer la connexion pour votre projet. Pour ce faire, vous utiliserez la méthode LoginAsync()
de la trousse SDK pour créer un bouton de connexion qui redirige les utilisateurs vers la page de connexion universelle Auth0.
var loginResult = await client.LoginAsync();
-S’il n’y a pas d’erreur, vous pourrez accéder à User
, IdentityToken
, AccessToken
et RefreshToken
dans le LoginResult
renvoyé par LoginAsync()
.
Guide rapide .NET Android/iOS - Étape 6 - Point de contrôle Vous devez désormais pouvoir vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe.
Appuyez sur le bouton de connexion et vérifiez que :
Votre application Android ou iOS vous redirige vers la page de connexion universelle d’Auth0.
Vous pouvez vous connecter ou vous inscrire.
Auth0 vous redirige vers votre application.
+S’il n’y a pas d’erreur, vous pouvez accéder à User
, IdentityToken
, AccessToken
et RefreshToken
dans le LoginResult
renvoyé par LoginAsync()
.
Démarrage rapide .NET Android/iOS – Étape 6 – Point de contrôle Vous devez désormais pouvoir vous connecter ou vous inscrire en utilisant un nom d’utilisateur et un mot de passe.
Appuyez sur le bouton de connexion et vérifiez que :
Votre application Android ou iOS vous redirige vers la page de connexion universelle Auth0.
Vous pouvez vous connecter ou vous inscrire.
Auth0 vous redirige vers votre application.
- Sorry about that. Here's something to double-check:
you called LoginAsync
as expected
Still having issues? Check out our documentation or visit our community page to get more help.
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
vous avez appelé LoginAsync
comme prévu
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
## Ajouter une fonctionnalité de déconnexion à votre application
-Les utilisateurs qui se connectent à votre projet auront également besoin d’un moyen de se déconnecter. Créez un bouton de déconnexion en utilisant la méthode LogoutAsync()
de la trousse SDK. Lorsque les utilisateurs se déconnecteront, ils seront redirigés vers votre point de terminaison de déconnexion Auth0, qui par la suite les redirigera immédiatement vers l’URL de déconnexion que vous avez configurée précédemment dans ce guide rapide.
await client.LogoutAsync();
+Les utilisateurs qui se connectent à votre projet auront également besoin d’un moyen de se déconnecter. Créez un bouton de déconnexion en utilisant la méthode LogoutAsync()
de la trousse SDK. Lorsque les utilisateurs se déconnectent, ils seront redirigés vers votre point de terminaison de déconnexion Auth0, qui par la suite les redirigera immédiatement vers l’URL de déconnexion que vous avez configurée précédemment dans ce démarrage rapide.
await client.LogoutAsync();
-Guide rapide .NET Android/iOS - Étape 7 - Point de contrôle Exécutez votre application et cliquez sur le bouton de déconnexion. Vérifiez que :
Votre application Android ou iOS vous redirige vers l’adresse que vous avez spécifiée comme l’une des URL de déconnexion autorisées dans les paramètres de votre application.
Vous n’êtes plus connecté à votre application.
+Guide rapide .NET Android/iOS - Étape 7 - Point de contrôle Exécutez votre application et cliquez sur le bouton de déconnexion. Veuillez vérifiez que :
Votre application Android ou iOS vous redirige vers l’adresse que vous avez spécifiée comme l’une des URL de déconnexion autorisées dans les paramètres de votre application.
Vous n’êtes plus connecté à votre application.
- Sorry about that. Here are a couple things to double-check:
you configured the correct Logout URL
you called LogoutAsync
as expected.
Still having issues? Check out our documentation or visit our community page to get more help.
+ Nous vous prions de nous excuser pour tout inconvénient causé. Voici quelques éléments à vérifier :
vous avez configuré la bonne URL de déconnexion
vous avez appelé LogoutAsync
comme prévu
Vous rencontrez toujours des problèmes? Consultez notre documentation ou la page de notre communauté pour obtenir de l’aide.
diff --git a/fr-ca/articles/quickstart/native/react-native-expo/files/app.md b/fr-ca/articles/quickstart/native/react-native-expo/files/app.md
index 881d165b50..2812a72d51 100644
--- a/fr-ca/articles/quickstart/native/react-native-expo/files/app.md
+++ b/fr-ca/articles/quickstart/native/react-native-expo/files/app.md
@@ -1,41 +1,49 @@
---
-name: App.js
-language: javascript
+name: app.json
+language: json
---
-```javascript
-import {useAuth0, Auth0Provider} from 'react-native-auth0';
-
-const Home = () => {
- const {authorize, clearSession, user, error, isLoading} = useAuth0();
-
- const onLogin = async () => {
- try {
- await authorize();
- } catch (e) {
- console.log(e);
+```json
+{
+ "expo": {
+ "name": "00-Login-Expo",
+ "slug": "00-Login-Expo",
+ "version": "1.0.0",
+ "orientation": "portrait",
+ "icon": "./assets/icon.png",
+ "userInterfaceStyle": "light",
+ "plugins": [
+ [
+ "react-native-auth0",
+ {
+ "domain": "${account.namespace}",
+ }
+ ]
+ ],
+ "splash": {
+ "image": "./assets/splash.png",
+ "resizeMode": "contain",
+ "backgroundColor": "#ffffff"
+ },
+ "updates": {
+ "fallbackToCacheTimeout": 0
+ },
+ "assetBundlePatterns": [
+ "**/*"
+ ],
+ "web": {
+ "favicon": "./assets/favicon.png"
+ },
+ "android": {
+ "package": "com.auth0samples"
+ },
+ "ios": {
+ "bundleIdentifier": "com.auth0samples"
}
- };
-
- const onLogout = async () => {
- try {
- await clearSession();
- } catch (e) {
- console.log('Log out cancelled');
- }
- };
-
- if (isLoading) {
- return Loading ;
}
-
- const loggedIn = user !== undefined && user !== null;
-
- return (
-
- {loggedIn && You are logged in as {user.name} }
- {!loggedIn && You are not logged in }
- {error && {error.message} }
+}
+```
+r && {error.message} }
+
-
+
-
+
-
+
-