This tutorial is out of date and no longer maintained.
Note: This article is part of our Easy Node Authentication series.
Welcome to Part 4 of our Easy Node Authentication with Passport series. We will be using the foundation of that tutorial to use Google authentication with our application. We already have a good application structure for our application packages, user model, application setup and views. node-auth-google-index. Since we set up our application to be as clean and efficient as possible, we will only have to create our Google application and add to 4 different files:
config/auth.js
)config/passport.js
)app/routes.js
)views/
)Since we are already familiar with code organization (the first tutorial) and where we need to add code to authenticate with a social network (the second tutorial), we’ll jump right into configuring our Passport Google Strategy.
The place to create Google applications can be found at their Cloud API Console. Applications can be found under Project > APIs & auth
.
Let’s go ahead and create our application with the correct redirect URL: http://localhost:8080/auth/google/callback
.
If Google doesn’t like http://localhost:8080
, then use http://127.0.0.1:8080
.
Let’s add our Client ID and our client secret to our auth.js
file so that our application knows the secrets it needs to authenticate with Google.
Google let’s you change the default login screen so that you can customize it with your brand’s logo and text. This can be found on the same page where your client ID and secret are. The option is under Consent Screen.
Here is the customization screen:
With our application ready to go, let’s set up our Passport Google Strategy.
We will be using the passport-google-oauth package by Jared Hanson so that we can authenticate with OAuth2.
There will be comments as placeholders for the previous article’s strategies.
Now we have the Google Strategy that will search for a user based on their google.id
that corresponds to their profile.id
we get back from Google. Next, let’s handle our routes to use our new Strategy.
We will need 2 routes.
Our routes are very simple. Just authenticate and handle the callback.
Once a user is authenticated, they will be redirected to their profile page. Last thing we need to do is show their user information.
Let’s create the Google login button.
When a user clicks on our authentication link, they will be directed to Google. A user will have to login and then grant permissions.
Once a user registers, they will be added to our database. Let’s show their user information.
Now we have their profile page!
Just like the other articles in this series, it is fairly straightforward to authenticate a user using a social network and OAuth 2.0.
In our next and final article, we will be dealing with the giant task of combining all of these methods of authentication into one user.
We’ll be diving into many ideas like linking social accounts under one user, unlinking an account, and handling all the other complex scenarios involved with this process.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!