Auth0

Authenticate users with Auth0.

Introduction

Auth0 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:

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.

2. When your account is created, go to the Getting Started section and choose Create Application.

1. Provide the application name and select Single Page Web Applications.

1. Choose Create.

2. 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.

   

   • 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.

   

   • 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.

3. 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

   

Storefront implementation

To set up your storefront:

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

<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

1. 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}.

To check how to obtain the anonymous token from Emporix, check the OAuth Service documentation.

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

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

Response:

{
    "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"
}

Store the access_token and saas_token for further communication with Emporix.

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.

2. Set up an application on the Twitch Developer portal. For the detailed instructions, see Twitch's guide on registering an application.

3. Connect your Twitch application to your Auth0 application. For the detailed instructions, see Auth0's guide on connecting apps to Twitch.

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

For more information about connections to social apps, see the Auth0 Social Connections documentation.