npm i vue3-google-login
main.ts
1 2 3 4 5 6 7 8 9 10 11 |
import { createApp } from 'vue' import App from './App.vue' import vue3GoogleLogin from 'vue3-google-login' const app = createApp(App) app.use(vue3GoogleLogin, { clientId: 'YOUR_GOOGLE_CLIENT_ID' }) app.mount('#app') |
Now here in the above code you need to replace your own client_id
which can be created in google cloud console
App.vue
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<script setup> import { ref } from 'vue' import jwt_decode from 'jwt-decode' // A popular library to decode JWT const userProfile = ref(null) const callback = (response) => { console.log("Handle the response", response) // Check if we received a credential (JWT) if (response?.credential) { try { // Decode the JWT to extract profile info const decoded = jwt_decode(response.credential) console.log('Decoded JWT:', decoded) // Extract user profile information from decoded JWT userProfile.value = { name: decoded.name, email: decoded.email, imageUrl: decoded.picture, // Profile picture URL } } catch (error) { console.error('Failed to decode JWT:', error) } } } </script> <template> <div> <GoogleLogin :callback="callback"/> <!-- Show user profile info after login --> <div v-if="userProfile"> <h3>Welcome, {{ userProfile.name }}!</h3> <p>Email: {{ userProfile.email }}</p> <img :src="userProfile.imageUrl" alt="Profile Picture" width="100" /> </div> </div> </template> |