Sign in with Google using VueJS

Sign in / Sign up with Google

The following diagram shows the Sign in flow with Google, but we will split this into two cases:

• Scenario 1 : that is the flow you see below, the frontend is Vue, the Backend is Sails.js, authentication is done in some parts on both sides.
• Scenario 2 : We handle OAuth2 completely on Frontend and only allow calls with Backend when successful authentication.

Configure Google OAuth

Before we get started, we have to make sure Google is properly configured for your new application. Visit the Google API Console to get OAuth 2.0 credentials such as Client ID and Client Secret known by both Google and our application.

• Log into the Google Developer Console
• Click Select a Project and select New Project in the drop down menu.
• Name the project you want, I named it Google-oauth2 , click Create.
• Once the project is created (takes a few seconds), reuse the project picker and select your newly created project.

• Now you must add the available API. Select and open Library in the menu on the left.
• Open and enable Google + API and Google Analytics API

• Open the Credentials tab, click Create Credentials and select OAuth client ID – Google also provides a wizard to help you make this decision if you want to use Google Auth in another context.

• The API console opens, click Credentials on the left Nav and switch to the OAuth Consent Screen tab – providing the application name and optional logo.

• On the next screen. In the Application type, select Web application and name it – I use Google-oauth2

• In the Authorized JavaScript section, enter http: // localhost: 8080 and in the Authorized redirect URIs add http: // localhost: 8080 / callback and click the Create button

• Finally, a popup window containing the Client ID and Client Secret , copying those values, we will need them in our code.

Create Frontend and Login Page

We have created the Sign In and Sign Up page here [github] ( https://github.com/Jebasuthan/Vue-Facebook-Google-oAuth ).

The frontend build in src with npm and npm run serve will provide the landing page at the following path: localhost:8080/login

Login with Facebook / Google

In the frontend , open main.js and change the following:

Once you’ve initialized the googleauth installation in vue main.js , in the login components, you need to add a click event to log in.

When running the user interface, use the npm run serve command after clicking the Google Login / Signup button, you will get accessToken .

You now have accessToken from Google. You must pass through accessToken so that the backend api has enough information about Google’s logged in users using OAuth2Client .

In the SailsJS backend, open google-login.js and change:

When you’re done, restart and reload the login page: http: // localhost: 8080 / login

When clicking on the Google button, Google Auth is done on a separate popup that allows entering Google credentials to authenticate applications:

After you have provided your Google login information, the frontend now runs the following authentication logic:

• Scenario 1 : The VueJS login component receives authorization code from google and calls the Sails backend in http: // localhost: 8080 / login . There authorization code is used to access access_token, refresh_token, id_token and scope . The user is returned to the Vuex user interface so that the user finally logs in to the landing page.
• Scenario 2 : The steps from Scenario 1 are only performed on the interface without calling the backend. You can checkout from github souce code

Source: https://medium.com/@itjebasuthan_90100/signup-with-google-using-vuejs-11c9d4428250