Part 2 - A responsive Angular app with OpenId Connect


In Part 1 : A responsive Angular app with OpenId Connect, we set up an responsive Angular application using the Angular framework and Bootstrap. In Part 2, we are going to create a free development account with Auth0, a leading OpenId Connect service provider. We'll delegate the critical functionality of user management and user authentication to the experts at Auth0.


You can signup for a free Auth0 development account at https://auth0.com/


Step 1 : Create an user in Auth0

The next step is to create an user in Auth0. This user will represent an end-user who needs to login to the application and access secured pages. This user is different from the admin user created as part of the Auth0 sign-up process above




Once the user has been created, keep a note of the user's email address and password. We'll need it while authenticating the user with Auth0.


Step 2 : Register the Angular application in Auth0


Choose the application type as Single Page Application as shown below and click Create



In the next screen, choose Angular as the Single Page Application technology type. Auth0 will now register the application and create some OIDC identifiers that we need to capture.


Step 3 : Configure the application


Click on the settings tab to configure the application within Auth0.

Take a note of the Domain and Client ID. We'll have to add this to our Angular application's configuration. See Part 3: A responsive Angular app with OpenId Connect


In the same screen, we have to configure the below properties:



Scroll all the way to bottom and click on Save Changes


We have now completed :

  • Creating a free development account in Auth0

  • Created a dummy user in Auth0 that we can use to test our OIDC authentication flow

  • Registered our Angular application with Auth0. As part of the registration, Auth0 provided us with:

  • An Auth0 domain that we'll use to do our authentication

  • A client id to identify which application is requesting the authentication service

  • Configured the Auth0 to authorize calls from application by setting the callback and logout urls

We are now ready to implement the OIDC authentication flow which we'll cover the in the third and final part of this series. Please see Part 3 : A responsive Angular app with OpenId Connect for the exciting conclusion of our series finale

9 views0 comments