I18n implementation

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

@@ -0,0 +1,12 @@
+---
+name: auth_config.json
+language: json
+---
+
+```json
+//auth0-react-samples/Sample-01/src/auth_config.json
+{
+  "domain": "${account.namespace}",
+  "clientId": "${account.clientId}"
+}
+```

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

@@ -0,0 +1,47 @@
+---
+name: index.tsx
+language: javascript
+---
+
+```javascript
+import { LoginId } from '@auth0/auth0-acul-js';
+import { useState } from 'react';
+
+export const LoginIdScreen = () => {
+  const loginManager = new LoginId();
+  const [email, setEmail] = useState('');
+
+  return (
+    <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">
+      <div className="max-w-md w-full space-y-6 bg-white p-8 rounded-lg shadow-md">
+        <input
+          type="email"
+          placeholder="Enter your email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          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"
+        />
+
+        <button 
+          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"
+          onClick={() => loginManager.login({ username: email })}
+        >
+          Continue
+        </button>
+
+        {loginManager.transaction.alternateConnections?.map(({ name, strategy }) => (
+          <button
+            key={name}
+            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"
+            onClick={() => loginManager.socialLogin({ connection: name })}
+          >
+            Continue with {strategy}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default LoginIdScreen
+```

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

@@ -0,0 +1,34 @@
+---
+name: settings.json
+language: json
+---
+
+```json
+{
+  "rendering_mode": "advanced",
+  "context_configuration": [
+    "screen.texts"
+  ],
+  "default_head_tags_disabled": false,
+  "head_tags": [
+    {
+      "attributes": {
+        "async": true,
+        "defer": true,
+        "integrity": [
+          "ASSET_SHA"
+        ],
+        "src": "http://127.0.0.1:8080/index.js"
+      },
+      "tag": "script"
+    },
+    {
+      "attributes": {
+        "href": "http://127.0.0.1:8080/index.css",
+        "rel": "stylesheet"
+      },
+      "tag": "link"
+    }
+  ]
+}
+```

articles/quickstart/backend/acul/index.yml

@@ -0,0 +1,45 @@
+title: Build a Login ID screen using ACUL
+logo: auth0
+thirdParty: false
+languages:
+  - JavaScript
+author:
+  name: Auth0 Team
+  email: [email protected]
+  community: false
+topics:
+  - quickstart
+contentType: tutorial
+useCase: quickstart
+snippets:
+  dependencies: quickstart/acul/dependencies
+  setup: quickstart/acul/setup
+  use: quickstart/acul/use
+articles:
+  - interactive
+default_article: interactive
+show_steps: true
+github:
+  org: auth0-samples
+  repo: auth0-react-samples
+sdk:
+  name: auth0-acul-js
+  url: https://github.com/auth0/universal-login
+  logo: auth0
+requirements:
+  - auth0-acul-js 1.0.0
+next_steps:
+  - path: interactive
+    list:
+    - text: Configure other identity providers
+      icon: 345
+      href: "/identityproviders"
+    - text: Enable multifactor authentication
+      icon: 345
+      href: "/multifactor-authentication"
+    - text: Learn about attack protection
+      icon: 345
+      href: "/attack-protection"
+    - text: Learn about rules
+      icon: 345
+      href: "/rules"

articles/quickstart/backend/acul/interactive.md

