Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Azure B2C Authentication with Sveltekit

$
0
0

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

Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>