SignUp with Google using VueJS
Sign-in / Sign-up with Google Flow
The following diagram shows the Sign-in flow with Google we’re going to cover, however I’ll split this up into two scenarios:
- Scenario-1: thats the flow you see there, frontend is Vue, Backend is Sails.js, authentication is happening at some parts on both sides
- Scenario-2: We handle OAuth2 purely on the Frontend and just allow talking to the Sails.js backend when auth was successful
Configure Google OAuth
Before we get started, we have to make sure Google is properly configured for your new app. Visit the Google API Console to obtain OAuth 2.0 credentials such as a Client ID and Client Secret that are known to both Google and our application.
- Log into the Google Developer Console
- Click the Select a Project dropdown and select New Project
- Give it a project name that you want, I picked Google-oauth2
- Once the project is created (takes a few seconds), use the project selector again and pick your new project
- Now you have to add available APIs. Select and open Library in the left menu.
- Open and Enable Google+ API and Google Analytics API
- Go to the Credentials tab, click on the Create Credentials popup and select OAuth client ID — Google also offers a wizard to help you make this decision if you’d like to use Google Auth in a different context
- The API Dashboard opens, click Credentials on the left Nav and switch to the OAuth Consent Screen tab — provide an application name and an optional logo.
- On the next screen select Web application as Application type and give it a name — I used Google-oauth2
- Add http://localhost:8080 into the Authorized JavaScript origins and use http://localhost:8080/callback for the Authorized redirect URIs and click the Create button
- Finally you will get a popup containing your Client ID and Client Secret copy those values, we’ll need them on our code.
Create the Frontend and the Login Page
We already created the sample SignIn and SignUp page design in github.
Building the frontend in src with npm and npm run serve will provide this landing page of the Design on localhost:8080/login
The SignIn function allows to run the two different scenarios to do frontend-based and backend-based.
In frontend, open main.js and change this line:
import GoogleAuth from '@/config/google.js'
const gauthOption = {
clientId: 'xxxxxxxxxxx.apps.googleusercontent.com',
scope: 'profile email',
prompt: 'select_account'
}
Vue.use(GoogleAuth, gauthOption)Once you initialized googleauth settings in vue main.js, in login components you have to add the click event for login
<template>
<div class="signup-buttons">
<a href="#" class="google-signup" @click.prevent="loginWithGoogle">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true"><title>Google</title><g fill="none" fill-rule="evenodd"><path fill="#4285F4" d="M17.64 9.2045c0-.6381-.0573-1.2518-.1636-1.8409H9v3.4814h4.8436c-.2086 1.125-.8427 2.0782-1.7959 2.7164v2.2581h2.9087c1.7018-1.5668 2.6836-3.874 2.6836-6.615z"></path><path fill="#34A853" d="M9 18c2.43 0 4.4673-.806 5.9564-2.1805l-2.9087-2.2581c-.8059.54-1.8368.859-3.0477.859-2.344 0-4.3282-1.5831-5.036-3.7104H.9574v2.3318C2.4382 15.9832 5.4818 18 9 18z"></path><path fill="#FBBC05" d="M3.964 10.71c-.18-.54-.2822-1.1168-.2822-1.71s.1023-1.17.2823-1.71V4.9582H.9573A8.9965 8.9965 0 0 0 0 9c0 1.4523.3477 2.8268.9573 4.0418L3.964 10.71z"></path><path fill="#EA4335" d="M9 3.5795c1.3214 0 2.5077.4541 3.4405 1.346l2.5813-2.5814C13.4632.8918 11.426 0 9 0 5.4818 0 2.4382 2.0168.9573 4.9582L3.964 7.29C4.6718 5.1627 6.6559 3.5795 9 3.5795z"></path></g></svg>
Google
</a>
</div>
</template>
<script>
import router from '@/router/router'
export default {
name: 'login_signup_social',
methods: {
loginWithGoogle () {
this.$gAuth
.signIn()
.then(GoogleUser => {
// on success do something
console.log('GoogleUser', GoogleUser)
var userInfo = {
loginType: 'google',
google: GoogleUser
}
this.$store.commit('setLoginUser', userInfo)
router.push('/home')
})
.catch(error => {
console.log('error', error)
})
}
}
}
</script>
<style>
</style>Once you started run front end using npm run serve command after clicking login/signup using Google button you will get accessToken.
Now you got the accessToken from Google. You have to pass the accessToken to back end api to get full details about Google’s login user using OAuth2Client.
On the backend SailsJS, open google-login.js and change these lines:
const {OAuth2Client} = require('google-auth-library');
const client = new OAuth2Client('xxxxxxxxxxxxx.apps.googleusercontent.com');
const ticket = await client.verifyIdToken({
idToken: inputs.accessToken,
audience: 'xxxxx.apps.googleusercontent.com'
});
const payload= ticket.getPayload();
console.log('Google payload is '+JSON.stringify(payload));
const userid = payload['sub'];
let email = payload['email'];
let emailVerified = payload['email_verified'];
let name = payload["name"];
let pictureUrl = payload["picture"];Once you’ve done so, restart backend and frontend and load the login page from http://localhost:8080/login
When clicking this Google button, Google Auth is done on a separate popup that either allows to enter the Google credentials to authenticate the app:
After you have provided your Google credentials, the frontend now runs the following authentication logic:
- Scenario-1: The VueJS Login component receives the authorization code from the google login popup and calls the Sails backend on http://localhost:8080/login. There the authorization code is used to retrieved the access_token, refresh_token, id_token and the scope. The user is returned to the frontend which uses Vuex to finally log the user into the landing page
- Scenario-2: The steps from Scenario-1 are solely executed on the frontend with no additional call to the backend.
You can checkout github souce code