@@ -0,0 +1,115 @@
+---
+title: Build a Login ID screen using ACUL
+description: Learn how to build a Login screen using ACUL
+interactive:  true
+files:
+ - files/settings
+ - files/auth_config
+ - files/index
+github:
+  path: https://github.com/auth0-samples/auth0-react-samples/tree/master/Sample-01
+locale: en-US
+---
+
+# Build a Login ID screen using ACUL
+
+
+<p>`</p>
+
+## Configure Auth0
+
+
+<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>
+
+## Configure ACUL for Login ID screen {{{ data-action="code" data-code="settings.json" }}}
+
+
+<p>Use <a href="https://github.com/auth0/auth0-cli">Auth0 CLI</a> to enable ACLU Login ID screen in your tenant. 
+
+
+
+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
+
+</code></pre>
+
+</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>
+
+## Initiate Universal Login {{{ data-action="code" data-code="auth_config.json" }}}
+
+
+<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:
+
+
+
+<pre><code class="language-powershell">git clone https://github.com/auth0-samples/auth0-react-samples
+
+</code></pre>
+
+</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
+
+npm install
+
+</code></pre>
+
+</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
+
+</code></pre>
+
+</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>
+
+  <div class="checkpoint-success"></div>
+
+  <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>
+
+  </div>
+
+</p><p>
+
+ </p><p>
+
+</p><p></p>
+
+## Build a custom interface for login-id screen {{{ data-action="code" data-code="index.tsx" }}}
+
+
+<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-javascript">git clone https://github.com/auth0-samples/auth0-acul-react-boilerplate
+
+</code></pre>
+
+</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
+
+cd auth0-acul-react-boilerplate &amp;&amp; npm i
+
+
+
+// Install the ACUL JS SDK
+
+npm install @auth0/auth0-acul-js
+
+</code></pre>
+
+</p><p>3. Build the application</p><p><pre><code class="language-powershell">npm run build
+
+</code></pre>
+
+</p><p>4. Serve the assets</p><p><pre><code class="language-javascript">npx http-server dist -p 8080
+
+</code></pre>
+
+</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>
+
+  <div class="checkpoint-success"></div>
+
+  <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>
+
+  </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
+
+</code></pre>
+
+</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>
+
+  <div class="checkpoint-success"></div>
+
+  <div class="checkpoint-failure"></div>
+
+  </div></p>

articles/quickstart/backend/aspnet-core-webapi/files/ApiController.md

@@ -0,0 +1,30 @@
+---
+name: ApiController.cs
+language: csharp
+---
+
+```csharp
+[Route("api")]
+public class ApiController : Controller
+{
+    [HttpGet("private")]
+    [Authorize]
+    public IActionResult Private()
+    {
+        return Ok(new
+        {
+            Message = "Hello from a private endpoint!"
+        });
+    }
+
+    [HttpGet("private-scoped")]
+    [Authorize("read:messages")]
+    public IActionResult Scoped()
+    {
+        return Ok(new
+        {
+            Message = "Hello from a private-scoped endpoint!"
+        });
+    }
+}
+```

articles/quickstart/backend/aspnet-core-webapi/files/HasScopeHandler.md

@@ -0,0 +1,28 @@
+---
+name: HasScopeHandler.cs
+language: csharp
+---
+
+```csharp
+public class HasScopeHandler : AuthorizationHandler<HasScopeRequirement>
+{
+  protected override Task HandleRequirementAsync(
+    AuthorizationHandlerContext context,
+    HasScopeRequirement requirement
+  ) {
+    // If user does not have the scope claim, get out of here
+    if (!context.User.HasClaim(c => c.Type == "scope" && c.Issuer == requirement.Issuer))
+      return Task.CompletedTask;
+
+    // Split the scopes string into an array
+    var scopes = context.User
+      .FindFirst(c => c.Type == "scope" && c.Issuer == requirement.Issuer).Value.Split(' ');
+
+    // Succeed if the scope array contains the required scope
+    if (scopes.Any(s => s == requirement.Scope))
+      context.Succeed(requirement);
+
+    return Task.CompletedTask;
+  }
+}
+```

articles/quickstart/backend/aspnet-core-webapi/files/HasScopeRequirement.md

@@ -0,0 +1,18 @@
+---
+name: HasScopeRequirement.cs
+language: csharp
+---
+
+```csharp
+public class HasScopeRequirement : IAuthorizationRequirement
+{
+    public string Issuer { get; }
+    public string Scope { get; }
+
+    public HasScopeRequirement(string scope, string issuer)
+    {
+        Scope = scope ?? throw new ArgumentNullException(nameof(scope));
+        Issuer = issuer ?? throw new ArgumentNullException(nameof(issuer));
+    }
+}
+```

articles/quickstart/backend/aspnet-core-webapi/files/Program.md

@@ -0,0 +1,35 @@
+---
+name: Program.cs
+language: csharp
+---
+
+```csharp
+var builder = WebApplication.CreateBuilder(args);
+builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
+.AddJwtBearer(options =>
+{
+    options.Authority = $"https://{builder.Configuration["Auth0:Domain"]}/";
+    options.Audience = builder.Configuration["Auth0:Audience"];
+    options.TokenValidationParameters = new TokenValidationParameters
+    {
+        NameClaimType = ClaimTypes.NameIdentifier
+    };
+});
+
+    builder.Services
+      .AddAuthorization(options =>
+      {
+          options.AddPolicy(
+            "read:messages",
+            policy => policy.Requirements.Add(
+              new HasScopeRequirement("read:messages", domain)
+            )
+          );
+      });
+
+    builder.Services.AddSingleton<IAuthorizationHandler, HasScopeHandler>();
+
+var app = builder.Build();
+app.UseAuthentication();
+app.UseAuthorization();
+```

articles/quickstart/backend/aspnet-core-webapi/files/appsettings.md

@@ -2,7 +2,7 @@
 name: appsettings.json
 language: json
 ---
-
+    
 ```json
 {
   "Auth0": {