azure - how to create an iOS app using Ionic Vue capable of logging into an Microsoft personal account - Stack Overflow

I have been trying to build an iOS app using Ionic Vue, which should be capable of logging into an Microsoft personal account, because i want to retrieve files from onedrive, though this question have nothing to do with onedrive, but that's why i named the project onedrive.gpt4o.

developement enviroment:

• VS code
• Ionic 7.2
• Vue(typescript)
• iOS 18.3

Have spent like almost 4 days working on it, and asked ChatGPT, Claude, Deepseek, etc.. and of course Google, Bing and Duckduckgo.. but no luck. below are 3 key files most of them offered by AI and i added some modifications, and catched errors are commented in the code files:

msalConfig.ts

import { PublicClientApplication, Configuration } from "@azure/msal-browser";
import { isPlatform } from "@ionic/vue";

const tenantId = "consumers"; // common or consumers i guess are both ok for personal Microsoft accounts
const clientId = "6ceeaf10-2b9d-4519-8c59-9cb9fde36c05";
// msauth://onedrive.gpt4o        // same error
// msauth.onedrive.gpt4o://auth   // same error
const redirectUri = isPlatform("hybrid") ? "onedrive.gpt4o://localhost" : "http://localhost:8100";

const msalConfig: Configuration = {
  auth: {
    authority: `/${tenantId}`,
    clientId: clientId,
    redirectUri: redirectUri,
    //navigateToLoginRequestUrl: false //
  },
  cache: {
    cacheLocation: "localStorage", // Ensures login persistence
    storeAuthStateInCookie: true, // Helps with Safari issues
  },
};

const msalInstance = new PublicClientApplication(msalConfig);
// Ensure instance is initialized before use

export { msalInstance, redirectUri };

capacitor.config.ts

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'onedrive.gpt4o',
  appName: 'onedrive.gpt4o',
  webDir: 'dist',
  server: {
    //androidScheme: 'https'
    iosScheme: 'onedrive.gpt4o',
  },
  plugins: {
    App: {
      deepLinks: [
        {
          scheme: 'onedrive', // Custom scheme for deep linking
          host: 'onedrive.gpt4o', // Match your redirect URI
          path: '', // Optional: specify a path
        },
      ],
    },
  },
};

export default config;

HomePage.vue

<template>
  <ion-page>
    <ion-header>
      <ion-toolbar>
        <ion-title>Microsoft Login</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content>
      <ion-button @click="signIn">Login with Microsoft</ion-button>
      <ion-button @click="signOut" v-if="user">Logout</ion-button>
      <p v-if="user">Welcome, {{ user.name }}</p>
      <br>
      <ion-button @click="checkAccount">check account</ion-button>
    </ion-content>
  </ion-page>
</template>

<script setup lang="ts">
import { IonButton, IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import { ref, onMounted } from "vue";
import { msalInstance, redirectUri } from "../msalConfig";
import { App } from '@capacitor/app';
function generatePKCE() {
  const codeVerifier = Array.from(crypto.getRandomValues(new Uint8Array(32)))
    .map((x) => ("0" + x.toString(16)).slice(-2))
    .join("");

  return {
    codeVerifier,
    codeChallenge: btoa(codeVerifier)
      .replace(/\+/g, "-")
      .replace(/\//g, "_")
      .replace(/=+$/, ""),
  };
}

const user = ref();

// Check if user is already logged in
const checkAccount = async () => {
  await msalInstance.initialize();
  const accounts = msalInstance.getAllAccounts();
  console.log("checkAccount:", accounts)
  if (accounts.length > 0) {
    user.value = accounts[0];
  }
};

App.addListener('appUrlOpen', async (data) => {
  console.log("