I am trying to make users sign up and login using Azure B2C Tenant by clicking a Signup/Login button.I can't find any way to make this work and dont find any repo or code using msal-browser with sveltekit. I see both angular and react have specific modules for msal but not for sveltekit.
I see some demos use msal-node and handle it on the server, but i want it done on the client as you can do so easily with firebase. I just want people to sign up/login and check if the user is signed in.
I constantly get this error
BrowserAuthError: uninitialized_public_client_application: You must call and await the initialize function before attempting to call any other MSAL API. For more visit: aka.ms/msaljs/browser-errors
This is my code
+page.svelte
<script lang="ts"> import '../app.css'; import { onMount } from 'svelte'; import SignupForm from './SignupForm.svelte'; import TheChatMain from './TheChatMain.svelte'; import { user } from '$lib/store'; import { loginRequest, msalInstance } from '$lib/auth'; onMount(async () => { const accounts = msalInstance.getAllAccounts(); if (accounts.length > 0) { user.set(accounts[0]); } console.log('accounts', accounts); msalInstance.setActiveAccount(accounts[0]); }); const onSignIn = async () => { try { await msalInstance.loginPopup(loginRequest).then((response) => { console.log('response', response); }); } catch (error) { console.error(error); } };</script><section> {#if $user}<TheChatMain /> {:else}<SignupForm {onSignIn} /> {/if}</section>
auth.ts file
export const msalConfig = { auth: { clientId: b2cPolicies.clientId, // This is the Application (client) ID from Azure AD B2C authority: b2cPolicies.authorities.signUpSignIn.authority, // This is your B2C tenant authority URL knownAuthorities: [b2cPolicies.authorityDomain], // This is your B2C tenant authority URL redirectUri: 'http://localhost:5173' }, cache: { cacheLocation: 'localStorage', storeAuthStateInCookie: false }, system: { loggerOptions: { loggerCallback: (level: LogLevel, message: string, containsPii: boolean) => { if (containsPii) { return; } switch (level) { case LogLevel.Error: console.error(message); return; case LogLevel.Info: console.info(message); return; case LogLevel.Verbose: console.debug(message); return; case LogLevel.Warning: console.warn(message); return; } } } }};export const msalInstance = new PublicClientApplication(msalConfig);export const loginRequest = { scopes: ['openid', 'profile']};
store.ts
// src/lib/store.tsimport { writable } from 'svelte/store';import type { AccountInfo } from '@azure/msal-browser';// Initialize the user store with null and specify the type it can holdexport const user = writable<AccountInfo | null>(null);