About 1.5 hours
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.
Participants will be able to:
“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.
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!
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: 
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. 
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?
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.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.
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 your fellow apprentices are able to log in, you will be able to see their profiles on your Dashboard as follows:
If time permits: