Google oauth2 with vuejs and nodejs

Viewed 2767

I develop a bug reporter application. The whole project is divided in two different projects - both with different package.json files -, one for the client side, where I use Vue.js 2, and one for the server part built with Nodejs 8 and Express.js. The two parts will be communicate through REST API.

To access the dashboard and report a bug, a user has to sign into his Google account.

Until now I have initialized the structure in Vuejs where the user will fire the sign in event. I use an a tag which fires the signin() method when is pressed:in

<a @click="sign">SIGN IN</a>
// ...
export default {
  methods: {
    signin() {
      // start animation
      let loadingInstance = this.$loading({ 
        fullscreen: true,
        text: 'Waiting for Google authorization...'
      });

      // opens the Google sign in window
      // when ready stop the loading 
     loadingInstance.close();
    },
  },
};

Bellow I post what routes I have already registered:

/*
 * PACKAGE.JSON IMPORTS
 */
import VueRouter from 'vue-router';

/*
 * APP PAGES
 */
import Index from '../pages/index/index.vue';

// The component that only an authorized member can access.
const SecretPage = { template: '<div>Secret Page</div>' };

/*
 * ROUTER CONFIGURATION
 */
const router = new VueRouter({
  mode: 'history',
  routes: [
    { path: '/', name: 'index', component: Index },
    { path: '/secret', name: 'secret', component: SecretPage, meta: { requiresAuth: true } },
    { path: '*', redirect: { name: 'index' }},
  ],
});

export default router;

What my user expects is when he clicks the sign in button, the Google window will popup, where he will be authorized and redirect to dashboard.

The server part does not contain any interaction with the client side yet:

/*
 * IMPORTS
 */
import express from 'express';
import bodyParser from 'body-parser';
import ENV_VAR from './config/ENV_VAR';

/*
 * DECLARATIONS
 */
const app = express();

/*
 * EXPRESS.JS CONFIGURATIONS
 */

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

/*
 * ROUTES
 */
app.get('/', (req, res) => {
  res.send('Hello world');
});

app.listen(ENV_VAR.PORT, console.log(`Server running on port ${ENV_VAR.PORT}.`));

I expect the access token to be save in the server. Then when the client has to take action, he will communicate to server. Only the server will check about the validity of the access token.

My main concern is how to structure (if it is possible) the API calls and the routes in my application. I read many related articles (provided in the end of the question) and used different methods related to original Google oauth API or using a library such as passport.js, but I haven't understood how to make this work. Do I have to reconsider the structure of my appliaction? Please provide a clear answer and not another link reference.

Materials:

0 Answers
Related