Introduction

Because there is no build in Auth library for nuxt 3 yet, I am trying to create my own composable called useAuth.

The Problem

I am getting a startPerformanceMeasurement error when i try to call the loginRedirect or loginPopup method.

Uncaught (in promise) TypeError: this.startPerformanceMeasurement is not a function
    at PerformanceClient2.startMeasurement (PerformanceClient.ts:100:45)
    at BrowserPerformanceClient2.startMeasurement (BrowserPerformanceClient.ts:46:55)
    at RedirectClient2.<anonymous> (StandardInteractionClient.ts:204:64)
    at step (_tslib.js:87:23)
    at Object.next (_tslib.js:68:53)
    at _tslib.js:61:71
    at new Promise (<anonymous>)
    at __awaiter (_tslib.js:57:12)
    at StandardInteractionClient2.getDiscoveredAuthority (StandardInteractionClient.ts:202:115)
    at RedirectClient2.<anonymous> (StandardInteractionClient.ts:142:48)

Code

composables/useAuth.js

import * as msal from '@azure/msal-browser'

let state = {
    authService: null,  
}

export const useAuth = () => {
    // use public configuration from nuxt 
    var config = useAppConfig();
    //create authentication instance
    state.authService = new msal.PublicClientApplication(config.msalConfig);

    //return signIn method
    return {
        signIn
    }
}

const signIn = async () => {
    const tokenRequest = {
        scopes: [
            'openid', 
            'offline_access', 
            'Users.Read'
        ],
    }
    const response = await state.authService
        .loginRedirect(tokenRequest)
        .then(() => {

        })
        .catch(err => {
            console.log(err) //TypeError: this.startPerformanceMeasurement is not a function
        });
}

Index.vue

<script setup>
if(process.client) {
    const auth = useAuth()
    auth.signIn()   
}
</script>