OAuth deals specifically with authorization. OpenID Connect (OIDC) is a protocol which is built on top of OAuth 2.0 and focusses on user authentication. It is widely used to enable user logins on websites and mobile apps.
OIDC allows apps to verify the identity of the end user and obtain basic profile information such as name and email address. This profile information is held within another JWT known as the ID token.
Use https://jwt.io to find out the name and email hidden in this JWT ID token
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkZyZWQgRmxpbnRzdG9uZSIsImVtYWlsIjoiZnJlZC5mbGludHN0b25lQHdoaXRlaGF0Lm9yZy51ayIsImlhdCI6MTUxNjIzOTAyMn0.DlHfHG2qZXpWszZv-X8LwoQkZUlqVgaXoRmnHXE2y_I
In this lesson we will store our usernames and passwords in Auth0. This is not strictly necessary as Auth0 supports connecting to other datasources to vaidate credentials, however, doing so simplifies our implementation.
Navigate to User Management->Users and choose to Create User. Enter the credentials and click Create. Repeat for any other users you have. Note that Auth0 will take care of hashing the passwords for you.
Auth0's login page can be integrated into many different types of apps including mobile, single page apps (SPAs) and regular web apps. For this lesson we will choose to add login/logout and profile functionality to an SPA written using React.
Using the Auth0 Dashboard, navigate to Applications and choose to Create Application. Choose Single Page Web Applications.
Follow the wizard and select React as your technology
Click on Download Sample
You will be instructed make some configuration changes to the application which will be created. Don't worry about these changes just yet, just click the Download button.
You should now see a new application called My App in the Auth0 Dashboard and code for a sample SPA should have been downloaded as a zip file. You can read more about how the sample web app works here.
Add the following configuration to My App
This is required to support Cross-Origin Resource Sharing (CORS) and to enable Auth0 to redirect back to a web page after successful login/logout.
Extract the zip and import the code into VSCode
The README.md file walks you through the steps to run your application. Note that there is no need to confgure credentials as the src/auth_config.json file is already configured with your specific Auth0 details.
Add auth_config.json to your .gitignore to avoid details of your Auth0 account being saved to git.
Follow the README instructions to start your application, then navigate to http://localhost:3000. The following web page should be displayed.
Clicking "Login" will display the Auth0 Universal Login page
Enter the username and password you added to Auth0 and you should now be successfully logged in
From the drop down in the top right corner, select Profile to view your user profile information. This information is held in a JWT ID token.
Well done, you have successfully authenticated a user using OIDC!
In the previous lesson you used OAuth to secure your Messages API. In this lesson, you used OIDC to implement user authentication and add login/logout functionality to a web app. Now we need to connect the two parts and allow our SPA to call the Messages API.
There is already a link to call an External API (a dummy Ping API)in your sample SPA, try it out and locate the JavaScript code which executes the API call.
Modify this code to call your Messages API and display your messages. Hint - you will need to modify the audience value.
If you need any additional help, please refer to the video resources in the "Additional resources" section.
One the integration is complete, commit your code to GitHub and notify your coach that this assignment is complete.
Extend your SPA to allow addition and deletion of messages