BUY THE FULL SOURCE CODE
Welcome folks today in this blog post we will be integrating auth0
library in Vue 3 to integrate google oauth2
login and display profile info
of user in browser. All the full source code of the application is shown below.
Get Started
In order to get started you need to make a new vue
app using the below command as shown below
vue create vueapp
cd vueapp
npm i @auth0/auth-vue
And now you will see the below directory
structure of the final react.js project as shown below
And after that you need to go main.js
file and copy paste the following code
main.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { createApp } from "vue"; import App from "./App.vue"; import { createAuth0 } from '@auth0/auth0-vue'; createApp(App) .use( createAuth0({ domain: "##replaceyourdomainurl##", clientId: "##replaceyourclientid##", authorizationParams: { redirect_uri: window.location.origin, }, }) ) .mount("#app"); |
Here you need to replace your own details
from the auth0 dashboard as shown below
Here you need to replace the localhost:8080
url to the callback url and also to the web origin
and also to the logout url also.
Now we need to go to App.vue
file and copy paste the below code
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 |
<template> <div> <div v-if="isAuthenticated"> <h3>User Profile</h3> <h3>{{ user.name }}</h3> <h3>{{ user.email }}</h3> <p>{{ user.picture }}</p> <button @click="logout">Logout</button> </div> <div v-else> <button @click="login">Login</button> </div> </div> </template> <script> import { useAuth0 } from '@auth0/auth0-vue'; export default { setup() { const { loginWithPopup, logout, user, isAuthenticated } = useAuth0(); return { login: () => { loginWithPopup(); }, logout: () => { logout(); }, user, isAuthenticated }; } }; </script> |
As you can see we are showing the profile
details of the user and also we have buttons of login
and logout
and also we are automatically detected whether the user is currently logged
in or not.
BUY THE FULL SOURCE CODE