Skip to content

Latest commit

 

History

History
115 lines (72 loc) · 7.22 KB

o-auth.md

File metadata and controls

115 lines (72 loc) · 7.22 KB
Raw

Auth0

Projected Time

About 1.5 hours

  • Lesson & Guided Practice: 40-60 min
  • Independent practice: ~30 min
  • Check for understanding: ~10 min

Prerequisites

Motivation

Many app developers need a way to persist user information from session to session, but they also want to provide a smooth experience for those users. The OAuth protocol allows the user to "log in" to an app using their Google account (or other social media accounts). This removes friction for the user because they don't need to create a new profile or remember a new password. OAuth can be used for other types of integration, like allowing users to give an app permission to access the user's bank balances or Dropbox files. This is beyond the scope of this lesson but may be valuable to you in the future.

Learning styles represented

  • See (Slides and Demonstration)
  • Hear (Demonstration)
  • Do (Independent Pair Activity & CFU)

Objectives

Participants will be able to:

  • Describe the three roles associated with OAuth social media integration
  • Explain the difference between OAuth (the protocol) and Auth0 (the service)
  • Set up an Auth0 account and associate a social media login with a sample app

Specific Things to Learn

  • How to get your Google Credentials.
  • Integrating Google with Auth0.
  • Integrating Auth0 code into a project.

Materials

Lesson

Common Mistakes / Misconceptions

  • "It's okay if I post my API keys to my private GitHub repo." Never push API keys to GitHub, even if you are certain the repository is secure. You might end up changing the permissions or adding a collaborator in the future. Keeping your keys off GitHub protects them from being exposed, even accidentally.

  • Logging in to an app with OAuth gives the developer access to my Google password. Passwords are never shared and never even pass through the primary app's servers. Instead, providing your credentials to Google (or another social media platform) along with information from the primary app tells Google it's okay to send a different piece of shared secret information--tokens--to the primary app. The tokens are now associated with specific users, and this is the currency used between the primary app and the third-party service.

Guided Practice

Step 1 - Set up Google credentials

The first thing you want to do is set up your credentials on google by following this tutorial.
Please make sure that you secure ALL your private keys and sensitive information under your .env files!

Step 2 - Connect Google credentials to Auth0 in Connections

Log into Auth0, on the left side you will see a menu with a Connections option. Select Connections then select the sub category named Social that will lead you to select the Gmail connection as follows:

Once you click on Try it! you will see a modal pop up where you will have to input the Google credentials you created earlier. Just as follows:


Step 3 - Create Auth0 application to download code files

Once you've successfully integrated your Google credentials with the connections section of Auth0 you can proceed with going to Applications and then type in React in the search bar.


Step 4 - Launch Auth0 React App

Once you've successfully downloaded and launched the Auth0 React app, you can use your Google credentials to log in. After you've logged in, notice how a logout button is now shown on the webpage. Looking through the sample code, can you find the logic for displaying the login and logout buttons? Additionally, can you find how Auth0 determines whether a user is authenticated?

Common Questions
  • If you get an error about registerServiceWorker.js not being found, serviceWorker.js can be renamed to registerServiceWorker.js to match all the times it's being required in other files.
  • You may get an error saying that registerServiceWorker.js has no default export. In registerServiceWorker.js, register(config) should be the default export if it isn't already: (line 23 or so) export default function register(config) { -Most of the auth0 secrets you need will be in the "applications" section of your auth0.com account, except for the audience. That can be found or created in the "APIs" section.

Independent Practice

Techtonica staff will assign pairs. Work together on the Sample App you created during the demonstration to troubleshoot the 'Log in with Google' feature so that when users choose that option, they can successfully log in using their Google credentials.

Check for Understanding

Have 2 peers log in to your website by opening a new incognito window that links to your project and having them go through the login process. The incognito window will make it easier for multiple people to log in without you having to log out of your accounts every time. Once others are able to log in, you will be able to see their profiles on your Dashboard as follows:

Success

Challenges

If time permits:

  • Add a "passwordless" login option to your app.
  • Change the app to store tokens to local storage instead of isLoggedIn, and that your site looks at, verifies, and authenticates using this token (but only if it is unexpired!)

Supplemental Materials