Integrating Auth0 With Azure Active Directory SAML response

 Using azure ad to enable single sign-on in auth0. This SSO configuration forces you to utilize auth0 and an AzureAD credential. For instance: When a company uses Azure Active Directory as their provider, they can access auth0 using their Azure Active Directory credentials.

Click Azure Active Directory

Task 1: Configure App In Azure AD

1. Navigate to Azure AD in the Azure Active Directory.

2. Click the “App Registrations” button in the side menu.

3. In Azure AD App Registrations, create a new App Registration.

4. You should now see the App Registration screen.

Note: Don’t Choose SPA, Please Choose Web.

Redirect URI — → https:// {your-auth0-tenant}.auth0.com/login/callback

5. Enter the name for your application (you can change this later if you get it wrong).

6. Select “Accounts in this organizational directory only” (multi-tenant is beyond the scope of this article).

7. Configure redirect URI selecting “Web” and entering the callback URL https://{your-auth0-tenant}.auth0.com/login/callback (obviously, replace {your-auth0-tenant} with your Auth0 tenant name).

8. Click “Register”.

9. You should now see the newly created app Overview screen.

10. IMPORTANT!! Copy the Application (client) ID from the overview screen of your newly created app registration, we’ll need this later.

Task 2: Create The Client Secret In Azure AD

1. Select the “Certificates & Secrets” area from the App registration side menu.

2. Click the “New client secret” button in the “Client secrets” section.

3. You should now see the Client Secret creation dialog:

4. Enter the name “Auth0”.

5. Select expiry “Never”.

NOTE: If choosing another option there will need to be a future manual intervention to create and configure the new client secret.

6. Click the “Add” button.

7. You should now see the new client secret listed in the “Client secrets” section.

Note : use value not secret id (value will appear once while creating).

8. Copy the generated client secret from the “Value” column and keep it in a safe place. YOU WILL NEVER BE ABLE TO ACCESS THIS AGAIN and you will need it later!

Task 3: Configure API Permissions

We need to configure access to the MS Graph API for retrieving basic user profile and directory info (some of which will find its way into Auth0 via the sync when the user logs in via Auth0). This will be done with delegated permissions which give access to the ‘User.Read’ and ‘Directory.Read.All’ permissions.

The key steps are:

1. Start on your App registration overview screen.

2. Click the “View API Permissions” button.

3. You should now see the API permissions screen.

4. You should see that “Delegated” permission for User.Read is already configured by default. If not, follow the steps below replacing Directory.Read.All with User.Read.

5. Click “Add A Permission”.

6. You should see the “Request API Permissions” dialog.

7. Select “Microsoft Graph”.

8. You should see the following:

9. Select “Delegated Permissions”.

10. This should reveal the “Select permissions” search field.

11. In the search text field under the “Select Permissions” heading enter the text ‘Directory.Read.All’. This should result in the following results:

12. Tick the checkbox next to the “Directory.Read.All” permission. This should result in the following:

13. Click the “Add Permissions” button.

14. OPTIONAL: If we want to avoid users having to manually accept giving our application access to these permissions we could click the “Grant admin consent for YOUR_AZURE_AD_DOMAIN” button.

Auth0 Configuration

Task 4: Create And Configure Auth0 Application

For this task, you need to be logged in to your Auth0 tenant control panel. We’re assuming here that you are creating a mobile App that needs access to a web-based API (e.g. a REST API).

The key steps are:

1. Open the Applications page.

2. Click the “Create Application” button

3. You should now see the Create Application page:

4. Enter your application Name.

5. Select the “Native” application option.

6. Click the Create button.

7. You should now be redirected to the newly created Application and see the following:

8. Scroll down to the “Application URIs” section. In the “Allowed Callback URLs” field enter https://{your-auth0-tenant}.auth0.com/login/callback. This should match the callback URL entered during the Configure App In Azure AD setup in Task 1.

9. Now we need to configure application grant types. Scroll to the “Application Tokens” section:

10. Click the “Show Advanced Settings” link. This should reveal the advanced settings:

11. The required grant types are “Authorization Code” and “Refresh Token”. These will be selected by default.

12. Click the “Save” button to save the configuration.

Task 5: Create Enterprise Connection In Auth0

The key steps are:

  1. Open Connections > Enterprise.

2. Click the + button next to Azure AD.

3. You should see the New Azure AD connection screen.

4. Enter connection name (Needs to be unique).

5. Get your MS Azure AD domain from the Azure AD overview screen in the Azure Portal (e.g. mycompany.com).

6. Enter the domain in the Microsoft Azure AD Domain field.

7. Enter your Azure AD app registration Client Id and Client Secret. You should have saved these while creating your Azure App registration in Task 2.

8. Leave everything else as default.

9. Click the ‘Create’ button.

Task 6: Enable Enterprise Connection For Application

The key steps are:

1. If you have just created the Enterprise Connection you should be looking at the connection already. If not navigate to Connections > Enterprise > Microsoft Azure AD > Your_Enterprise_Connection.

2. Click the ‘Applications’ tab below the main heading.

3. Find your App in the list of Apps and enable the toggle next to it.

Task 7: Testing

The key steps are:

1. Open Connections > Enterprise > Microsoft Azure AD.

2. Click the try button.

3. You should be redirected to the Azure AD login screen

4. Login.

5. Accept the permissions request (may not be shown depending on Azure AD config for granting permissions — See Azure AD Permissions section below).

6. If successful you should see the “It Works!” message.

Auth0 with Angular Integration: https://medium.com/@prem__kumar/auth0-with-angular-integration-e5fec997a087

Create Auth0 SPA: https://medium.com/@prem__kumar/auth0-single-page-application-8c01d6f33926

Drop your questions in the commands or send an email to k.prem3009@gmail.com for further clarification.


Comments

Popular posts from this blog

Creating a Circular File Download Progress Bar using SVG in React Native

Best Practices for React Native Development Don’t and Do’s Prem Yathvik

Check the React native application is connected to the Internet.