Google Login in NuxtJS

Tram Ho

1. Auth

Authenticate is a very familiar thing of each app, in this article I will introduce the auth module for nuxt to help you handle this job very quickly and easily.

2. Installation

First of all, install nuxt

yarn create nuxt-app nuxt-project

Install auth module

yarn add @nuxtjs/auth yarn add @nuxtjs/axios

add the module to nuxt.config.js

add the file index.js to the store directory to active vuex for the project

Run the yarn dev command and open the link

Now let’s try adding the middleware to the pages / index.vue file

and the result is

Since we have set the auth middleware but have not authenticated the user, nuxt has redirecrt us to the /login page. Now we will continue to create the pages / login / index.vue file

Next we need to create google clientId details then google will have a lot of instructions. Add clientId both created and added to nuxt.config.js

Modify the login / index.vue file

Revise the pages / index.vue file

Now open your browser, login and see the results

Share the news now

Source : Viblo