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:
Allowed Callback URLs: http://localhost:4200/home
Allowed Logout URLs: http://localhost:4200/landing
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