Skip to content

Commit 337c03c

Browse files
harishsundar-oktaharishsundar-okta
authored
Adding ja-jp and fr-ca folders (#10486)
* Adding ja-jp and fr-ca folders * Updated .yml for non-interactive QS * updated yml files for ja-jp and fr-ca * adding acul quickstart * moving acul to en articles * updating sidebar values for apis section (i18n)
1 parent 1de7edb commit 337c03c

File tree

4,402 files changed

+325831
-6
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

4,402 files changed

+325831
-6
lines changed

‎.github/workflows/integration-tests.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ concurrency:
1010
jobs:
1111
tests:
1212
name: Trigger Tests
13-
runs-on: ubuntu-22.04-2cpu-8ram-75ssd
13+
runs-on: ubuntu-latest
1414
steps:
1515
- name: Check out code
1616
uses: actions/checkout@v2

‎articles/quickstart/backend/acul/files/auth_config.md

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
name: auth_config.json
3+
language: json
4+
---
5+
6+
```json
7+
//auth0-react-samples/Sample-01/src/auth_config.json
8+
{
9+
"domain": "${account.namespace}",
10+
"clientId": "${account.clientId}"
11+
}
12+
```

‎articles/quickstart/backend/acul/files/index.md

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
name: index.tsx
3+
language: javascript
4+
---
5+
6+
```javascript
7+
import { LoginId } from '@auth0/auth0-acul-js';
8+
import { useState } from 'react';
9+
10+
export const LoginIdScreen = () => {
11+
const loginManager = new LoginId();
12+
const [email, setEmail] = useState('');
13+
14+
return (
15+
<div className="w-[100vw] min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8">
16+
<div className="max-w-md w-full space-y-6 bg-white p-8 rounded-lg shadow-md">
17+
<input
18+
type="email"
19+
placeholder="Enter your email"
20+
value={email}
21+
onChange={(e) => setEmail(e.target.value)}
22+
className="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
23+
/>
24+
25+
<button
26+
className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-black bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
27+
onClick={() => loginManager.login({ username: email })}
28+
>
29+
Continue
30+
</button>
31+
32+
{loginManager.transaction.alternateConnections?.map(({ name, strategy }) => (
33+
<button
34+
key={name}
35+
className="w-full flex justify-center py-2 px-4 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
36+
onClick={() => loginManager.socialLogin({ connection: name })}
37+
>
38+
Continue with {strategy}
39+
</button>
40+
))}
41+
</div>
42+
</div>
43+
);
44+
};
45+
46+
export default LoginIdScreen
47+
```

‎articles/quickstart/backend/acul/files/settings.md

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
name: settings.json
3+
language: json
4+
---
5+
6+
```json
7+
{
8+
"rendering_mode": "advanced",
9+
"context_configuration": [
10+
"screen.texts"
11+
],
12+
"default_head_tags_disabled": false,
13+
"head_tags": [
14+
{
15+
"attributes": {
16+
"async": true,
17+
"defer": true,
18+
"integrity": [
19+
"ASSET_SHA"
20+
],
21+
"src": "http://127.0.0.1:8080/index.js"
22+
},
23+
"tag": "script"
24+
},
25+
{
26+
"attributes": {
27+
"href": "http://127.0.0.1:8080/index.css",
28+
"rel": "stylesheet"
29+
},
30+
"tag": "link"
31+
}
32+
]
33+
}
34+
```

‎articles/quickstart/backend/acul/index.yml

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
title: Build a Login ID screen using ACUL
2+
logo: auth0
3+
thirdParty: false
4+
languages:
5+
- JavaScript
6+
author:
7+
name: Auth0 Team
8+
email: [email protected]
9+
community: false
10+
topics:
11+
- quickstart
12+
contentType: tutorial
13+
useCase: quickstart
14+
snippets:
15+
dependencies: quickstart/acul/dependencies
16+
setup: quickstart/acul/setup
17+
use: quickstart/acul/use
18+
articles:
19+
- interactive
20+
default_article: interactive
21+
show_steps: true
22+
github:
23+
org: auth0-samples
24+
repo: auth0-react-samples
25+
sdk:
26+
name: auth0-acul-js
27+
url: https://github.com/auth0/universal-login
28+
logo: auth0
29+
requirements:
30+
- auth0-acul-js 1.0.0
31+
next_steps:
32+
- path: interactive
33+
list:
34+
- text: Configure other identity providers
35+
icon: 345
36+
href: "/identityproviders"
37+
- text: Enable multifactor authentication
38+
icon: 345
39+
href: "/multifactor-authentication"
40+
- text: Learn about attack protection
41+
icon: 345
42+
href: "/attack-protection"
43+
- text: Learn about rules
44+
icon: 345
45+
href: "/rules"

‎articles/quickstart/backend/acul/interactive.md

+115
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
title: Build a Login ID screen using ACUL
3+
description: Learn how to build a Login screen using ACUL
4+
interactive: true
5+
files:
6+
- files/settings
7+
- files/auth_config
8+
- files/index
9+
github:
10+
path: https://github.com/auth0-samples/auth0-react-samples/tree/master/Sample-01
11+
locale: en-US
12+
---
13+
14+
# Build a Login ID screen using ACUL
15+
16+
17+
<p></p>
18+
19+
## Configure Auth0
20+
21+
22+
<p>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.</p><h3>Configure an application</h3><p>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.</p><p>Any settings you configure using this quickstart will automatically update for your Application in the <a href="https://manage.auth0.com/#/">Dashboard</a>, which is where you can manage your Applications in the future.</p><p>If you would rather explore a complete configuration, you can view a sample application instead.</p><h3>Configure Callback URLs</h3><p>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.</p><p><div class="alert-container" severity="default"><p>If you are following along with our sample project, set this to <code>http://localhost:3000</code>.</p></div></p><h3>Configure Logout URLs</h3><p>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.</p><p><div class="alert-container" severity="default"><p>If you are following along with our sample project, set this to <code>http://localhost:3000</code>.</p></div></p><h3>Configure Allowed Web Origins</h3><p>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.</p><p><div class="alert-container" severity="default"><p>If you are following along with our sample project, set this to <code>http://localhost:3000</code>.</p></div></p>
23+
24+
## Configure ACUL for Login ID screen {{{ data-action="code" data-code="settings.json" }}}
25+
26+
27+
<p>Use <a href="https://github.com/auth0/auth0-cli">Auth0 CLI</a> to enable ACLU Login ID screen in your tenant.
28+
29+
30+
31+
In the root directory of your project, save the settings.json file.</p><p>Enable ACUL by running the following command in your terminal:</p><p><code></code><pre><code class="language-powershell">auth0 ul customize --rendering-mode advanced --prompt login-id --screen login-id --settings-file ./settings.json
32+
33+
</code></pre>
34+
35+
</p><p><div class="alert-container" severity="default"><p><b>Development Setup</b>: This example is using localhost (127.0.0.1:8080) for development. </p><p>For production, you will need to update these URLs to point to your CDN or static hosting service.</p></div></p>
36+
37+
## Initiate Universal Login {{{ data-action="code" data-code="auth_config.json" }}}
38+
39+
40+
<p>Use one of the sample apps provided by Auth0 to initiate Universal Login</p><p>In the root folder of your project, clone the Auth0 sample application using the following command:
41+
42+
43+
44+
<pre><code class="language-powershell">git clone https://github.com/auth0-samples/auth0-react-samples
45+
46+
</code></pre>
47+
48+
</p><p>Change directory to the <code>auth0-react-samples/Sample-01 </code>folder and install the sample application using the following command:</p><p><pre><code class="language-powershell">cd auth0-react-samples/Sample-01
49+
50+
npm install
51+
52+
</code></pre>
53+
54+
</p><p>Change directory to the <code>auth0-react-samples/Sample-01/src</code> folder and add the <code>auth_config.json</code> file. Edit the file to add your tenant&#39;s Custom Domain.</p><p>Run the application</p><p><pre><code class="language-powershell">npm run dev
55+
56+
</code></pre>
57+
58+
</p><p><div class="checkpoint">ACUL Login ID screen Step 2 - Checkpoint <div class="checkpoint-default"><ol><li><p>Open your application (default: <a href="http://localhost:3000/">http://localhost:3000</a>)</p></li><li><p>Select the <b>Log In</b> button on the sample app</p></li><li><p>You should be redirected to your Auth0 domain</p></li></ol><p>After selecting <b>Log In</b>, you should see a blank page. </p><p>This is expected! It means Auth0 is trying to load your custom UI assets, which we have not created yet. </p></div>
59+
60+
<div class="checkpoint-success"></div>
61+
62+
<div class="checkpoint-failure"><p>If you see the default Auth0 page instead of a blank page:</p><ol><li><p>Check if your custom domain is properly configured.</p></li><li><p>Ensure your application is using the custom domain.</p></li></ol><p></p></div>
63+
64+
</div>
65+
66+
</p><p>
67+
68+
</p><p>
69+
70+
</p><p></p>
71+
72+
## Build a custom interface for login-id screen {{{ data-action="code" data-code="index.tsx" }}}
73+
74+
75+
<p>Run a single-page application to build custom login screens. </p><h3>Configure the Boilerplate application</h3><p>1. In the root folder of your project, open a new terminal and clone the Auth0 boilerplate application using the following command:</p><p><pre><code class="language-powershell">git clone https://github.com/auth0-samples/auth0-react-samples
76+
77+
</code></pre>
78+
79+
</p><p>2. Change directory to the <code>auth0-acul-react-boilerplate</code> folder and install the application and the <a href="https://github.com/auth0/universal-login">ACUL JS SDK</a>.</p><p><pre><code class="language-javascript">// open the directory where you git clone the boilerplate
80+
81+
cd auth0-acul-react-boilerplate &amp;&amp; npm i
82+
83+
84+
85+
// Install the ACUL JS SDK
86+
87+
npm install @auth0/auth0-acul-js
88+
89+
</code></pre>
90+
91+
</p><p>3. Build the application</p><p><pre><code class="language-powershell">npm run build
92+
93+
</code></pre>
94+
95+
</p><p>4. Serve the assets</p><p><pre><code class="language-javascript">npx http-server dist -p 8080
96+
97+
</code></pre>
98+
99+
</p><p><div class="alert-container" severity="default"><p>The assets are served from localhost during development. </p><p>For production, you&#39;ll need to serve these assets from a CDN or static hosting service.</p></div></p><p><div class="checkpoint">ACUL Login ID screen quickstart step 4 checkpoint <div class="checkpoint-default"><p>After selecting <b>Log In</b>, you are greeted with a <code>“Hello World”</code> page. </p></div>
100+
101+
<div class="checkpoint-success"></div>
102+
103+
<div class="checkpoint-failure"><p>Make sure to have installed the <a href="https://github.com/auth0/universal-login">ACUL JS SDK</a> after installing the boilerplate application.</p></div>
104+
105+
</div></p><h3>Build the ACUL Login ID screen </h3><p>Change directory to the <code>auth0-acul-react-boilerplate/src/screens/loginId/ </code>and edit the <code>index.tsx</code> file.</p><p>Rebuild the application with the following command:</p><p><pre><code class="language-powershell">npm run build
106+
107+
</code></pre>
108+
109+
</p><p><div class="checkpoint">ACUL Login ID screen quickstart step 4 rebuild the app checkpoint <div class="checkpoint-default"><p>Select <b>Log In</b>. </p><p>You should now see a customized login page as shown below:</p><img src="//images.ctfassets.net/cdy7uua7fh8z/1RGhZSvF6omC3hH5ewzqQO/6ccb62962617d84cede8795d8ee3979d/Screenshot_2025-02-12_at_14.37.25.png" alt="" /><p></p></div>
110+
111+
<div class="checkpoint-success"></div>
112+
113+
<div class="checkpoint-failure"></div>
114+
115+
</div></p>

‎articles/quickstart/native/android-facebook-login/index.yml

+2
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@ snippets:
2828
default_article: 00-login-facebook
2929
articles:
3030
- 00-login-facebook
31+
hidden_articles:
32+
- interactive
3133
next_steps:
3234
- path: 00-login-facebook
3335
list:

‎articles/quickstart/native/device/index.yml

+2
Original file line numberDiff line numberDiff line change
@@ -21,4 +21,6 @@ seo_alias: device
2121
default_article: 01-login
2222
articles:
2323
- 01-login
24+
hidden_articles:
25+
- interactive
2426
show_steps: false

‎articles/quickstart/native/windows-uwp-csharp/index.yml

+2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@ seo_alias: windows-uwp-csharp
2424
default_article: 01-login
2525
articles:
2626
- 01-login
27+
hidden_articles:
28+
- interactive
2729
show_steps: true
2830
github:
2931
org: auth0-samples

‎articles/quickstart/webapp/apache/index.yml

+2
Original file line numberDiff line numberDiff line change
@@ -14,5 +14,7 @@ seo_alias: apache
1414
default_article: 01-login
1515
articles:
1616
- 01-login
17+
hidden_articles:
18+
- interactive
1719
contentType: tutorial
1820
useCase: quickstart

‎articles/quickstart/webapp/java-ee/index.yml

+2
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,8 @@ useCase: quickstart
2121
seo_alias: java ee
2222
articles:
2323
- 01-login
24+
hidden_articles:
25+
- interactive
2426
default_article: 01-login
2527
show_steps: true
2628
github:

‎articles/quickstart/webapp/nginx-plus/index.yml

+2
Original file line numberDiff line numberDiff line change
@@ -18,5 +18,7 @@ seo_alias: nginx
1818
default_article: 01-login
1919
articles:
2020
- 01-login
21+
hidden_articles:
22+
- interactive
2123
contentType: tutorial
2224
useCase: quickstart

‎config/included-folders.yml

+2
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
- /articles/api/authorization-extension
33
- /articles/microsites
44
- /articles/quickstart
5+
- /fr-ca/articles/quickstart
6+
- /ja-jp/articles/quickstart
57
- /articles/_includes
68
- /snippets
79
- /updates

‎config/sidebar.yml

+5-5
Original file line numberDiff line numberDiff line change
@@ -1475,20 +1475,20 @@ articles:
14751475
forceFullReload: true
14761476
url: 'https://auth0.com/blog/'
14771477
apis:
1478-
- title: Overview
1478+
- title: overview
14791479
url: /api
1480-
- title: Testing with Postman
1480+
- title: testingWithPostman
14811481
url: /api/use-auth0-apis-with-postman-collections
14821482
hidden: true
1483-
- title: Authentication API
1483+
- title: authenticationApi
14841484
url: /api/authentication
14851485
external: true
14861486
forceFullReload: true
1487-
- title: Changes in Management API v2
1487+
- title: changesInManagementApiV2
14881488
url: /api/management-api-changes-v1-to-v2
14891489
forceFullReload: true
14901490
hidden: true
1491-
- title: Management API Explorer
1491+
- title: managementApiExplorer
14921492
url: /api/management/v2/
14931493
forceFullReload: true
14941494
external: true

‎fr-ca/articles/_includes/_api-auth-customize-tokens.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
You can use [Rules](/rules) to change the returned scopes of the Access Token and/or add claims to it (and the ID Token) with a script like this:
2+
3+
```javascript
4+
function(user, context, callback) {
5+
6+
// add custom claims to Access Token and ID Token
7+
context.accessToken['http://foo/bar'] = 'value';
8+
context.idToken['http://fiz/baz'] = 'some other value';
9+
10+
// change scope
11+
context.accessToken.scope = ['array', 'of', 'strings'];
12+
13+
callback(null, user, context);
14+
}
15+
```
16+
17+
::: panel-warning Namespacing Custom Claims
18+
Auth0 returns profile information in a [structured claim format as defined by the OpenID Connect (OIDC) specification](https://openid.net/specs/openid-connect-core-1_0.html#StandardClaims). This means that in order to add custom claims to ID Tokens or Access Tokens, they must [conform to a namespaced format](/tokens/guides/create-namespaced-custom-claims) to avoid possible collisions with standard OIDC claims. You can [add namespaced claims using Rules](#optional-customize-the-tokens).
19+
:::

‎fr-ca/articles/_includes/_api_auth_intro.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
::: note
2+
**New to Auth0?** Learn [how Auth0 works](/overview) and read about [implementing API authentication and authorization ](/api-auth) using the OAuth 2.0 framework.
3+
:::

‎fr-ca/articles/_includes/_boxed.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div class="boxed">
2+
<h3 class="title">
3+
<a href="#" class="feature">
4+
<span class="section-name">Logs</span>
5+
</a>
6+
</h3>
7+
<ul class="list clearfix">
8+
<div class="clearfix">
9+
<li data-toggle="popover" class="info" title="">Review the logged data of both actions taken in the dashboard by the administrators, as well as authentications made by your users.</li>
10+
<li data-toggle="popover" class="info" title="">Facilitate diagnosis and resolution of authentication issues.</li>
11+
</div>
12+
<div class="clearfix">
13+
<li data-toggle="popover" class="info" title="">Longer Storage of log data for your apps.</li>
14+
</div>
15+
</ul>
16+
<p class="log-retention-notice">Your current subscription allows to keep your logs for the last <span class="archive-days">30</span> days.</p>
17+
</div>

0 commit comments

Comments
 (0)