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

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");

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

<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>

<div>

<h3>User Profile</h3>

<h3>{{ user.email }}</h3>

<p>{{ user.picture }}</p>

<button @click="logout">Logout</button>

</div>

<button @click="login">Login</button>

</div>

</template>

import { useAuth0 } from '@auth0/auth0-vue';

export default {

setup() {

const { loginWithPopup, logout, user, isAuthenticated } = useAuth0();

return {

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.