Skip to content

Commit 3b9cec9

Browse files
authored
signing the commit updating-interactive-quickstarts (#10525)
1 parent 1fa7a03 commit 3b9cec9

File tree

143 files changed

+5157
-2053
lines changed

Some content is hidden

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

143 files changed

+5157
-2053
lines changed

articles/quickstart/backend/acul/interactive.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ files:
77
- files/auth_config
88
- files/index
99
github:
10-
path: https://github.com/auth0-samples/auth0-react-samples/tree/master/Sample-01
10+
path: Sample-01
1111
locale: en-US
1212
---
1313

@@ -19,12 +19,12 @@ locale: en-US
1919
## Configure Auth0
2020

2121

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>
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/#/" target="_blank" rel="noreferrer noopener">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>
2323

2424
## Configure ACUL for Login ID screen {{{ data-action="code" data-code="settings.json" }}}
2525

2626

27-
<p>Use <a href="https://github.com/auth0/auth0-cli">Auth0 CLI</a> to enable ACLU Login ID screen in your tenant.
27+
<p>Use <a href="https://github.com/auth0/auth0-cli" target="_blank" rel="noreferrer noopener">Auth0 CLI</a> to enable ACLU Login ID screen in your tenant.
2828

2929

3030

@@ -55,7 +55,7 @@ npm install
5555

5656
</code></pre>
5757

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>
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/" target="_blank" rel="noreferrer noopener">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>
5959

6060
<div class="checkpoint-success"></div>
6161

@@ -76,7 +76,7 @@ npm install
7676

7777
</code></pre>
7878

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
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" target="_blank" rel="noreferrer noopener">ACUL JS SDK</a>.</p><p><pre><code class="language-javascript">// open the directory where you git clone the boilerplate
8080

8181
cd auth0-acul-react-boilerplate &amp;&amp; npm i
8282

@@ -100,7 +100,7 @@ npm install @auth0/auth0-acul-js
100100

101101
<div class="checkpoint-success"></div>
102102

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>
103+
<div class="checkpoint-failure"><p>Make sure to have installed the <a href="https://github.com/auth0/universal-login" target="_blank" rel="noreferrer noopener">ACUL JS SDK</a> after installing the boilerplate application.</p></div>
104104

105105
</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
106106

0 commit comments

Comments
 (0)