Ionic & Capacitor (Vue)

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";

import { IonicVue } from "@ionic/vue";

import { createAuth0 } from "@auth0/auth0-vue";
import config from "./auth.config";

// ..

// Build the URL that Auth0 should redirect back to
const redirect_uri = `${config.appId}://{yourDomain}/capacitor/${config.appId}/callback`;

const app = createApp(App).use(IonicVue).use(router);

app.use(
  createAuth0({
    domain: "{yourDomain}",
    clientId: "{yourClientId}",
    useRefreshTokens: true,
    useRefreshTokensFallback: false,
    authorizationParams: {
      redirect_uri
    }
  })
);

router.isReady().then(() => {
  app.mount("#app");
});

<template>
  <ion-button @click="login">Log in</ion-button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { IonApp, IonRouterOutlet } from "@ionic/vue";

import { useAuth0 } from "@auth0/auth0-vue";
import { App as CapApp } from "@capacitor/app";
import { Browser } from "@capacitor/browser";

export default defineComponent({
  components: {
    IonButton,
  },
  setup() {
    const { loginWithRedirect } = useAuth0();

    const login = async () => {
      await loginWithRedirect({
        openUrl: (url: string) =>
          Browser.open({
            url,
            windowName: "_self",
          }),
      });
    };

    return { login };
  },
});
</script>

<template>
  <ion-app>
    <ion-router-outlet />
  </ion-app>
</template>

<script lang="ts">
import { useAuth0 } from "@auth0/auth0-vue";
import { IonApp, IonRouterOutlet } from "@ionic/vue";
import { defineComponent } from "vue";
import { App as CapApp } from "@capacitor/app";
import { Browser } from "@capacitor/browser";

export default defineComponent({
  name: "App",
  components: {
    IonApp,
    IonRouterOutlet,
  },
  setup() {
    const { handleRedirectCallback } = useAuth0();

    // Handle the 'appUrlOpen' event and call `handleRedirectCallback`
    CapApp.addListener('appUrlOpen', async ({ url }) => {
      if (url.includes('state') && (url.includes('code') || url.includes('error'))) {
        await handleRedirectCallback(url);
      }
      // No-op on Android
      await Browser.close();
    });
  },
});
</script>

<template>
  <ion-button @click="onLogout">Log out</ion-button>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useAuth0 } from "@auth0/auth0-vue";
import { Browser } from "@capacitor/browser";
import { IonButton } from "@ionic/vue";
import { callbackUri } from "../auth.config";

export default defineComponent({
  components: {
    IonButton,
  },
  setup() {
    const { logout } = useAuth0();

    const onLogout = async () => {
      await logout({
        logoutParams: {
          returnTo: callbackUri,
        },
        openUrl: (url: string) =>
          Browser.open({
            url,
            windowName: "_self",
          }),
      });
    };

    return {
      onLogout,
    };
  },
});
</script>

<template>
  <div v-if="isLoading">Loading ...</div>
  <div v-else-if="!user"></div>
  <div v-else class="profile-container">
    <ion-avatar>
      <img :src="user.picture" :alt="user.name" />
    </ion-avatar>
    <h2>{{ user.name }}</h2>
    <p>{{ user.email }}</p>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { useAuth0 } from "@auth0/auth0-vue";
import { IonAvatar } from "@ionic/vue";

export default defineComponent({
  components: {
    IonAvatar,
  },
  setup() {
    const { user, isLoading } = useAuth0();

    return { user, isLoading };
  },
});
</script>