-
-
-This plugin helps you to add Login With Google feature to your Vue 3 application
-
+
+
+
+
## Overview
-This is a lightweigh plugin for implementing log-in and sign-up flows using [Google Identity Services](https://developers.google.com/identity/oauth2/web) with the help of [Google 3P Authorization JavaScript Library](https://developers.google.com/identity/oauth2/web/guides/load-3p-authorization-library)
+This is a lightweight plugin to implement log-in and sign-up flows using [Google Identity Services](https://developers.google.com/identity) with the help of [Google 3P Authorization JavaScript Library](https://developers.google.com/identity/oauth2/web/guides/load-3p-authorization-library)
This allows you to implement the following features
@@ -30,24 +34,37 @@ This allows you to implement the following features
- Automatic Login without any user interaction
- Login with Google using a custom button
-## Prerequisites
-- This plugin needs vue version 3.0.3 or above to work properly
-- To enable Login With Google on your website, you first need to set up your Google API client ID. To do so, [follow these steps](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid)
+
+## Documentation
+
+https://devbaji.github.io/vue3-google-login/
+
## Basic Setup
### Installation
-First step is to install it using `npm`
+Installation via NPM
-```bash
+```sh
npm install vue3-google-login
```
+Installation via Yarn
+```sh
+yarn add vue3-google-login
+```
+Installation via CDN
+
+If you prefer to use vue3-google-login via a CDN, you can include the following script in your HTML file:
+```html
+
+```
### Initialize the plugin
-Initialize the vue3-google-login plugin in main.js
+Initialize the vue3-google-login plugin in main.js, this will register a component `GoogleLogin` globally
+
```javascript
import { createApp } from 'vue'
@@ -63,294 +80,25 @@ app.use(vue3GoogleLogin, {
app.mount('#app')
```
+> :bulb: If you dont want to initialize and register `GoogleLogin` component, you can directly import this from `vue3-google-login` package and use the client-id prop, also some functions accepts a clientId option which can be used to avoid initialising the plugin, see [here](https://devbaji.github.io/vue3-google-login/#options) for more info
+>
### GoogleLogin component
-Once the plugin is installed you can use the component `GoogleLogin` anywhere in your project, this will render a log in button which opens a popup for google login
+Once the plugin is installed you can use the component `GoogleLogin` anywhere in your project, this will render a log in button which opens a popup for Google login
```vue
-
+
```
+
-> :information_source: You can omit `client-id` prop if it is [initialized in main.js](#initialize-the-plugin)
-
-Here is an image showing log in button rendered by google
-
-
-
-
-### One Tap prompt
-
-For this feature set the prop `prompt` to true, this will open a prompt with the list of logged in google accounts of the user, now user can just tap on his prefered account to easily login to our application
-
-```vue
-
-
-
-
-
-```
-
-> :information_source: If the user closes the One Tap prompt manually, the One Tap prompt is suppressed, see [here](https://developers.google.com/identity/gsi/web/guides/features#exponential_cooldown) for more info
-
-
-Here is an image showing One Tap prompt
-
-
-
-
-
-### Automatic Login
-For this feature set the prop `autoLogin` to true, this will automatically detects whether only one google account is logged in, if yes then prompt will automatically log in and will trigger the callback without any user interactions, to make this work `prompt` must be set to true
-
-```vue
-
-
-
-
-
-```
-
-Here is an image showing the prompt automatically detects the logged in Google account and logs in automatically
-
-
-
-
-
-### Get User Data
-
-In the triggered callback after login you will get a JWT credential string which can be decoded using decodeCredential function to retrive users basic data
-
-```vue
-
-
-
-
-
-```
-
-> :warning: You cannot use decodeCredential function to retrive user data when you are using [Custom Login Button](#custom-login-button), because it doesn't give a JWT credential, instead it gives an authorization code, [see here for more info](#combination-of-one-tap-prompt-and-custom-button)
-
-
-### Options
-
-These options can be either used at [initializing in main.js](#initialize-the-plugin) or as prop values in [GoogleLogin component](#googlelogin-component)
-
-| Prop | Type | Description |
-| --------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| clientId | String | Google API client ID |
-| prompt | Boolean | Set this to true to display the One Tap prompt
Setting this value as a prop of [GoogleLogin component](#googlelogin-component) will be ignored if this is set as option on [initializing the plugin](#initialize-the-plugin) |
-| autoLogin | Boolean | Setting this value to true will make the prompt to automatically log in without any user interactions
For this to work `prompt` must be set to true
Setting this value as a prop of [GoogleLogin component](#googlelogin-component) will be ignored if this is set as option on [initializing the plugin](#initialize-the-plugin) |
-| callback | Function | The callback function which will be trigger with a response object once the login is completed |
-| idConfiguration | Object | IdConfiguration object for initializing, see list of fields and descriptions of the IdConfiguration [here](https://developers.google.com/identity/gsi/web/reference/js-reference#IdConfiguration) |
-| buttonConfig | Object | Configuration of the login button rendered by Google, see list of fields and descriptions of these configurations [here](https://developers.google.com/identity/gsi/web/reference/js-reference#GsiButtonConfiguration) |
-
-
-## Custom Login Button
-
-Some times you may not need the default button rendered by Google, you can create your own button and can make it behave like a login with Google button
-
-Here is an image showing how a custom button opens the Google login popup
-
-
-
-This can be done in two ways
-
-
-> :warning: For custom buttons this plugin use `google.accounts.oauth2.initTokenClient` under the hoods which gives an [OAuth2 authorization code](https://developers.google.com/identity/oauth2/web/guides/use-code-model#auth_code_handling) in the callback response, but Google rendered login button and One Tap prompt gives a [CredentialResponse](https://developers.google.com/identity/gsi/web/reference/js-reference#CredentialResponse) with a JWT credential field, so if you are using a combination of these, validating your callback response on server-side can be a little tricky, this is more explained [here](#server-side-validation)
-
-### Wrap around GoogleLogin
-
-Create your own button component and wrap it around [GoogleLogin component](#googlelogin-component), default slot content of this component is considered as a custom login button and it will act as a login with Google button
-
-```vue
-
-
-
-
-
-
-
-```
-
-### gLoginPopup function
-
-You can use `gLoginPopup` function to dynamically trigger the opening of login popup, also you can use `useLibraryLoaded` composable function get a boolean state showing whether the [Google 3P Authorization JavaScript Library](https://developers.google.com/identity/oauth2/web/guides/load-3p-authorization-library) is loaded or not
-
-```vue
-
-
-
-
-
-```
-
-### Sign-In JavaScript API
-
-Once the [Google 3P Authorization JavaScript Library](https://developers.google.com/identity/oauth2/web/guides/load-3p-authorization-library) is loaded, Sign-In JavaScript API will be available in window scope and it can be accessed using `window.google`, see [Sign-In JavaScript API](https://developers.google.com/identity/gsi/web/reference/js-reference) and [Token model](https://developers.google.com/identity/oauth2/web/guides/use-token-model) for more info on Sign-In JavaScript API
-
-Here is how we can use this Sign-In JavaScript API to create a custom login button
-
-```vue
-
-
-
-
-
-```
-
-## Server-side Validation
-
-Once the callback is triggered you need to validate the callback response using your Server-side endpoints, but this is done differently for the callback triggered by Google rendered login button/One Tap prompts and callback triggered by Custom Login Button
-
-### Google rendered login button/One Tap prompts
-
-Callback will be triggered with a [CredentialResponse](https://developers.google.com/identity/gsi/web/reference/js-reference#CredentialResponse) with a JWT credential string
-
-Here is a sample Node.js code snippet for validating the JWT credential string
-
-```javascript
-const { OAuth2Client } = require('google-auth-library')
-const client = new OAuth2Client("YOUR_GOOGLE_CLIENT_ID");
-
-// Call this function to validate the JWT credential sent from client-side
-async function verifyCredentials(credential) {
- const ticket = await client.verifyIdToken({
- idToken: credential,
- });
- const payload = ticket.getPayload();
- return payload
-}
-
-verifyCredentials('JWT_CREDENTIAL_STRING_FROM_CLIENT_SIDE').then((userInfo) => {
- // use userInfo and do your server-side logics here
-}).catch((error) => {
- // validation failed and userinfo was not obtained
-});
-```
-
-### Custom Login Button
-
-Callback will be triggered with a response containing an [OAuth2 authorization code](https://developers.google.com/identity/oauth2/web/guides/use-code-model#auth_code_handling)
-
-Here is a sample Node.js code snippet for validating the OAuth2 authorization code
-
-```javascript
-const { OAuth2Client } = require('google-auth-library')
-const client = new OAuth2Client(
- {
- clientId: 'YOUR_GOOGLE_CLIENT_ID',
- clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET',
- redirectUri: 'YOUR_GOOGLE_REDIRECT_URI'
- }
-);
-
-// Call this function to validate OAuth2 authorization code sent from client-side
-async function verifyCode(code) {
- let { tokens } = await client.getToken(code)
- client.setCredentials({ access_token: tokens.access_token })
- const userinfo = await client.request({
- url: 'https://www.googleapis.com/oauth2/v3/userinfo'
- });
- return userinfo.data
-}
-
-verifyCode('AUTHORIZATION_CODE_FROM_CLIENT_SIDE').then((userInfo) => {
- // use userInfo and do your server-side logics here
-}).catch((error) => {
- // validation failed and userinfo was not obtained
-});
-```
-
-### Combination of One Tap Prompt and Custom Button
-
-If you are using the combination of these like below, then the response caught in callback function can be different based on the user action, you can handle this by making serverside endpoints which accepts both type of responses and in callback function conditionally call these endpoints
-
-```vue
-
-
-
-
-
-
-
-```
\ No newline at end of file
+> ### For more advanced usages see the [docs](https://devbaji.github.io/vue3-google-login/)
diff --git a/documentation/.vuepress/config.js b/documentation/.vuepress/config.js
deleted file mode 100644
index 112889b..0000000
--- a/documentation/.vuepress/config.js
+++ /dev/null
@@ -1,7 +0,0 @@
-module.exports = {
- title: "vue3-google-login",
- base: "/vue3-google-login/",
- head: [
- ['link', { rel: 'icon', href: 'images/favicon.ico' }]
- ]
-}
\ No newline at end of file
diff --git a/documentation/.vuepress/config.ts b/documentation/.vuepress/config.ts
new file mode 100644
index 0000000..b4688bf
--- /dev/null
+++ b/documentation/.vuepress/config.ts
@@ -0,0 +1,79 @@
+import { defineUserConfig } from "vuepress";
+import { localTheme } from "./theme";
+import { copyCodePlugin } from "vuepress-plugin-copy-code2";
+import fullTextSearchPlugin from "vuepress-plugin-full-text-search2";
+
+export default defineUserConfig({
+ title: "vue3-google-login",
+ base: "/vue3-google-login/",
+ head: [
+ ["link", { rel: "icon", href: "images/favicon.ico" }],
+ [
+ "meta",
+ {
+ name: "description",
+ content:
+ "This is a lightweight Vue 3 plugin to implement log-in and sign-up flows using Google Identity Services with the help of Google 3P Authorization JavaScript Library",
+ },
+ ],
+ [
+ "meta",
+ {
+ name: "robots",
+ content:
+ "vue 3, vuejs, one tap sign up, automatic sign in, login with google, login using google, one tap sign up and sign in, npm, vue3-google-login, google identity services, gsi, client library, sign in with google, gsi client, example, example code, tutorial, accounts.google.com, javaScript sdk",
+ },
+ ],
+ [
+ "meta",
+ {
+ name: "googlebot",
+ content:
+ "vue 3, vuejs, one tap sign up, automatic sign in, login with google, login using google, one tap sign up and sign in, npm, vue3-google-login, google identity services, gsi, client library, sign in with google, gsi client, example, example code, tutorial, accounts.google.com, javaScript sdk",
+ },
+ ],
+ [
+ "meta",
+ {
+ name: "google-site-verification",
+ content: "IUHi0oL16YV--ZcBFM5VbJba3XjjLJgR_tvH-afMeyE",
+ },
+ ],
+ [
+ "meta",
+ {
+ name: "viewport",
+ content:
+ "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0",
+ },
+ ],
+ [
+ "script",
+ {
+ async: true,
+ src: "https://www.googletagmanager.com/gtag/js?id=G-90C8T90JGH",
+ },
+ ],
+ [
+ "script",
+ {},
+ `
+ window.dataLayer = window.dataLayer || [];
+ function gtag(){dataLayer.push(arguments);}
+ gtag('js', new Date());
+
+ gtag('config', 'G-90C8T90JGH');
+ `,
+ ],
+ ],
+ theme: localTheme({
+ contributors: false,
+ lastUpdated: false,
+ }),
+ plugins: [
+ fullTextSearchPlugin,
+ copyCodePlugin({
+ pure: true,
+ }),
+ ],
+});
diff --git a/documentation/.vuepress/public/favicon.ico b/documentation/.vuepress/public/favicon.ico
new file mode 100644
index 0000000..df36fcf
Binary files /dev/null and b/documentation/.vuepress/public/favicon.ico differ
diff --git a/documentation/.vuepress/public/googleeedf3d735bfba695.html b/documentation/.vuepress/public/googleeedf3d735bfba695.html
new file mode 100644
index 0000000..8182706
--- /dev/null
+++ b/documentation/.vuepress/public/googleeedf3d735bfba695.html
@@ -0,0 +1 @@
+google-site-verification: googleeedf3d735bfba695.html
\ No newline at end of file
diff --git a/documentation/.vuepress/public/images/auto-login.gif b/documentation/.vuepress/public/images/auto-login.gif
index 68b9b9d..a0c37dc 100644
Binary files a/documentation/.vuepress/public/images/auto-login.gif and b/documentation/.vuepress/public/images/auto-login.gif differ
diff --git a/documentation/.vuepress/public/images/buyme-coffee-small.webp b/documentation/.vuepress/public/images/buyme-coffee-small.webp
new file mode 100644
index 0000000..1ba1c2b
Binary files /dev/null and b/documentation/.vuepress/public/images/buyme-coffee-small.webp differ
diff --git a/documentation/.vuepress/public/images/buyme-coffee.webp b/documentation/.vuepress/public/images/buyme-coffee.webp
new file mode 100644
index 0000000..4fa7c88
Binary files /dev/null and b/documentation/.vuepress/public/images/buyme-coffee.webp differ
diff --git a/documentation/.vuepress/public/images/custom-login-button.gif b/documentation/.vuepress/public/images/custom-login-button.gif
index 3c72898..e8c94a2 100644
Binary files a/documentation/.vuepress/public/images/custom-login-button.gif and b/documentation/.vuepress/public/images/custom-login-button.gif differ
diff --git a/documentation/.vuepress/public/images/google-rendered-button.png b/documentation/.vuepress/public/images/google-rendered-button.png
index 2ade57d..4a8b859 100644
Binary files a/documentation/.vuepress/public/images/google-rendered-button.png and b/documentation/.vuepress/public/images/google-rendered-button.png differ
diff --git a/documentation/.vuepress/public/images/one-tap-prompt.gif b/documentation/.vuepress/public/images/one-tap-prompt.gif
index 803ad35..2eb8e07 100644
Binary files a/documentation/.vuepress/public/images/one-tap-prompt.gif and b/documentation/.vuepress/public/images/one-tap-prompt.gif differ
diff --git a/documentation/.vuepress/public/images/paypal-small.png b/documentation/.vuepress/public/images/paypal-small.png
new file mode 100644
index 0000000..fda7598
Binary files /dev/null and b/documentation/.vuepress/public/images/paypal-small.png differ
diff --git a/documentation/.vuepress/public/images/paypal.png b/documentation/.vuepress/public/images/paypal.png
new file mode 100644
index 0000000..7d15736
Binary files /dev/null and b/documentation/.vuepress/public/images/paypal.png differ
diff --git a/documentation/.vuepress/public/sitemap.xml b/documentation/.vuepress/public/sitemap.xml
new file mode 100644
index 0000000..c62d9d9
--- /dev/null
+++ b/documentation/.vuepress/public/sitemap.xml
@@ -0,0 +1,13 @@
+
+
+
+ https://devbaji.github.io/vue3-google-login/
+ 2023-08-22T19:04:53+01:00
+ 1.0
+
+
+ https://www.npmjs.com/package/vue3-google-login
+ 2023-08-22T19:04:55+01:00
+ 1.0
+
+
\ No newline at end of file
diff --git a/documentation/.vuepress/theme/Layout.vue b/documentation/.vuepress/theme/Layout.vue
new file mode 100644
index 0000000..74fbd0f
--- /dev/null
+++ b/documentation/.vuepress/theme/Layout.vue
@@ -0,0 +1,104 @@
+
+
+
+
+
+
-
-This plugin helps you to add Login With Google feature to your Vue 3 application
-
+https://devbaji.github.io/vue3-google-login/ -->
## Overview
-This is a lightweigh plugin for implementing log-in and sign-up flows using [Google Identity Services](https://developers.google.com/identity/oauth2/web) with the help of [Google 3P Authorization JavaScript Library](https://developers.google.com/identity/oauth2/web/guides/load-3p-authorization-library)
+This is a lightweight plugin to implement log-in and sign-up flows using [Google Identity Services](https://developers.google.com/identity) with the help of [Google 3P Authorization JavaScript Library](https://developers.google.com/identity/oauth2/web/guides/load-3p-authorization-library)
This allows you to implement the following features
@@ -34,20 +36,32 @@ This allows you to implement the following features
- This plugin needs vue version 3.0.3 or above to work properly
- To enable Login With Google on your website, you first need to set up your Google API client ID. To do so, [follow these steps](https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid)
+- For testing in local evironment, you need to add `http://localhost` and `http://localhost:` to the Authorized JavaScript origins
## Basic Setup
### Installation
-First step is to install it using `npm`
+Installation via NPM
-```bash
+```sh
npm install vue3-google-login
```
+Installation via Yarn
+```sh
+yarn add vue3-google-login
+```
+Installation via CDN
+
+If you prefer to use vue3-google-login via a CDN, you can include the following script in your HTML file:
+```html
+
+```
### Initialize the plugin
-Initialize the vue3-google-login plugin in main.js
+Initialize the vue3-google-login plugin in main.js, this will register a component `GoogleLogin` globally
+
```javascript
import { createApp } from 'vue'
@@ -63,84 +77,175 @@ app.use(vue3GoogleLogin, {
app.mount('#app')
```
+> :bulb: If you dont want to initialize and register `GoogleLogin` component, you can directly import this from `vue3-google-login` package and use the client-id prop, also some functions accepts a clientId option which can be used to avoid initializing the plugin, see [here](#options) for more info
+>
### GoogleLogin component
-Once the plugin is installed you can use the component `GoogleLogin` anywhere in your project, this will render a log in button which opens a popup for google login
+Once the plugin is installed you can use the component `GoogleLogin` anywhere in your project, this will render a log in button which opens a popup for Google login
```vue
-
+
```
-> :information_source: You can omit `client-id` prop if it is [initialized in main.js](#initialize-the-plugin)
-
-Here is an image showing log in button rendered by google
+Here is an image showing log in button rendered by Google
+By default, the GoogleLogin component uses Google Identity Services (GIS) for token-based authentication. With the authMode prop, you can switch between:
+
+ • “credential” (default): Uses GIS for token-based authentication.
+ • “code”: Uses Google OAuth 2.0 authorization code flow for server-side authentication.
+
+To enable the authorization code flow, set the authMode prop to "code":
+
+```vue
+
+
+
+
+
+```
+
+Key Differences:
+ 1. authMode: "credential":
+ • Returns a token via response.credential.
+ • Ideal for front-end authentication workflows.
+ 2. authMode: "code":
+ • Returns an authorization code via response.code.
+ • Recommended for server-side authentication and workflows requiring OAuth 2.0.
+
### One Tap prompt
-For this feature set the prop `prompt` to true, this will open a prompt with the list of logged in google accounts of the user, now user can just tap on his prefered account to easily login to our application
+For this feature set the prop `prompt` to true, this will open a prompt with the list of logged in Google accounts of the user, now user can just tap on his prefered account to easily login to your application
```vue
-
+
```
-> :information_source: If the user closes the One Tap prompt manually, the One Tap prompt is suppressed, see [here](https://developers.google.com/identity/gsi/web/guides/features#exponential_cooldown) for more info
+Or use `googleOneTap` function
+
+```vue
+
+
+
+
One-Tap prompt will be shown once this component is mounted
+
+```
+
+> :information_source: If the user closes the One Tap prompt manually, the One Tap prompt will be suppressed, see [here](https://developers.google.com/identity/gsi/web/guides/features#exponential_cooldown) for more info
Here is an image showing One Tap prompt
+### Use of googleLogout function
+While using One-tap feature, a [dead-loop UX issue](https://developers.google.com/identity/gsi/web/guides/automatic-sign-in-sign-out#sign-out) may occur. To resolve this issue, in your logout function run `googleLogout` funtion
+```javascript
+import { googleLogout } from "vue3-google-login"
+const yourLogoutFunction = () => {
+ // your logout logics
+ googleLogout()
+}
+```
+> :exclamation: Function `googleLogout` is used to temporarily disable One Tap Automatic sign-in for one day. This API does not sign out your users out of your website or any Google websites.
+
### Automatic Login
-For this feature set the prop `autoLogin` to true, this will automatically detects whether only one google account is logged in, if yes then prompt will automatically log in and will trigger the callback without any user interactions, to make this work `prompt` must be set to true
+To enable this feature, set the prop `autoLogin` to true, this will automatically detects whether only one Google account is logged in, if yes then prompt will automatically log in and will trigger the callback without any user interactions, to make this work `prompt` must be set to true
```vue
-
+
```
-Here is an image showing the prompt automatically detects the logged in Google account and logs in automatically
+Or use `googleOneTap` function and set `autoLogin` option to true
+
+```vue
+
+
+
+
One-Tap prompt will be shown once this component is mounted
+
+
+```
+
+Here is an image showing how the prompt detects the logged in Google account and logs in automatically
@@ -159,46 +264,24 @@ const callback = (response) => {
-
+
```
-> :warning: You cannot use decodeCredential function to retrive user data when you are using [Custom Login Button](#custom-login-button), because it doesn't give a JWT credential, instead it gives an authorization code, [see here for more info](#combination-of-one-tap-prompt-and-custom-button)
-
-
-### Options
-
-These options can be either used at [initializing in main.js](#initialize-the-plugin) or as prop values in [GoogleLogin component](#googlelogin-component)
-
-| Prop | Type | Description |
-| --------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| clientId | String | Google API client ID |
-| prompt | Boolean | Set this to true to display the One Tap prompt
Setting this value as a prop of [GoogleLogin component](#googlelogin-component) will be ignored if this is set as option on [initializing the plugin](#initialize-the-plugin) |
-| autoLogin | Boolean | Setting this value to true will make the prompt to automatically log in without any user interactions
For this to work `prompt` must be set to true
Setting this value as a prop of [GoogleLogin component](#googlelogin-component) will be ignored if this is set as option on [initializing the plugin](#initialize-the-plugin) |
-| callback | Function | The callback function which will be trigger with a response object once the login is completed |
-| idConfiguration | Object | IdConfiguration object for initializing, see list of fields and descriptions of the IdConfiguration [here](https://developers.google.com/identity/gsi/web/reference/js-reference#IdConfiguration) |
-| buttonConfig | Object | Configuration of the login button rendered by Google, see list of fields and descriptions of these configurations [here](https://developers.google.com/identity/gsi/web/reference/js-reference#GsiButtonConfiguration) |
-
+> :exclamation: You cannot use decodeCredential function to retrive user data when you are using [Custom Login Button](#custom-login-button), because it doesn't give a JWT credential, instead it gives an authorization code or access token, [see here for more info](#combination-of-one-tap-prompt-and-custom-button)
## Custom Login Button
-Some times you may not need the default button rendered by Google, you can create your own button and can make it behave like a login with Google button
+> :exclamation: For custom buttons this plugin use `google.accounts.oauth2.initCodeClient` and `google.accounts.oauth2.initTokenClient` under the hoods which gives [OAuth2 authorization code](https://developers.google.com/identity/oauth2/web/guides/use-code-model#auth_code_handling) and [Access Token](https://developers.google.com/identity/oauth2/web/guides/use-token-model) respectively in the callback response, but Google rendered login button and One Tap prompt gives a [CredentialResponse](https://developers.google.com/identity/gsi/web/reference/js-reference#CredentialResponse) with a JWT credential field, so if you are using a combination of these, validating your callback response on server-side can be a little tricky, this is more explained [here](#server-side-validation)
-Here is an image showing how a custom button opens the Google login popup
-
-
-
-This can be done in two ways
+Some times you may not need the default button rendered by Google, you can create your own button and can make it behave like a login with Google button
+This can be done in three ways
-> :warning: For custom buttons this plugin use `google.accounts.oauth2.initTokenClient` under the hoods which gives an [OAuth2 authorization code](https://developers.google.com/identity/oauth2/web/guides/use-code-model#auth_code_handling) in the callback response, but Google rendered login button and One Tap prompt gives a [CredentialResponse](https://developers.google.com/identity/gsi/web/reference/js-reference#CredentialResponse) with a JWT credential field, so if you are using a combination of these, validating your callback response on server-side can be a little tricky, this is more explained [here](#server-side-validation)
-### Wrap around GoogleLogin
+### Custom Button As Slot
-Create your own button component and wrap it around [GoogleLogin component](#googlelogin-component), default slot content of this component is considered as a custom login button and it will act as a login with Google button
+Create your own button component and keep it inside [GoogleLogin component](#googlelogin-component), default slot content of GoogleLogin component is considered as a custom login button and it will act as a login with Google button
```vue
-const gLibraryLoaded = useLibraryLoaded()
+
+
+
+```
-const callback = (response) => {
- console.log("Handle the response", response)
-}
+### googleTokenLogin function
-const onButtonClick = () => {
- gLoginPopup({ callback })
+Just like [googleAuthCodeLogin function](#googleauthcodelogin-function) you can use `googleTokenLogin` function to trigger the opening of login popup that gives an [Access Token](https://developers.google.com/identity/oauth2/web/guides/use-token-model) instead of an Auth code
+
+```vue
+
-
+
```
-### Sign-In JavaScript API
+Here is an image showing how a custom button opens the Google login popup
+
+
+
+
+## Using Google SDK
-Once the [Google 3P Authorization JavaScript Library](https://developers.google.com/identity/oauth2/web/guides/load-3p-authorization-library) is loaded, Sign-In JavaScript API will be available in window scope and it can be accessed using `window.google`, see [Sign-In JavaScript API](https://developers.google.com/identity/gsi/web/reference/js-reference) and [Token model](https://developers.google.com/identity/oauth2/web/guides/use-token-model) for more info on Sign-In JavaScript API
+If you want to directly use the API provided by [Google Identity Services JavaScript SDK](https://developers.google.com/identity/oauth2/web/guides/load-3p-authorization-library) without even initializing the plugin, you can use `googleSdkLoaded` wrapper function to do that. This will run an action in which you can use the API directly, and under the hoods it will make sure that this action is performed only after the SDK library is fully loaded.
-Here is how we can use this Sign-In JavaScript API to create a custom login button
+Here is an example showing how we can use `googleSdkLoaded` wrapper function to create a custom login button
```vue
+
+
+
+
+```
+> :bulb: You can find the docs on how to use this SDK [here](https://developers.google.com/identity/oauth2/web/reference/js-reference) and [here](https://developers.google.com/identity/gsi/web/reference/js-reference)
-const gLibraryLoaded = useLibraryLoaded()
+## TypeScript
-const callback = (response) => {
- console.log("Handle the response", response)
-}
+If you are using Vue 3 with TypeScript you may need to add type to the callback function triggered by [GoogleLogin component](#googlelogin-component), you can do this by importing `CallbackTypes`
-const onButtonClick = () => {
- if (gLibraryLoaded) {
- window.google.accounts.oauth2.initTokenClient({
- client_id: 'YOUR_GOOGLE_CLIENT_ID',
- scope: 'email profile',
- callback
- }).requestAccessToken();
- }
-}
+> :warning: If you are trying to implement a custom button and one-tap login using GoogleLogin component alone [like this](#combination-of-one-tap-prompt-and-custom-button), you cannot add type to the callback instead you can add `any` type to the callback response or the recomended way is to implement this using `googleOneTap` and `googleAuthCodeLogin`/`googleTokenLogin` funtions
+
+### CredentialCallback
+Use `CredentialCallback` type for the callback of Google rendered login button using [GoogleLogin component](#googlelogin-component), you can also use this type for the callback from One-Tap/Automatic Login prompts
+
+```vue
+
+
+
+
+
+```
+
+### CodeResponseCallback
+Use `CodeResponseCallback` type for the callback trigered by [GoogleLogin component](#googlelogin-component) when a [custom button is kept as slot](#custom-button-as-slot)
+
+```vue
+
+
+
+
+
+
+
+```
+
+### TokenResponseCallback
+Use `TokenResponseCallback` type for the callback trigered by [GoogleLogin component](#googlelogin-component) when a [custom button is kept as slot](#custom-button-as-slot) and `popup-type` prop is set to `TOKEN`
+
+```vue
+
-
+
+
+
```
+
## Server-side Validation
Once the callback is triggered you need to validate the callback response using your Server-side endpoints, but this is done differently for the callback triggered by Google rendered login button/One Tap prompts and callback triggered by Custom Login Button
@@ -282,14 +446,14 @@ Here is a sample Node.js code snippet for validating the JWT credential string
```javascript
const { OAuth2Client } = require('google-auth-library')
-const client = new OAuth2Client("YOUR_GOOGLE_CLIENT_ID");
+const client = new OAuth2Client("YOUR_GOOGLE_CLIENT_ID")
// Call this function to validate the JWT credential sent from client-side
async function verifyCredentials(credential) {
const ticket = await client.verifyIdToken({
idToken: credential,
- });
- const payload = ticket.getPayload();
+ })
+ const payload = ticket.getPayload()
return payload
}
@@ -297,14 +461,16 @@ verifyCredentials('JWT_CREDENTIAL_STRING_FROM_CLIENT_SIDE').then((userInfo) => {
// use userInfo and do your server-side logics here
}).catch((error) => {
// validation failed and userinfo was not obtained
-});
+})
```
### Custom Login Button
-Callback will be triggered with a response containing an [OAuth2 authorization code](https://developers.google.com/identity/oauth2/web/guides/use-code-model#auth_code_handling)
+###### Validating Auth Code
+
+If you are using [googleAuthCodeLogin function](#googleauthcodelogin-function) or [google.accounts.oauth2.initCodeClient](https://developers.google.com/identity/oauth2/web/reference/js-reference#google.accounts.oauth2.initCodeClient), the response you get on successfull login contains an [OAuth2 authorization code](https://developers.google.com/identity/oauth2/web/guides/use-code-model#auth_code_handling)
-Here is a sample Node.js code snippet for validating the OAuth2 authorization code
+Here is a sample Node.js code snippet for validating this OAuth2 authorization code from the response
```javascript
const { OAuth2Client } = require('google-auth-library')
@@ -314,7 +480,7 @@ const client = new OAuth2Client(
clientSecret: 'YOUR_GOOGLE_CLIENT_SECRET',
redirectUri: 'YOUR_GOOGLE_REDIRECT_URI'
}
-);
+)
// Call this function to validate OAuth2 authorization code sent from client-side
async function verifyCode(code) {
@@ -322,7 +488,7 @@ async function verifyCode(code) {
client.setCredentials({ access_token: tokens.access_token })
const userinfo = await client.request({
url: 'https://www.googleapis.com/oauth2/v3/userinfo'
- });
+ })
return userinfo.data
}
@@ -330,7 +496,35 @@ verifyCode('AUTHORIZATION_CODE_FROM_CLIENT_SIDE').then((userInfo) => {
// use userInfo and do your server-side logics here
}).catch((error) => {
// validation failed and userinfo was not obtained
-});
+})
+```
+
+###### Validating Access Token
+
+If you are using [googleTokenLogin function](#googleauthcodelogin-function) or [google.accounts.oauth2.initTokenClient](https://developers.google.com/identity/oauth2/web/reference/js-reference#google.accounts.oauth2.initTokenClient), the response you get on successfull login contains an [Access Token](https://developers.google.com/identity/oauth2/web/guides/use-token-model)
+
+Here is a sample Node.js code snippet for validating this Access Token from the response
+
+```javascript
+const { OAuth2Client } = require("google-auth-library")
+const client = new OAuth2Client()
+
+// Call this function to validate OAuth2 authorization code sent from client-side
+async function verifyToken(token) {
+ client.setCredentials({ access_token: token })
+ const userinfo = await client.request({
+ url: "https://www.googleapis.com/oauth2/v3/userinfo",
+ });
+ return userinfo.data
+}
+
+verifyToken("ACCESS_TOKEN_FROM_CLIENT_SIDE")
+ .then((userInfo) => {
+ console.log(userInfo)
+ })
+ .catch((error) => {
+ console.log(error)
+ })
```
### Combination of One Tap Prompt and Custom Button
@@ -341,16 +535,103 @@ If you are using the combination of these like below, then the response caught i
-
+
-```
\ No newline at end of file
+```
+
+## Nuxt 3
+
+### Initialize vue3-google-login inside the plugins directory
+For example, create a file named vue3-google-login.client.ts and place it inside the plugins directory, this will register `GoogleLogin` component globally
+> :exclamation: Make sure to use `.client` suffix in the file name to load the plugin only on the client side.
+```js
+// plugins/vue3-google-login.client.ts
+import vue3GoogleLogin from 'vue3-google-login'
+
+export default defineNuxtPlugin((nuxtApp) => {
+ nuxtApp.vueApp.use(vue3GoogleLogin, {
+ clientId: 'YOUR_GOOGLE_CLIENT_ID'
+ })
+});
+```
+
+## No SSR support
+The [GoogleLogin component](#googlelogin-component) doesn't render properly on the server side because the Google login button relies on an iframe button provided by Google and needs the [Google 3P Authorization JavaScript Library](https://developers.google.com/identity/oauth2/web/guides/load-3p-authorization-library) to be loaded on the client side. So, if you are using SSR-supporting frameworks like Nuxt 3 or Quasar, make sure the GoogleLogin component is rendered on the client side.
+
+> :bulb: You can also directly import the [GoogleLogin component](#googlelogin-component) and utilize the client-id prop if you don't wish to initialize the plugin at the framework entry point and register the GoogleLogin component globally.
+
+### Nuxt 3
+On Nuxt 3 application, wrap the GoogleLogin component in the [`ClientOnly` component](https://nuxt.com/docs/api/components/client-only), which is used for purposely rendering a component only on client side.
+
+```vue
+
+
+
+```
+
+### Quasar in SSR mode
+You can use [`QNoSsr` component](https://quasar.dev/vue-components/no-ssr/) for rendering the login button on client side while running a Quasar app on SSR mode.
+```vue
+
+
+
+```
+
+### Vike
+In Vike applications, you can use the [clientOnly helper](https://vike.dev/clientOnly#vue), which is used for purposely rendering a component only on client side.
+
+```vue
+
+
+
+
+
+```
+
+## Options
+
+### Plugin options and GoogleLogin component props
+Options of plugin used at [initializing in main.js](#initialize-the-plugin) and prop values in [GoogleLogin component](#googlelogin-component) are similar.
+
+| Name | Type | Description |
+| --------------- | :------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| clientId | String | Google API client ID |
+| prompt | Boolean | Set this to true to display the One Tap prompt
Setting this value as a prop of [GoogleLogin component](#googlelogin-component) will be ignored if this is set as option on [initializing the plugin](#initialize-the-plugin) |
+| autoLogin | Boolean | Setting this value to true will make the prompt to automatically log in without any user interactions
For this to work `prompt` must be set to true
Setting this value as a prop of [GoogleLogin component](#googlelogin-component) will be ignored if this is set as option on [initializing the plugin](#initialize-the-plugin) |
+| popupType | String | Type of callback response, accepts either `CODE` or `TOKEN`, this only works if a custom button is added as a slot button |
+| callback | Function | The callback function which will be trigger with a response object once the login is completed |
+| error | Function | An error function which will be triggered on any error encountered while showing the prompts/popups |
+| idConfiguration | Object | IdConfiguration object for initializing, see list of fields and descriptions of the IdConfiguration [here](https://developers.google.com/identity/gsi/web/reference/js-reference#IdConfiguration) |
+| buttonConfig | Object | Configuration of the login button rendered by Google, see list of fields and descriptions of these configurations [here](https://developers.google.com/identity/gsi/web/reference/js-reference#GsiButtonConfiguration) |
+
+### Function googleOneTap
+`googleOneTap` function accepts the following options
+
+
+| Name | Type | Description |
+| ------------------ | :------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| clientId | String | Google API client ID |
+| context | String | The title and words in the One Tap prompt, this can be `signin`|`signup`|`use` see [here](https://developers.google.com/identity/gsi/web/guides/change-sign-in-context) for more info |
+| autoLogin | Boolean | Set this to true if you want the one-tap promt to automatically login |
+| cancelOnTapOutside | Boolean | Controls whether to cancel the prompt if the user clicks outside of the prompt |
+
+### Function googleAuthCodeLogin and googleTokenLogin
+`googleAuthCodeLogin` and `googleTokenLogin` functions accepts an object with client id, this is useful if you are not planning to initialize the plugin in main.js
+
+
+| Name | Type | Description |
+| -------- | :----: | :------------------- |
+| clientId | String | Google API client ID |
diff --git a/index.html b/index.html
index 030a6ff..11603f8 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,6 @@
-
+
+
+
-
-
-This plugin helps you to add Login With Google feature to your Vue 3 application
-
+
-
-
-
-
+
+ 
+ GitHub
+