About 1.5 hours
- Lesson & Guided Practice: 40-60 min
- Independent practice: ~30 min
- Check for understanding: ~10 min
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.
- See (Slides and Demonstration)
- Hear (Demonstration)
- Do (Independent Pair Activity & CFU)
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
- How to get your Google Credentials.
- Integrating Google with Auth0.
- Integrating Auth0 code into a project.
- User Authentication with OAuth Slides
- How to get your Google Credentials API
- How to Implement Authentication For Your React App Article (9 mins read)
- How to Implement Auth0 For Your React App Video (7 mins watch).
- Read through lesson slides User Authentication with OAuth
- Follow this video describing how to add Auth0 to an app (7 mins watch). In the video, the presenter is working through this tutorial.
-
"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.
Step 4 - Create a working log-out button such that the button is shown when the user is authenticated, providing an option to log-out successfully
Once the user has successfully logged in,they are rendered with the option of log-out button, the following code in the app.js file can be added to obtain so.The following code demonstrates if the user has logged-in(after authentication) then render them a log-out button which on clicking logs the user out.
isAuthenticated() && (
<Button
id="qsLogoutBtn",
bsStyle="primary"
className="btn-margin"
onClick={this.logout.bind(this)}
Log Out
</Button>
)
}
We have to open Auth.js file in the sample downloaded folder and add logout method(it removes tokens and expiry time) as the following code snippet. In the following "logout" method, the auth token is removed from LocalStorage and expiry time is set to 0, after the following process the user is redirected to the home page of the app.
logout() {
this.accessToken = null;
this.idToken = null;
this.expiresAt = 0;
localStorage.removeItem('isLoggedIn');
history.replace('/home');
}
- 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.
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:
- 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!)