Google-onetap-signin-client-vue - Vue 3 Demo of using the Google One-Tap Signin in a modular way (Client Code)

Overview

vue-google-onetap-signin

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Main Configuration

Enviornment Variables

If you're new to environmental variables make sure you restart the server after updating them (the credentials are NOT refreshed on hot reload).

Also, environmental variables must be prepended with VUE_APP_ to be imported into Vue 3 Applications, as shown in example.env. Turn example.env into .env. Also it's likely that whatever platform the client is hosted on will likely need the .env variables manually added in on the host site as .env files don't (and shouldn't) get uploaded to Github.

Client ID

You can create a google API's Project and get a Client ID as documented here https://developers.google.com/identity/gsi/web/guides/get-google-api-clientid

Google One-Tap Signin Server

Here's a sample repo with the server setup to listen on the route /verify-token (route can also be set to anything) https://example.com

Google-One-Tap Repo

This is a Vue 3 Example Project utilizing this npm package. There are additional instructions here. https://github.com/BurakGur/google-one-tap

Live Demo

https://vue-google-onetap-signin-demo.netlify.app/

You might also like...
Vue.js demo that uses NASA API "Astronomy Photo of the Day".

nasa-demo Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints

demo-vue-product-ecommerdemo

demo-vue Project setup npm install Compiles and hot-reloads for development npm run serve Compiles and minifies for production npm run build Lints

Demo vue.js app to show Alchemy NFT API

A simple vue.js app made to play with Alchemy API

Pathfinding demo on the XRP Ledger in an Vue (Typescript) project

XRP Ledger pathfinding-demo XRPL Pathfinding Demo: select destination account & currency, select source account and see avilable payment options using

A quick demo on how to set up and use Vuex to create a events messaging system

A quick demo on how to set up and use Vuex to create a events messaging system

Nuxtjs-case - nuxt.js demo

nuxt-demo Build Setup # install dependencies $ npm install # serve with hot reload at localhost:3000 $ npm run dev # build for production and launch

Easy way to do seo with vue

vue-seo Full Documentation Aim The aim of this Vue plugin is to help you indexing your Vue powered website using all the greatness of Vue. We also wan

An easy way to generate readme/GitHub profile readme written in Vue.js/Quasar.
An easy way to generate readme/GitHub profile readme written in Vue.js/Quasar.

An easy way to generate readme/GitHub profile readme written in Vue.js/Quasar.

A platform collecting facts --data and evidence-- and presenting them AS IT IS in the useful way. No prejudice!
A platform collecting facts --data and evidence-- and presenting them AS IT IS in the useful way. No prejudice!

FactFinder.app @factfinderbot " Only Facts We Trust, No Prejudice! " Live (Release): https://factfinder.app Preview (Dev): https://fact-finder.vercel.

Owner
Zensynthium
Web Developer who is also interested in Machine Learning, AI, and Game Development. Lover of all things Science and Technology (also Chipotle Bowls).
Zensynthium
A One-on-one Chat App In Vue With CometChat View Details

Build one-on-one chat in your Vue app This is the demo app that we build in the Build one-on-one chat in your Vue app tutorial. Technology This demo u

CometChat Pro Tutorials 5 Dec 29, 2020
Singlepage.js is a pure Javascript portal platform for building modular Web applications

Singlepage.js is a pure Javascript portal platform for building modular Web applications.

Padmanabh Dabke 0 Jan 22, 2021
Zerobytes-gridsome - An implementation for zerobytes.one using VUE and its framework Gridsome

A starter documentation theme for Gridsome. Installation If you have the Gridsome CLI installed, simply run: gridsome create your-project https://gith

Mohammad Ali Abbas 1 Feb 25, 2022
🕵️‍♀️🕵️‍♂️ One easy-to-use component for Vue.js to build beautiful responsive timelines.

Documentation You can browse the documentation for Vue Timeline on the website. Installation npm install @growthbunker/vuetimeline # Or if you prefer

Julien Le Coupanec 322 Sep 28, 2022
One component to link them all 🔗

VueLink - One component to link them all! Lightweight wrapper component for external and vue-router links. ?? Features Tiny functional component SSR-s

Developmint GbR 65 Aug 31, 2022
Leverages Netlify Graph to authenticate against GitHub, and then execute one of stored GraphQL queries

⭐ gravity A web application designed to visualize cross-referenced issues in a GitHub repository. It leverages Netlify Graph to authenticate against G

Den Delimarsky 2 Feb 21, 2022
Full-stack @Linkedin clone but this one is a little different 👨🏻‍💻

Linkedout Running project $ docker-compose up Accessing the linkedout from a browser The starter linkedout works with a load balancer that binds to po

Cihat Salik 6 Jul 25, 2022
One simple import to get component information for your design system

vue-metainfo-loader This loader extracts from SFC: Component description Component name Component props name description type default validator requir

Max Sosnov 4 Mar 18, 2022
Avatar editor for Vue.js. Demo on : https://fpluquet.github.io/vue-avatar-editor/

vue-avatar-editor Facebook like, avatar / profile picture component. This is Vue.js clone of mosch/react-avatar-editor Resize, rotate and crop your up

null 86 Aug 17, 2022
Demo of global event bus usage in vue

This is a quick example of how to use a global event bus to your advantage with vue-geb. Why ? I use a global event bus mainly to split my UI interact

null 6 Jul 17, 2018