# Auth0

### Introduction

[Auth0](https://auth0.com/) offers a versatile, ready-to-use solution for integrating authentication and authorization services into your applications.

Auth0 facilitates simplified authentication for users. Instead of having to log in separately to each individual application or platform, users can enter their credentials once and subsequently be authenticated across multiple websites or applications.

The following diagram shows the authentication and authorization flow:

<figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-0319d76c8171777451e4ff0f3a249244628a1589%2Fauth.svg?alt=media" alt=""><figcaption></figcaption></figure>

### Features

| Features                              | Description                                                                                                           |
| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
| **Universal login**                   | A customizable login experience that supports various identity providers.                                             |
| **Social identity providers**         | Integration with popular social platforms for authentication, including Google, Facebook, Twitter, Twitch and others. |
| **Multi-factor authentication (MFA)** | Enhances security by supporting multiple authentication factors, such as SMS, email, or authenticator apps.           |
| **Log streaming**                     | Provides logs and monitoring capabilities to track authentication and authorization events for auditing and analysis. |

### Setting up the Auth0 account

To set up the account:

1. Register your account at [Auth0](https://auth0.com/).
2. When your account is created, go to the **Getting Started** section and choose **Create Application**.

<figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-296c881fcb03bbe9d90dccb628df65443700c7d0%2Fauth1.png?alt=media" alt=""><figcaption></figcaption></figure>

3. Provide the application name and select **Single Page Web Applications**.

<figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-9934d7a1a87f7b7a2a0b31c6677f05eee245268c%2Fauth2.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

4. Choose **Create**.
5. When the application is created, provide the following application details to Emporix: domain, client ID, client secret, certificate and redirect URL.

   * You can find the **Domain**, **Client ID** and **Client Secret** in the **Settings** tab.

   <figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-ce0510a0f824e26c75d5cba646fe76b699848a81%2Fauth3.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

   * For the certificate go to the bottom of the **Settings** tab where you can find **Advanced Settings**. Expand the section, go to **Certificates** and copy the value of the **Signing Certificate**.

   <figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-d63b984c462ec351892a3d410c95022c8f27c254%2Fauth4.png?alt=media" alt="" width="563"><figcaption></figcaption></figure>

   * **Redirect URL** is the URL of your storefront where the user is redirected after the Auth0 process.

   When you provide the values, the configuration is now done on the Emporix side. Wait for the confirmation from us that this part is ready.
6. When the configuration is ready, you need to configure the allowed-origins and callbacks URL. Go to the **Settings** tab in you Auth0 account and enter the values in the **Application URIs** section. The values should point to your storefront, for example:

   * **Allowed Callback URLs** - <https://storefront.emporix.io/auth0>
   * **Allowed Logout URLs** - <https://storefront.emporix.io>
   * **Allowed Web Origins** - <https://storefront.emporix.io/auth0>

   <figure><img src="https://3057647601-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FbTY7EwZtYYQYC6GOcdTj%2Fuploads%2Fgit-blob-72871c01bd5f533efd0dce555df34f2d65acd309%2Fauth5.png?alt=media" alt="" width="434"><figcaption></figcaption></figure>

### Storefront implementation

To set up your storefront:

1. To redirect the user to Auth0 page, add a login button to the login page:

```json

<button className="w-full h-12 social-login-btn"
    onClick={() => {window.location.href=`${AUTH0_DOMAIN}/authorize?response_type=code&scope=profile email openid offline_access&client_id=${AUTH0_CLIENT_ID}&redirect_uri=${REDIRECT_URI}`}}
>
  <img src="https://cdn.auth0.com/styleguide/components/1.0.8/media/logos/img/badge.png" width="32"/>
  <span className='social-login-btn-label'>Social Login</span> 
</button>

```

* AUTH0\_DOMAIN - is the Domain value from the **Settings** tab in your Auht0 account
* AUTH0\_CLIENT\_ID - is the Client ID value from the **Settings** tab in your Auht0 account
* REDIRECT\_URI - is the value provided in the **Application URI** in the **Settings** tab in your Auth0 account, it should point to a place where user is redirected after the authentication flow

2. When user finishes the auth flow, Auth0 redirects the user to the URL provided in REDIRECT\_URI parameter. It adds an additional query parameter called `code`. Having the code value, you need to invoke Emporix API to exchange the Auth0 code with the Emporix token. Apart from the CODE value, you also need Emporix ${ANONYMOUS\_TOKEN}.

{% hint style="info" %}
To check how to obtain the anonymous token from Emporix, check the [Customer Service (Customer Managed)](https://app.gitbook.com/s/d4POTWomuSS7d3dnh4Dg/api-guides/companies-and-customers/customer-management/api-reference/authentication-and-authorization) documentation.
{% endhint %}

When you have the two values, invoke the following API:

```json
curl --location --request POST 'https://api.emporix.io/customer/${TENANT}/socialLogin?code=${CODE}&anonymous_token=${ANONYMOUS_TOKEN}' \
--header 'Authorization: Bearer ${ANONYMOUS_TOKEN}'
```

Response:

```json
{
    "social_access_token": "eyJ23GciOiJkaXIiLCJlbmMiOiJBMjU2R0NNIiwiaXNzIjoiaHR0cH23Ly9kZXYtNjRwN2E3M2xjMHhveDVjMi51cy5hdXDoMC5jb20vIn0..AsJCnRiPn3V9GUMh.y8MQhJCZwzOnYla39L3szXOmi8MzCk6RUU_sN_GKxBqQxxtGKfoKarmiWCdZ7WlPddnfeiBcusFl69pN6mChiGv-xSej1xVK-CNrv8Lh7GL-qMgkblWcVyHSfexef8EEDFWse_17D7PkuGH1noLfVnlZsAZ2eIbWZCWL6PnyDmUegB-DEGTYxaRSu6602x8x55kRZCDqVZvg-pivv9lqb-Qrwcpb0YZrnuSKwGr6wGOQowFhJ95VmwOse5tfhoGmswuKVp_672GEMy21KiSDmkvUDItDAawASEFVcr40YQ3kYlxSjBwmQbBL0ZMXf_w4xbfzgdZXabMuItVfoGqL5lAgEq6DLEHlTTazY0GPYRV-sqxced8.buqIsoB5IfkCVik_kJunRQ",
    "social_id_token": "eyJhbGci1iJSUzI1NiIsonZ5cCI6IkpXVCIsImtpZCI6ImY3cFZsUjl0WHBUZC1IS2QtemNnayJ9.eyJnaXZlbl9uYx1lIjoiTHVrYXN6ICIsImZhbWlseV9uYW1lIjoiU3R5cGthIiwibmlja25hbWUiOiJsLnN0eXBrYSIsIm5hbWUiOiJMdWthc3ogU3R5cGthIiwicGljdHVyZSI6Imh0dHBzOi8vbGgzLmdvb2dsZXVzZXJjb250ZW50LmNvbS9hL0FDZzhvY0lFYmFBZGFPY19TOUk2V2FPRVZDVF9wSkEzRzNCQ1N1Ylh3OUt3TV9UbT1zOTYtYyIsImxvY2FsZSI6ImVuLUdCIiwidXBkYXRlZF9hdCI6IjIwMjMtMTEtMThUMjA6MDI6NDEuMTc1WiIsImVtYWlsIjoibC5zdHlwa2FAZW1wb3JpeC5jb20iLCJlbWFpbF92ZXJpZmllZCI6dHJ1ZSwiaXNzIjoiaHR0cHM6Ly9kZXYtNjRwN2E3M2xjMHhveDVjMi51cy5hdXRoMC5jb20vIiwiYXVkIjoib3diWkhObVdkcG1aOWJPcldIQjVBRndpa083UVByQWciLCJpYXQiOjE3MDAzMzc3NzgsImV4cCI6MTcwMDM3Mzc3OCwic3ViIjoiZ29vZ2xlLW9hdXRoMnwxMDQ3NDE0Mjc0MDUwNDQ1NTg2NjIiLCJzaWQiOiJydGlKM003OVpRYks0ajdZQVU0WjdoNVc5TnFMdDFlNSJ9.OsV4_Gcx7o28b65f0ryq1dTd-_BnhfZflVpIK_1Hbto-tO1ggIoDUPW1il0GCQEsINZUovM637zIdoGdO7-hZdFAyXi7YTCkeHFpsjbbRaAA-BMJY9OJuVI1frNJX91d01BJju4uW6zPlEkso9WPYW-zNEn-dDYdw_O3S1K7GV_Rx4Z8XX0tBvNcyNPmeC3cgWc5yzdAPmgBC_hjGqnH84QYCDsvg0djxwd0mFZj4JDVxRzIgvNajt3dI7UksH0EuJtcPDOyZrQ3csxDUAZfvD3SgGxsh6XwDdfX5j7uhhpyzeKT9_FYyFSyl3nyncMxuFfLKT75U3gQUYD3wwSOZg",
    "refresh_token": "1uKxU23p9wY9kIMsc16OMnA1qjjYvqgL",
    "refresh_token_expires_in": "86399",
    "session_idle_time": 120,
    "token_type": "Bearer",
    "access_token": "wmU2vzAR2B8drfBc9HrXobpcc1bF",
    "saas_token": "eyJ0eABaOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiI45TEyMDk3NyIsImV4cCI6MTcwMDM1MjE3OCwiaWF0IjoxNzAwMzM3Nzc4LCJqdGkiOiI4ODcyYWQ5OC0yZWNlLTQ1YmItOTcyZS0xZGVkZjAwM2UyZTgifQ.TzzNTfPjaunqWBCkvMpExM8sqcJqooTfxvXoFfYRgbo",
    "expires_in": 14399,
    "scope": "tenant=emporix"
}
```

{% hint style="warning" %}
Store the `access_token` and `saas_token` for further communication with Emporix.
{% endhint %}

### Connecting with social applications

Auth0 can be connected with many social apps. When the apps are integrated with Auth0, users can then access your storefront with the social application login.

Twitch is an example of the application that you can integrate with.\
To configure the setup:

1. Sign up for a [Twitch Developer account](https://dev.twitch.tv/login).
2. Set up an application on the Twitch Developer portal. For the detailed instructions, see [Twitch's guide on registering an application](https://dev.twitch.tv/docs/authentication#registration).
3. Connect your Twitch application to your Auth0 application. For the detailed instructions, see [Auth0's guide on connecting apps to Twitch](https://auth0.com/docs/connections/social/twitch).

**Result**: After the configuration, users can now use the Twitch account as a way of logging in.

{% hint style="info" %}
For more information about connections to social apps, see the [Auth0 Social Connections](https://marketplace.auth0.com/features/social-connections) documentation.
{% endhint %}