[{"data":1,"prerenderedAt":8319},["Reactive",2],{"content-query-8SJC9bJYnI":3,"keep-reading:/blog/stuck-on-the-third-chord":408},{"_path":4,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":8,"description":9,"created_at":10,"author":11,"categories":12,"banner":16,"banner_alt":17,"draft":6,"head":18,"body":28,"_type":403,"_id":404,"_source":405,"_file":406,"_extension":407},"/blog/stuck-on-the-third-chord","blog",false,"","I always got stuck on the third chord, so I built a tool for it","I can play plenty of chords but never knew which one comes next. So I built WhatsTheNextChord: pick the chord you're on, get a few that fit, shown as guitar shapes.","2026-10-27","Dulan Katukurundage",[13,14,15],"Side Projects","Music","Nuxt","https://whatsthenextchord.com/og-image.jpg","WhatsTheNextChord banner",{"meta":19},[20,23,25],{"name":21,"content":22},"keywords","WhatsTheNextChord, chord progressions, songwriting, guitar, next chord, music theory, Drop D, Nuxt, side project",{"name":24,"content":11},"author",{"name":26,"content":27},"copyright","©2026 Dulan Katukurundage",{"type":29,"children":30,"toc":391},"root",[31,39,44,49,65,72,86,91,111,117,122,131,136,142,147,152,157,163,177,182,187,201,207,212,234,239,247,252,258,263,268,274,279,299,312,318,323,328,342,347,352,358,363,386],{"type":32,"tag":33,"props":34,"children":35},"element","p",{},[36],{"type":37,"value":38},"text","I've been playing guitar for years, and I can grab a lot of chords without thinking: open, barre, power chords, the drop-tuned shapes half my playlist is built on. I listen to music basically all day, mostly metal and rock. So you'd think writing a progression of my own would be easy.",{"type":32,"tag":33,"props":40,"children":41},{},[42],{"type":37,"value":43},"It isn't. The first chord is easy (it's wherever my hand lands). The second one usually turns up from somewhere. And then I'm stuck on the third, every single time, cycling through the same handful of shapes until the idea goes stale and I put the guitar down.",{"type":32,"tag":33,"props":45,"children":46},{},[47],{"type":37,"value":48},"The problem is that I never learned music theory. My hands know the chords and my ears know when something sounds right, but there's nothing in between to tell me what's worth trying next. It's a bit like knowing a lot of words in a language without knowing its grammar: you can say plenty, you just can't build a sentence.",{"type":32,"tag":33,"props":50,"children":51},{},[52,54,63],{"type":37,"value":53},"What I wanted was something that would just tell me: here are a few chords that tend to work after this one, and here's how to play them. I couldn't find one that worked the way I wanted, so I built ",{"type":32,"tag":55,"props":56,"children":60},"a",{"href":57,"rel":58},"https://whatsthenextchord.com",[59],"nofollow",[61],{"type":37,"value":62},"WhatsTheNextChord",{"type":37,"value":64},".",{"type":32,"tag":66,"props":67,"children":69},"h2",{"id":68},"the-tools-i-found-werent-built-for-a-guitar",[70],{"type":37,"value":71},"The tools I found weren't built for a guitar",{"type":32,"tag":33,"props":73,"children":74},{},[75,77,84],{"type":37,"value":76},"Chord suggestion tools already exist. Hooktheory's ",{"type":32,"tag":55,"props":78,"children":81},{"href":79,"rel":80},"https://www.hooktheory.com/hookpad",[59],[82],{"type":37,"value":83},"Hookpad",{"type":37,"value":85}," has a \"Magic\" palette that ranks next chords by how often they show up in real songs, and Scaler and ChordChord do their own versions of it. But they lean theory-first (scale degrees, piano keys), or they generate a whole progression for you, and none of them cared which tuning I was in or what the chord looks like on a fretboard.",{"type":32,"tag":33,"props":87,"children":88},{},[89],{"type":37,"value":90},"What I wanted was smaller:",{"type":32,"tag":92,"props":93,"children":94},"ul",{},[95,101,106],{"type":32,"tag":96,"props":97,"children":98},"li",{},[99],{"type":37,"value":100},"Pick the chord you're on and get three to five options. No more, because staring at fifteen options is the same problem with extra steps.",{"type":32,"tag":96,"props":102,"children":103},{},[104],{"type":37,"value":105},"Show guitar shapes first, and theory only when I ask for it.",{"type":32,"tag":96,"props":107,"children":108},{},[109],{"type":37,"value":110},"Get from \"I'm stuck\" to \"I'm playing again\" in seconds, with no account and no setup.",{"type":32,"tag":66,"props":112,"children":114},{"id":113},"what-it-does",[115],{"type":37,"value":116},"What it does",{"type":32,"tag":33,"props":118,"children":119},{},[120],{"type":37,"value":121},"You pick the chord you're on and get three to five chords that tend to follow it, each with shapes you can play straight away, an easy, medium or hard rating, and a one-line reason in plain English. Start on G, for example, and it suggests C, Em, D, Am and Bm. Add the one that sounds right, and the next round follows the key your progression implies.",{"type":32,"tag":33,"props":123,"children":124},{},[125],{"type":32,"tag":126,"props":127,"children":130},"img",{"alt":128,"src":129},"The WhatsTheNextChord workspace with the progression G, Em, C and five suggestions for what comes after C, each with a chord diagram","/images/blog/whatsthenextchord/workspace.webp",[],{"type":32,"tag":33,"props":132,"children":133},{},[134],{"type":37,"value":135},"Moods (Bright, Dark, Warm, Tense, Dreamy, Familiar, Unexpected) reorder the suggestions without hiding any chords. There are eight genre presets, and yes, one of them is Metal rhythm (I'm not sure what you expected). It handles Standard, Drop D and Drop C tuning, each with its own shapes, and your progression autosaves in the browser.",{"type":32,"tag":66,"props":137,"children":139},{"id":138},"no-ai-on-purpose",[140],{"type":37,"value":141},"No AI, on purpose",{"type":32,"tag":33,"props":143,"children":144},{},[145],{"type":37,"value":146},"Every candidate chord gets a score, and the score is a weighted sum of five things: how naturally it follows in the key (40%), how easy the shape is to play (25%), how well it matches the mood (20%), how smoothly the notes move from one chord to the next (10%), and a little variety so you don't get the same three chords forever (5%). The key is inferred from what you've played so far, and your first chord counts as \"home\" until there's more evidence.",{"type":32,"tag":33,"props":148,"children":149},{},[150],{"type":37,"value":151},"There's no machine learning in it, and the same chords always give the same suggestions. In 2026, \"does it use AI?\" is the first question anyone asks about a new tool, and here the answer is no, on purpose: when suggestions are predictable, you can learn from them. Play the same G-to-Em move enough times and you start to hear why it works (theory, sneaking in through the back door).",{"type":32,"tag":33,"props":153,"children":154},{},[155],{"type":37,"value":156},"Three rules came from playing with it, not from a textbook. Plain chords beat their fancier extensions by default (nobody stuck on chord three wants a Cmaj7 when a C would do). There's one suggestion per root note, otherwise C, Cmaj7 and Csus2 eat three of your four slots. And power chords only show up after a power chord, because an A5 in the middle of a campfire song is just noise.",{"type":32,"tag":66,"props":158,"children":160},{"id":159},"checking-my-guesses-against-real-songs",[161],{"type":37,"value":162},"Checking my guesses against real songs",{"type":32,"tag":33,"props":164,"children":165},{},[166,168,175],{"type":37,"value":167},"The first version's chord-to-chord tables were hand-written, which is a polite way of saying educated guesses. So I checked them against the ",{"type":32,"tag":55,"props":169,"children":172},{"href":170,"rel":171},"https://rockcorpus.midside.com/",[59],[173],{"type":37,"value":174},"Rock Corpus",{"type":37,"value":176},": 200 songs from Rolling Stone's 500 Greatest, analysed chord by chord by two music theorists, Trevor de Clercq and David Temperley.",{"type":32,"tag":33,"props":178,"children":179},{},[180],{"type":37,"value":181},"A few things jumped out. After a IV chord, songs go back home to I 58% of the time, basically the same as after a V (57%), even though every theory explainer I'd skimmed treats V→I as the main event. And the embarrassing one: after a bVII, songs land on I almost half the time (48%), and my tables gave that move no bonus at all. bVII→I is about as rock as a chord change gets, I listen to rock all day, and my own engine was ignoring it.",{"type":32,"tag":33,"props":183,"children":184},{},[185],{"type":37,"value":186},"These days the default tables and the genre presets come from a much bigger pool, around 680,000 songs pulled from Ultimate Guitar tabs, crunched offline and shipped as plain data. The Rock Corpus stays as the sanity check. (It's mostly songs from the '50s to the '70s, so I wouldn't trust it alone for anything heavier.)",{"type":32,"tag":33,"props":188,"children":189},{},[190,192,199],{"type":37,"value":191},"I also read ",{"type":32,"tag":55,"props":193,"children":196},{"href":194,"rel":195},"https://github.com/czhuang/ChordRipple",[59],[197],{"type":37,"value":198},"ChordRipple",{"type":37,"value":200},", a 2016 chord recommender tested with music students. They complained about too many options, which made me feel better about the three-to-five cap, and asked for a way to say \"I'm trying to end here\" versus \"keep it going\". I'll come back to that one.",{"type":32,"tag":66,"props":202,"children":204},{"id":203},"the-drop-d-problem",[205],{"type":37,"value":206},"The Drop D problem",{"type":32,"tag":33,"props":208,"children":209},{},[210],{"type":37,"value":211},"My first take on Drop D was lazy: copy the standard-tuning shapes and switch off the low string. The suggestions were fine. The shapes weren't.",{"type":32,"tag":33,"props":213,"children":214},{},[215,217,224,226,232],{"type":37,"value":216},"Csus2 would come up with the open shape and a 3rd-fret barre, but not the one a Drop D player actually reaches for: ",{"type":32,"tag":218,"props":219,"children":221},"code",{"className":220},[],[222],{"type":37,"value":223},"10 10 12 12 x x",{"type":37,"value":225},", the open ",{"type":32,"tag":218,"props":227,"children":229},{"className":228},[],[230],{"type":37,"value":231},"0 0 2 2 x x",{"type":37,"value":233}," shape moved up the neck. And every barre chord had its low string muted, which kind of defeats the point of tuning it down in the first place.",{"type":32,"tag":33,"props":235,"children":236},{},[237],{"type":37,"value":238},"So I gave Drop D its own low-root shapes (sus2, sus4, six-string major and minor with the bottom three strings on one fret, etc.), written for the tuning instead of borrowed from standard. Drop C gets them by shifting everything down a whole step.",{"type":32,"tag":33,"props":240,"children":241},{},[242],{"type":32,"tag":126,"props":243,"children":246},{"alt":244,"src":245},"A Csus2 suggestion in Drop D, showing the 10th-fret shape 10 10 12 12 x x","/images/blog/whatsthenextchord/drop-d-csus2.webp",[],{"type":32,"tag":33,"props":248,"children":249},{},[250],{"type":37,"value":251},"That's the whole guitar-first argument in one bug. A table can tell you a chord fits, but if the shape isn't the one your hand expects, the suggestion is useless.",{"type":32,"tag":66,"props":253,"children":255},{"id":254},"making-it-look-like-a-gadget-from-2003",[256],{"type":37,"value":257},"Making it look like a gadget from 2003",{"type":32,"tag":33,"props":259,"children":260},{},[261],{"type":37,"value":262},"The first UI was warm paper and sand colours, and it felt like a notes app. The second was a dark DAW-style studio, more familiar but kinda generic. The third one stuck: a Y2K hardware device with liquid-chrome bezels, glossy gel buttons, LCD readouts and LEDs, inspired by the Suzuki QChord and Winamp-era skins. That one's pure nostalgia: I'm a '90s kid, and this is what cool tech looked like when I was growing up.",{"type":32,"tag":33,"props":264,"children":265},{},[266],{"type":37,"value":267},"One rule I kept through all three: no sound. No play buttons, no fake transport. You already have a guitar in your hands.",{"type":32,"tag":66,"props":269,"children":271},{"id":270},"shipping-it",[272],{"type":37,"value":273},"Shipping it",{"type":32,"tag":33,"props":275,"children":276},{},[277],{"type":37,"value":278},"It's a Nuxt 4 app, with the music logic in a separate plain TypeScript package that knows nothing about Vue or the browser, so a desktop or mobile build later won't need a rewrite.",{"type":32,"tag":33,"props":280,"children":281},{},[282,284,290,292,297],{"type":37,"value":283},"Because the engine is predictable, it's easy to test. A set of golden scenarios pins the suggestions for common progressions, so a scoring tweak that quietly changes what comes after G fails a test instead of reaching a user. Another test checks the key guessing against the Rock Corpus analyses. Every push to ",{"type":32,"tag":218,"props":285,"children":287},{"className":286},[],[288],{"type":37,"value":289},"main",{"type":37,"value":291}," and every pull request runs through GitHub Actions: lint, type checks, unit tests, a static build, Lighthouse performance budgets, and Playwright end-to-end tests on desktop and a phone-sized viewport. Cloudflare Pages builds and deploys ",{"type":32,"tag":218,"props":293,"children":295},{"className":294},[],[296],{"type":37,"value":289},{"type":37,"value":298},", so the GitHub Actions run only checks; it never deploys anything.",{"type":32,"tag":33,"props":300,"children":301},{},[302,304,310],{"type":37,"value":303},"It's a static site: no accounts, no backend, no cookies, no ads, and your saved progressions stay in your browser. It's free, and it's been live at ",{"type":32,"tag":55,"props":305,"children":307},{"href":57,"rel":306},[59],[308],{"type":37,"value":309},"whatsthenextchord.com",{"type":37,"value":311}," since October.",{"type":32,"tag":66,"props":313,"children":315},{"id":314},"whats-next-play-it-dont-pick-it",[316],{"type":37,"value":317},"What's next: play it, don't pick it",{"type":32,"tag":33,"props":319,"children":320},{},[321],{"type":37,"value":322},"What I'm building next is chord detection. Hit Listen, strum the chord you're on, and the app works out what it is and suggests what comes next.",{"type":32,"tag":33,"props":324,"children":325},{},[326],{"type":37,"value":327},"It fits the problem I started with. Half the time I'm holding a shape I found by ear (especially in Drop D) and couldn't tell you its name, so picking it from a grid means doing a bit of theory before the tool can help. Detection removes that step.",{"type":32,"tag":33,"props":329,"children":330},{},[331,333,340],{"type":37,"value":332},"Yes, this one uses AI, right after a whole section about not using it. But the split is clean: AI listens, rules decide. The model only turns sound into notes, and the same predictable engine still picks what comes next. The plan is Spotify's open-source ",{"type":32,"tag":55,"props":334,"children":337},{"href":335,"rel":336},"https://github.com/spotify/basic-pitch-ts",[59],[338],{"type":37,"value":339},"Basic Pitch",{"type":37,"value":341}," model, which is small enough to run in the browser, so the audio never leaves your device. With your tuning known, it could even say \"that's the 10th-fret Csus2 in Drop D\". (The About page says the app doesn't listen to you play. That's about to stop being true, but only when you press the button.)",{"type":32,"tag":33,"props":343,"children":344},{},[345],{"type":37,"value":346},"The hard part is distortion. High gain smears the harmonics, and Basic Pitch does best on one clean instrument, so the first version will probably handle a single strummed chord, clean or lightly overdriven, with power chords as a stretch goal. Slightly awkward to admit for a tool built by a metal fan.",{"type":32,"tag":33,"props":348,"children":349},{},[350],{"type":37,"value":351},"After that, smaller things: probably a feedback form, Windows XP-style balloon tips for first-time users (on theme, and a bit silly), and maybe that \"end here or keep going\" control the ChordRipple students asked for.",{"type":32,"tag":66,"props":353,"children":355},{"id":354},"conclusion",[356],{"type":37,"value":357},"Conclusion",{"type":32,"tag":33,"props":359,"children":360},{},[361],{"type":37,"value":362},"It won't write your song, and anyone who knows theory will find the explanations simple. That's intentional. I built it for me first, and if it only ever gets me past chord three, it's done its job.",{"type":32,"tag":33,"props":364,"children":365},{},[366,368,375,377,384],{"type":37,"value":367},"I open-sourced the UI behind it as ",{"type":32,"tag":55,"props":369,"children":372},{"href":370,"rel":371},"https://github.com/DulanDev/frontpanel",[59],[373],{"type":37,"value":374},"Frontpanel",{"type":37,"value":376},": an MIT-licensed kit of chrome bezels, gel buttons, LCDs and LEDs in plain CSS, with Vue 3 components on top (",{"type":32,"tag":55,"props":378,"children":381},{"href":379,"rel":380},"https://dulandev.github.io/frontpanel/",[59],[382],{"type":37,"value":383},"docs",{"type":37,"value":385},"). If you want your own app to look like a 2003 MP3 player, go nuts.",{"type":32,"tag":33,"props":387,"children":388},{},[389],{"type":37,"value":390},"I still don't know much theory. But I don't get stuck on the third chord anymore.",{"title":7,"searchDepth":392,"depth":392,"links":393},2,[394,395,396,397,398,399,400,401,402],{"id":68,"depth":392,"text":71},{"id":113,"depth":392,"text":116},{"id":138,"depth":392,"text":141},{"id":159,"depth":392,"text":162},{"id":203,"depth":392,"text":206},{"id":254,"depth":392,"text":257},{"id":270,"depth":392,"text":273},{"id":314,"depth":392,"text":317},{"id":354,"depth":392,"text":357},"markdown","content:blog:stuck-on-the-third-chord.md","content","blog/stuck-on-the-third-chord.md","md",[409,869],{"_path":410,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":411,"description":412,"created_at":413,"author":11,"categories":414,"draft":6,"head":418,"body":424,"_type":403,"_id":867,"_source":405,"_file":868,"_extension":407},"/blog/design-systems-are-agentic-infrastructure-now","Design systems are agentic infrastructure now","In the AI era, your design system's most demanding user is an agent that can't read between the lines. Tokens, components, and written rules are its API now.","2026-09-23",[415,416,417],"Design Systems","AI","Frontend",{"meta":419},[420,422,423],{"name":21,"content":421},"design systems, AI era, agentic design systems, design tokens, AGENTS.md, CLAUDE.md, MCP, coding agents",{"name":24,"content":11},{"name":26,"content":27},{"type":29,"children":425,"toc":860},[426,455,469,482,487,493,498,512,517,529,535,540,545,581,615,661,689,694,700,712,725,730,736,741,758,821,831,835,840,845,850,855],{"type":32,"tag":33,"props":427,"children":428},{},[429,431,437,439,445,447,453],{"type":37,"value":430},"I've been building UI with AI tools since the early Cursor days, and a lot more seriously over the last two years: Copilot, Claude Code, Cursor, opencode, etc., and no matter which tool I'm using, UI work fails in basically the same way. Ask an agent for a settings page, and you get something that looks fine for about ten seconds. Then you notice the hex codes it pulled out of its ass, the third ",{"type":32,"tag":218,"props":432,"children":434},{"className":433},[],[435],{"type":37,"value":436},"Card",{"type":37,"value":438}," component it wrote when two already existed, the ",{"type":32,"tag":218,"props":440,"children":442},{"className":441},[],[443],{"type":37,"value":444},"div",{"type":37,"value":446}," with ",{"type":32,"tag":218,"props":448,"children":450},{"className":449},[],[451],{"type":37,"value":452},"role=\"button\"",{"type":37,"value":454}," slapped on it, and (if you didn't give it much direction) Inter on a purple gradient.",{"type":32,"tag":33,"props":456,"children":457},{},[458,460,467],{"type":37,"value":459},"Anthropic actually has a name for that last one: ",{"type":32,"tag":55,"props":461,"children":464},{"href":462,"rel":463},"https://claude.com/resources/articles/improving-frontend-design-through-skills",[59],[465],{"type":37,"value":466},"distributional convergence",{"type":37,"value":468},". \"Safe design choices\" dominate web training data, so without direction the model samples from the middle, and a landing page \"will almost always conform to Inter fonts, purple gradients on white backgrounds, and minimal animations.\" It's nice to have that in writing, honestly.",{"type":32,"tag":33,"props":470,"children":471},{},[472,474,480],{"type":37,"value":473},"So the model isn't dumb. It's uninformed. It knows what a button is; it just has no idea what ",{"type":32,"tag":475,"props":476,"children":477},"em",{},[478],{"type":37,"value":479},"your",{"type":37,"value":481}," button is, because nothing told it.",{"type":32,"tag":33,"props":483,"children":484},{},[485],{"type":37,"value":486},"That's the thing I've been chewing on after reading a pile of recent writing on design systems, and I think it comes down to this: in the agentic era, a design system isn't a library for humans anymore. It's infrastructure for agents. (And no, AI didn't make design systems obsolete. If anything, it's the opposite.)",{"type":32,"tag":66,"props":488,"children":490},{"id":489},"ai-is-a-new-user-and-it-cant-read-between-the-lines",[491],{"type":37,"value":492},"AI is a new user, and it can't read between the lines",{"type":32,"tag":33,"props":494,"children":495},{},[496],{"type":37,"value":497},"Design systems were always written for people. A developer who's been on the team for six months knows the destructive button goes in the confirmation dialog, knows you don't put two primary buttons side by side, and knows the spacing scale skips a value for a reason somebody explained in a Slack thread years ago. None of that is written down. It never needed to be, because humans infer.",{"type":32,"tag":33,"props":499,"children":500},{},[501,503,510],{"type":37,"value":502},"A component library used to communicate a lot just by existing. You look at the button, you look at where it's used, and you get it. An agent doesn't get it. Figma's Zoe Adelman says AI ",{"type":32,"tag":55,"props":504,"children":507},{"href":505,"rel":506},"https://www.figma.com/blog/5-shifts-redefining-design-systems-in-the-ai-era/",[59],[508],{"type":37,"value":509},"\"doesn't inherently know\"",{"type":37,"value":511}," what designers pick up from understanding the brand and the business, and that systems now need to document \"anything you might expect designers to infer without having it explicitly written in the system.\"",{"type":32,"tag":33,"props":513,"children":514},{},[515],{"type":37,"value":516},"An agent will happily generate a delete button in seconds. What it won't know is that in your product, a delete button inside an alert uses the danger token and always sits next to a cancel. That's the whole problem in one example.",{"type":32,"tag":33,"props":518,"children":519},{},[520,522,527],{"type":37,"value":521},"So AI is effectively a ",{"type":32,"tag":475,"props":523,"children":524},{},[525],{"type":37,"value":526},"new user",{"type":37,"value":528}," of your design system, one that needs everything spelled out in a format it can actually parse. And it's a weird user. It's incredibly fast, it never gets tired, and it has zero institutional memory. Every session starts from nothing, so whatever isn't in the context gets filled in with the statistical average of the internet. Which is exactly how you end up with the purple gradient.",{"type":32,"tag":66,"props":530,"children":532},{"id":531},"your-design-system-is-an-api-now",[533],{"type":37,"value":534},"Your design system is an API now",{"type":32,"tag":33,"props":536,"children":537},{},[538],{"type":37,"value":539},"I've started thinking of a design system as the API agents use to build your product. I know that sounds like conference-talk hyperbole. But the more I've worked with agents on UI, the more I think it's just accurate. An API is a contract: here's what exists, here's what you can pass in, here's what you get back. That's exactly what an agent needs from your system.",{"type":32,"tag":33,"props":541,"children":542},{},[543],{"type":37,"value":544},"An agent-ready system breaks down into roughly four layers.",{"type":32,"tag":33,"props":546,"children":547},{},[548,554,556,562,564,570,572,579],{"type":32,"tag":549,"props":550,"children":551},"strong",{},[552],{"type":37,"value":553},"Tokens, with names that mean something.",{"type":37,"value":555}," ",{"type":32,"tag":218,"props":557,"children":559},{"className":558},[],[560],{"type":37,"value":561},"red-500",{"type":37,"value":563}," tells an agent what a color is. ",{"type":32,"tag":218,"props":565,"children":567},{"className":566},[],[568],{"type":37,"value":569},"color.bg.danger",{"type":37,"value":571}," tells it when to use it. Semantic names are the cheapest context you can give a model, and for an agent they matter a lot more than the values do. There's also finally a standard format: the Design Tokens Community Group shipped its ",{"type":32,"tag":55,"props":573,"children":576},{"href":574,"rel":575},"https://www.w3.org/community/design-tokens/2025/10/28/design-tokens-specification-reaches-first-stable-version/",[59],[577],{"type":37,"value":578},"first stable spec (2025.10)",{"type":37,"value":580}," last October. It's a Community Group spec rather than an official W3C standard, but it's stable and vendor-neutral, which is what you want from a file every tool (and every agent) is going to read.",{"type":32,"tag":33,"props":582,"children":583},{},[584,589,591,597,599,605,607,613],{"type":32,"tag":549,"props":585,"children":586},{},[587],{"type":37,"value":588},"Components that constrain.",{"type":37,"value":590}," If your ",{"type":32,"tag":218,"props":592,"children":594},{"className":593},[],[595],{"type":37,"value":596},"Button",{"type":37,"value":598}," only accepts ",{"type":32,"tag":218,"props":600,"children":602},{"className":601},[],[603],{"type":37,"value":604},"variant=\"primary\" | \"secondary\"",{"type":37,"value":606},", the agent can't invent ",{"type":32,"tag":218,"props":608,"children":610},{"className":609},[],[611],{"type":37,"value":612},"variant=\"kinda-red\"",{"type":37,"value":614},". Typed props are guardrails. One component per job matters too, because every near-duplicate is one more option for the agent to pick wrong.",{"type":32,"tag":33,"props":616,"children":617},{},[618,623,625,636,638,644,646,651,652,659],{"type":32,"tag":549,"props":619,"children":620},{},[621],{"type":37,"value":622},"Rules, written down.",{"type":37,"value":624}," Tokens and components say what exists; rules say when to use what. ",{"type":32,"tag":55,"props":626,"children":629},{"href":627,"rel":628},"https://agents.md/",[59],[630],{"type":32,"tag":218,"props":631,"children":633},{"className":632},[],[634],{"type":37,"value":635},"AGENTS.md",{"type":37,"value":637}," (used by over 60k open-source projects and now stewarded by the Agentic AI Foundation under the Linux Foundation) and ",{"type":32,"tag":218,"props":639,"children":641},{"className":640},[],[642],{"type":37,"value":643},"CLAUDE.md",{"type":37,"value":645}," are where these go. Keep them short and testable: use semantic tokens only, check for an existing component before making a new one, extend instead of duplicating, etc. Anthropic's docs suggest keeping a ",{"type":32,"tag":218,"props":647,"children":649},{"className":648},[],[650],{"type":37,"value":643},{"type":37,"value":555},{"type":32,"tag":55,"props":653,"children":656},{"href":654,"rel":655},"https://code.claude.com/docs/en/memory",[59],[657],{"type":37,"value":658},"under 200 lines",{"type":37,"value":660},", which is a good forcing function.",{"type":32,"tag":33,"props":662,"children":663},{},[664,669,671,678,680,687],{"type":32,"tag":549,"props":665,"children":666},{},[667],{"type":37,"value":668},"A way in.",{"type":37,"value":670}," Agents reach the system through files in the repo and through MCP servers (the protocol agents use to pull context out of other tools). Figma has an ",{"type":32,"tag":55,"props":672,"children":675},{"href":673,"rel":674},"https://help.figma.com/hc/en-us/articles/32132100833559",[59],[676],{"type":37,"value":677},"MCP server",{"type":37,"value":679}," (still in beta), and Storybook 10.3 added ",{"type":32,"tag":55,"props":681,"children":684},{"href":682,"rel":683},"https://storybook.js.org/docs/ai",[59],[685],{"type":37,"value":686},"one for React",{"type":37,"value":688}," (labeled a preview), so an agent can query the components and stories you already have before it invents new ones.",{"type":32,"tag":33,"props":690,"children":691},{},[692],{"type":37,"value":693},"One caveat on that last layer: don't just point an MCP server at your existing Markdown docs and call it done. Long prose docs burn tokens, and they leave the agent digging the actual contract (props, variants, states) out of paragraphs written for humans. I think a structured description per component, in something like JSON, is the better fit. Prose is for humans. Contracts are for machines.",{"type":32,"tag":66,"props":695,"children":697},{"id":696},"the-repo-is-the-source-of-truth",[698],{"type":37,"value":699},"The repo is the source of truth",{"type":32,"tag":33,"props":701,"children":702},{},[703,705,710],{"type":37,"value":704},"The other shift is ",{"type":32,"tag":475,"props":706,"children":707},{},[708],{"type":37,"value":709},"where",{"type":37,"value":711}," the system lives. I think the codebase should be the source of truth for what actually ships, with Figma as the place for exploring ideas and for working with people who don't live in the code. Mostly because agents read repos. Tokens sitting in a Figma library are invisible to Claude Code unless something bridges them over. Tokens in a file next to the components are just there.",{"type":32,"tag":33,"props":713,"children":714},{},[715,717,723],{"type":37,"value":716},"That also changes what the real risk is. It's not that designers lose Figma. It's that now everyone can build. When several people can each ask an agent for a card, a modal, or a nav pattern, you end up with five slightly different modals, each fine on its own, pulling the product apart a few pixels at a time. Figma's Tara Nadella ",{"type":32,"tag":55,"props":718,"children":720},{"href":505,"rel":719},[59],[721],{"type":37,"value":722},"said it in six words",{"type":37,"value":724}," at Schema 2025: \"Speed without direction leads to divergence.\"",{"type":32,"tag":33,"props":726,"children":727},{},[728],{"type":37,"value":729},"The design system is the direction.",{"type":32,"tag":66,"props":731,"children":733},{"id":732},"where-id-pump-the-brakes",[734],{"type":37,"value":735},"Where I'd pump the brakes",{"type":32,"tag":33,"props":737,"children":738},{},[739],{"type":37,"value":740},"I'm bought in on the framing. But a lot of the talk about agentic design systems runs ahead of what I'd actually trust.",{"type":32,"tag":33,"props":742,"children":743},{},[744,749,751,756],{"type":32,"tag":549,"props":745,"children":746},{},[747],{"type":37,"value":748},"Your rules file is a suggestion, not a guardrail.",{"type":37,"value":750}," Anthropic's own docs say Claude treats ",{"type":32,"tag":218,"props":752,"children":754},{"className":753},[],[755],{"type":37,"value":643},{"type":37,"value":757}," as context, not enforced configuration. In my experience, agents follow rules files most of the time, which is not the same as all of the time. So anything that actually matters needs a check that fails loudly: a lint rule that rejects raw hex values, contrast checks on every PR, visual diffs against a reference page, etc.",{"type":32,"tag":33,"props":759,"children":760},{},[761,766,768,773,775,780,782,788,790,797,799,806,808,813,814,819],{"type":32,"tag":549,"props":762,"children":763},{},[764],{"type":37,"value":765},"Don't trust AI with accessibility.",{"type":37,"value":767}," This is the one that bites hardest. Agents love putting ",{"type":32,"tag":218,"props":769,"children":771},{"className":770},[],[772],{"type":37,"value":452},{"type":37,"value":774}," on a ",{"type":32,"tag":218,"props":776,"children":778},{"className":777},[],[779],{"type":37,"value":444},{"type":37,"value":781}," and calling it a day, without the keyboard handling and focus behavior a real ",{"type":32,"tag":218,"props":783,"children":785},{"className":784},[],[786],{"type":37,"value":787},"\u003Cbutton>",{"type":37,"value":789}," gives you for free. The ",{"type":32,"tag":55,"props":791,"children":794},{"href":792,"rel":793},"https://www.w3.org/TR/using-aria/#rule1",[59],[795],{"type":37,"value":796},"first rule of ARIA",{"type":37,"value":798}," is basically \"use the native element if one exists\", and agents ignore it constantly. The fix, I think, is to make accessibility the component library's job: focus traps, keyboard listeners, and ARIA live in tested components, and the agent only composes them. And run ",{"type":32,"tag":55,"props":800,"children":803},{"href":801,"rel":802},"https://playwright.dev/docs/accessibility-testing",[59],[804],{"type":37,"value":805},"axe in your Playwright tests",{"type":37,"value":807}," so the obvious stuff (missing labels, bad contrast, duplicate IDs) fails CI instead of shipping. Just don't treat a green run as proof: Playwright's own docs say \"Automated testing cannot detect all types of WCAG violations,\" and a ",{"type":32,"tag":218,"props":809,"children":811},{"className":810},[],[812],{"type":37,"value":444},{"type":37,"value":446},{"type":32,"tag":218,"props":815,"children":817},{"className":816},[],[818],{"type":37,"value":452},{"type":37,"value":820}," that ignores the keyboard is exactly the kind of thing that can slip through. If your system relies on the agent getting a11y right every time, it's going to get it wrong eventually.",{"type":32,"tag":33,"props":822,"children":823},{},[824,829],{"type":32,"tag":549,"props":825,"children":826},{},[827],{"type":37,"value":828},"Humans keep the strategic calls.",{"type":37,"value":830}," AI is genuinely good at the mechanical parts. Theming tools will now generate a full set of global, alias, and component tokens from a single prompt, and that's actually useful. But brand fit, readability, and accessibility compliance stay with people. Agents can execute a design system. Deciding what it's for is still our job.",{"type":32,"tag":66,"props":832,"children":833},{"id":354},[834],{"type":37,"value":357},{"type":32,"tag":33,"props":836,"children":837},{},[838],{"type":37,"value":839},"If you're wondering where to start: plant seeds, don't buy trees. It's tempting to watch the conference demos and want a fully autonomous agent that fixes everything on day one, but that only works on top of boring foundations: consistent naming, semantic tokens, components with typed props, and a short rules file. Skip those and the agent just reproduces your mess, faster.",{"type":32,"tag":33,"props":841,"children":842},{},[843],{"type":37,"value":844},"Don't over-formalize either. Start lean, with what your product already repeats (colors, type, spacing, buttons, forms, navigation) and let the rest firm up as the product does. A forty-page token taxonomy for a brand that's still changing is just more stuff for the agent to get wrong.",{"type":32,"tag":33,"props":846,"children":847},{},[848],{"type":37,"value":849},"I'll also admit a lot of this is moving fast. Figma's MCP server is still in beta, Storybook's is a React-only preview, and plenty of the \"agentic design system\" writing I've read is closer to a pitch than a practice. Some of this post will probably look dated within a year.",{"type":32,"tag":33,"props":851,"children":852},{},[853],{"type":37,"value":854},"But I'm fairly confident about the core of it. The agent is going to read your design system whether you wrote it for one or not.",{"type":32,"tag":33,"props":856,"children":857},{},[858],{"type":37,"value":859},"Write it for the agent. The humans will be fine.",{"title":7,"searchDepth":392,"depth":392,"links":861},[862,863,864,865,866],{"id":489,"depth":392,"text":492},{"id":531,"depth":392,"text":534},{"id":696,"depth":392,"text":699},{"id":732,"depth":392,"text":735},{"id":354,"depth":392,"text":357},"content:blog:design-systems-are-agentic-infrastructure-now.md","blog/design-systems-are-agentic-infrastructure-now.md",{"_path":870,"_dir":5,"_draft":6,"_partial":6,"_locale":7,"title":871,"description":872,"created_at":873,"author":11,"categories":874,"banner":879,"banner_alt":880,"draft":6,"head":881,"body":887,"_type":403,"_id":8295,"_source":405,"_file":8296,"_extension":407,"faqs":8297},"/blog/msal-authentication-in-vue-3","MSAL authentication in Vue 3 and Nuxt","How to set up Microsoft Entra ID sign-in in Vue 3 with vue3-msal-plugin and MSAL Browser v4: app registration, login, access tokens, route guards, and Nuxt.","2026-08-17",[875,876,877,878],"Vue","Authentication","Azure","TypeScript","/images/project-banners/vue3-msal-plugin-banner.webp","vue3-msal-plugin banner",{"meta":882},[883,885,886],{"name":21,"content":884},"Vue 3, MSAL, Microsoft Entra ID, Azure AD, Authentication, TypeScript, Nuxt, msal-browser",{"name":24,"content":11},{"name":26,"content":27},{"type":29,"children":888,"toc":8267},[889,910,935,940,946,981,987,1008,1062,1074,1115,1127,1196,1224,1229,1235,1265,1270,1282,2576,2581,2634,2654,2671,2693,2714,2720,2730,2809,2858,2870,3489,3494,3499,3512,3518,3599,3625,3630,3642,4034,4050,4056,4069,4081,4502,4554,4583,4595,4655,4660,4666,4684,4696,5429,5455,5461,5473,5485,6039,6057,6062,6074,6429,6465,6470,6503,6515,6527,7509,7558,7563,7569,7581,7607,7627,7654,7660],{"type":32,"tag":33,"props":890,"children":891},{},[892,894,900,902,908],{"type":37,"value":893},"Every time I added Microsoft Entra ID sign-in to a Vue 3 app, I wrote the same glue code. ",{"type":32,"tag":218,"props":895,"children":897},{"className":896},[],[898],{"type":37,"value":899},"@azure/msal-browser",{"type":37,"value":901}," gives you a ",{"type":32,"tag":218,"props":903,"children":905},{"className":904},[],[906],{"type":37,"value":907},"PublicClientApplication",{"type":37,"value":909}," and a set of promises, but nothing reactive. To get a sign-in button that updates on its own, you have to initialize MSAL before any other call, listen to its events to keep the account in sync, and turn the account list into something a template can read.",{"type":32,"tag":33,"props":911,"children":912},{},[913,915,926,928,933],{"type":37,"value":914},"So I pulled that layer out into ",{"type":32,"tag":55,"props":916,"children":919},{"href":917,"rel":918},"https://www.npmjs.com/package/vue3-msal-plugin",[59],[920],{"type":32,"tag":218,"props":921,"children":923},{"className":922},[],[924],{"type":37,"value":925},"vue3-msal-plugin",{"type":37,"value":927},". It wraps ",{"type":32,"tag":218,"props":929,"children":931},{"className":930},[],[932],{"type":37,"value":899},{"type":37,"value":934}," in a few Vue composables and leaves the MSAL API itself untouched.",{"type":32,"tag":33,"props":936,"children":937},{},[938],{"type":37,"value":939},"This guide covers the whole path: registering the app in Entra ID, signing users in, reading auth state, getting access tokens, calling Microsoft Graph, protecting routes, and running it in Nuxt.",{"type":32,"tag":66,"props":941,"children":943},{"id":942},"what-you-need-first",[944],{"type":37,"value":945},"What you need first",{"type":32,"tag":33,"props":947,"children":948},{},[949,951,956,958,964,966,971,973,979],{"type":37,"value":950},"Node.js 20 or newer, Vue 3.5 or newer, ",{"type":32,"tag":218,"props":952,"children":954},{"className":953},[],[955],{"type":37,"value":899},{"type":37,"value":957}," 4.x, and an Entra ID tenant where you can register an application. The plugin declares Vue (",{"type":32,"tag":218,"props":959,"children":961},{"className":960},[],[962],{"type":37,"value":963},"^3.5.0",{"type":37,"value":965},") and ",{"type":32,"tag":218,"props":967,"children":969},{"className":968},[],[970],{"type":37,"value":899},{"type":37,"value":972}," (",{"type":32,"tag":218,"props":974,"children":976},{"className":975},[],[977],{"type":37,"value":978},"^4.0.0",{"type":37,"value":980},") as peer dependencies. There's no Vue 2 version.",{"type":32,"tag":66,"props":982,"children":984},{"id":983},"registering-the-app-in-entra-id",[985],{"type":37,"value":986},"Registering the app in Entra ID",{"type":32,"tag":33,"props":988,"children":989},{},[990,992,999,1001,1006],{"type":37,"value":991},"MSAL can't do anything until Entra ID knows about your app, so start in the ",{"type":32,"tag":55,"props":993,"children":996},{"href":994,"rel":995},"https://entra.microsoft.com",[59],[997],{"type":37,"value":998},"Microsoft Entra admin center",{"type":37,"value":1000},". Go to ",{"type":32,"tag":549,"props":1002,"children":1003},{},[1004],{"type":37,"value":1005},"Identity → Applications → App registrations → New registration",{"type":37,"value":1007}," and fill in three fields.",{"type":32,"tag":92,"props":1009,"children":1010},{},[1011,1021,1037],{"type":32,"tag":96,"props":1012,"children":1013},{},[1014,1019],{"type":32,"tag":549,"props":1015,"children":1016},{},[1017],{"type":37,"value":1018},"Name:",{"type":37,"value":1020}," an internal label. Users never see it.",{"type":32,"tag":96,"props":1022,"children":1023},{},[1024,1029,1030,1035],{"type":32,"tag":549,"props":1025,"children":1026},{},[1027],{"type":37,"value":1028},"Supported account types:",{"type":37,"value":555},{"type":32,"tag":475,"props":1031,"children":1032},{},[1033],{"type":37,"value":1034},"Accounts in this organizational directory only",{"type":37,"value":1036}," for a single-tenant app. The other options change your authority URL.",{"type":32,"tag":96,"props":1038,"children":1039},{},[1040,1045,1047,1052,1054,1060],{"type":32,"tag":549,"props":1041,"children":1042},{},[1043],{"type":37,"value":1044},"Redirect URI:",{"type":37,"value":1046}," choose the ",{"type":32,"tag":549,"props":1048,"children":1049},{},[1050],{"type":37,"value":1051},"Single-page application",{"type":37,"value":1053}," platform and enter ",{"type":32,"tag":218,"props":1055,"children":1057},{"className":1056},[],[1058],{"type":37,"value":1059},"http://localhost:5173",{"type":37,"value":1061}," for a default Vite dev server.",{"type":32,"tag":33,"props":1063,"children":1064},{},[1065,1067,1072],{"type":37,"value":1066},"The platform choice matters. ",{"type":32,"tag":549,"props":1068,"children":1069},{},[1070],{"type":37,"value":1071},"Web",{"type":37,"value":1073}," expects a client secret, which a browser app has nowhere safe to keep, so MSAL uses authorization code flow with PKCE, and that only works with a SPA redirect URI. If sign-in fails with a cross-origin or unsupported-flow error, check this first. Leave the implicit grant checkboxes unticked, too. MSAL v2 and later don't use implicit flow.",{"type":32,"tag":33,"props":1075,"children":1076},{},[1077,1079,1084,1086,1091,1093,1098,1100,1105,1107,1113],{"type":37,"value":1078},"From the ",{"type":32,"tag":549,"props":1080,"children":1081},{},[1082],{"type":37,"value":1083},"Overview",{"type":37,"value":1085}," page, copy the ",{"type":32,"tag":549,"props":1087,"children":1088},{},[1089],{"type":37,"value":1090},"Application (client) ID",{"type":37,"value":1092}," and the ",{"type":32,"tag":549,"props":1094,"children":1095},{},[1096],{"type":37,"value":1097},"Directory (tenant) ID",{"type":37,"value":1099},". Under ",{"type":32,"tag":549,"props":1101,"children":1102},{},[1103],{"type":37,"value":1104},"API permissions",{"type":37,"value":1106},", check that Microsoft Graph's delegated ",{"type":32,"tag":218,"props":1108,"children":1110},{"className":1109},[],[1111],{"type":37,"value":1112},"User.Read",{"type":37,"value":1114}," permission is listed (it usually is by default). The Graph example below needs it.",{"type":32,"tag":33,"props":1116,"children":1117},{},[1118],{"type":32,"tag":549,"props":1119,"children":1120},{},[1121],{"type":32,"tag":218,"props":1122,"children":1124},{"className":1123},[],[1125],{"type":37,"value":1126},".env",{"type":32,"tag":1128,"props":1129,"children":1133},"pre",{"className":1130,"code":1131,"language":1132,"meta":7,"style":7},"language-bash shiki shiki-themes tokyo-night","VITE_CLIENT_ID=\"00000000-0000-0000-0000-000000000000\"\nVITE_AUTHORITY=\"https://login.microsoftonline.com/11111111-1111-1111-1111-111111111111\"\n","bash",[1134],{"type":32,"tag":218,"props":1135,"children":1136},{"__ignoreMap":7},[1137,1171],{"type":32,"tag":1138,"props":1139,"children":1142},"span",{"class":1140,"line":1141},"line",1,[1143,1149,1155,1160,1166],{"type":32,"tag":1138,"props":1144,"children":1146},{"style":1145},"--shiki-default:#C0CAF5",[1147],{"type":37,"value":1148},"VITE_CLIENT_ID",{"type":32,"tag":1138,"props":1150,"children":1152},{"style":1151},"--shiki-default:#89DDFF",[1153],{"type":37,"value":1154},"=",{"type":32,"tag":1138,"props":1156,"children":1157},{"style":1151},[1158],{"type":37,"value":1159},"\"",{"type":32,"tag":1138,"props":1161,"children":1163},{"style":1162},"--shiki-default:#9ECE6A",[1164],{"type":37,"value":1165},"00000000-0000-0000-0000-000000000000",{"type":32,"tag":1138,"props":1167,"children":1168},{"style":1151},[1169],{"type":37,"value":1170},"\"\n",{"type":32,"tag":1138,"props":1172,"children":1173},{"class":1140,"line":392},[1174,1179,1183,1187,1192],{"type":32,"tag":1138,"props":1175,"children":1176},{"style":1145},[1177],{"type":37,"value":1178},"VITE_AUTHORITY",{"type":32,"tag":1138,"props":1180,"children":1181},{"style":1151},[1182],{"type":37,"value":1154},{"type":32,"tag":1138,"props":1184,"children":1185},{"style":1151},[1186],{"type":37,"value":1159},{"type":32,"tag":1138,"props":1188,"children":1189},{"style":1162},[1190],{"type":37,"value":1191},"https://login.microsoftonline.com/11111111-1111-1111-1111-111111111111",{"type":32,"tag":1138,"props":1193,"children":1194},{"style":1151},[1195],{"type":37,"value":1170},{"type":32,"tag":33,"props":1197,"children":1198},{},[1199,1201,1207,1209,1215,1217,1223],{"type":37,"value":1200},"For a single-tenant app, the authority is ",{"type":32,"tag":218,"props":1202,"children":1204},{"className":1203},[],[1205],{"type":37,"value":1206},"https://login.microsoftonline.com/",{"type":37,"value":1208}," plus your tenant ID. Multi-tenant apps use ",{"type":32,"tag":218,"props":1210,"children":1212},{"className":1211},[],[1213],{"type":37,"value":1214},"/organizations",{"type":37,"value":1216},", and apps that accept personal Microsoft accounts use ",{"type":32,"tag":218,"props":1218,"children":1220},{"className":1219},[],[1221],{"type":37,"value":1222},"/common",{"type":37,"value":64},{"type":32,"tag":33,"props":1225,"children":1226},{},[1227],{"type":37,"value":1228},"Every redirect URI you use in production has to be registered as well, including the post-logout one. Entra ID rejects unknown URIs, and the error shows up on Microsoft's sign-in page rather than in your console.",{"type":32,"tag":66,"props":1230,"children":1232},{"id":1231},"installing-the-plugin",[1233],{"type":37,"value":1234},"Installing the plugin",{"type":32,"tag":1128,"props":1236,"children":1238},{"className":1130,"code":1237,"language":1132,"meta":7,"style":7},"npm i vue3-msal-plugin @azure/msal-browser\n",[1239],{"type":32,"tag":218,"props":1240,"children":1241},{"__ignoreMap":7},[1242],{"type":32,"tag":1138,"props":1243,"children":1244},{"class":1140,"line":1141},[1245,1250,1255,1260],{"type":32,"tag":1138,"props":1246,"children":1247},{"style":1145},[1248],{"type":37,"value":1249},"npm",{"type":32,"tag":1138,"props":1251,"children":1252},{"style":1162},[1253],{"type":37,"value":1254}," i",{"type":32,"tag":1138,"props":1256,"children":1257},{"style":1162},[1258],{"type":37,"value":1259}," vue3-msal-plugin",{"type":32,"tag":1138,"props":1261,"children":1262},{"style":1162},[1263],{"type":37,"value":1264}," @azure/msal-browser\n",{"type":32,"tag":33,"props":1266,"children":1267},{},[1268],{"type":37,"value":1269},"The plugin takes an MSAL instance rather than a config object. Create the instance, initialize it, set the active account, and then install the plugin.",{"type":32,"tag":33,"props":1271,"children":1272},{},[1273],{"type":32,"tag":549,"props":1274,"children":1275},{},[1276],{"type":32,"tag":218,"props":1277,"children":1279},{"className":1278},[],[1280],{"type":37,"value":1281},"src/main.ts",{"type":32,"tag":1128,"props":1283,"children":1287},{"className":1284,"code":1285,"language":1286,"meta":7,"style":7},"language-typescript shiki shiki-themes tokyo-night","import { createApp } from \"vue\";\nimport { msalPlugin, msalInstance } from \"vue3-msal-plugin\";\nimport type { Configuration, AuthenticationResult } from \"@azure/msal-browser\";\nimport { EventType } from \"@azure/msal-browser\";\n\nimport App from \"./App.vue\";\nimport router from \"./router\";\n\nconst msalConfig: Configuration = {\n  auth: {\n    clientId: import.meta.env.VITE_CLIENT_ID,\n    authority: import.meta.env.VITE_AUTHORITY,\n    redirectUri: \"http://localhost:5173\",\n    postLogoutRedirectUri: \"http://localhost:5173\",\n  },\n  cache: {\n    cacheLocation: \"localStorage\",\n  },\n};\n\nasync function bootstrap() {\n  const instance = msalInstance(msalConfig);\n\n  // Loads the token cache. Every other MSAL call has to wait for this.\n  await instance.initialize();\n\n  // Restore the signed-in account after a page refresh.\n  const accounts = instance.getAllAccounts();\n  if (accounts.length > 0) {\n    instance.setActiveAccount(accounts[0]);\n  }\n\n  // A fresh sign-in does not set the active account for you.\n  instance.addEventCallback((event) => {\n    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {\n      const payload = event.payload as AuthenticationResult;\n      instance.setActiveAccount(payload.account);\n    }\n  });\n\n  const app = createApp(App);\n  app.use(router);\n  app.use(msalPlugin, instance);\n  app.mount(\"#app\");\n}\n\nbootstrap();\n","typescript",[1288],{"type":32,"tag":218,"props":1289,"children":1290},{"__ignoreMap":7},[1291,1341,1391,1447,1488,1498,1532,1566,1574,1609,1627,1677,1722,1751,1780,1793,1810,1840,1852,1865,1873,1902,1943,1951,1961,1992,2000,2009,2047,2089,2134,2143,2151,2160,2203,2271,2314,2356,2365,2378,2386,2425,2460,2500,2542,2551,2559],{"type":32,"tag":1138,"props":1292,"children":1293},{"class":1140,"line":1141},[1294,1300,1306,1312,1317,1322,1327,1332,1336],{"type":32,"tag":1138,"props":1295,"children":1297},{"style":1296},"--shiki-default:#7DCFFF",[1298],{"type":37,"value":1299},"import",{"type":32,"tag":1138,"props":1301,"children":1303},{"style":1302},"--shiki-default:#9ABDF5",[1304],{"type":37,"value":1305}," { ",{"type":32,"tag":1138,"props":1307,"children":1309},{"style":1308},"--shiki-default:#0DB9D7",[1310],{"type":37,"value":1311},"createApp",{"type":32,"tag":1138,"props":1313,"children":1314},{"style":1302},[1315],{"type":37,"value":1316}," }",{"type":32,"tag":1138,"props":1318,"children":1319},{"style":1296},[1320],{"type":37,"value":1321}," from",{"type":32,"tag":1138,"props":1323,"children":1324},{"style":1151},[1325],{"type":37,"value":1326}," \"",{"type":32,"tag":1138,"props":1328,"children":1329},{"style":1162},[1330],{"type":37,"value":1331},"vue",{"type":32,"tag":1138,"props":1333,"children":1334},{"style":1151},[1335],{"type":37,"value":1159},{"type":32,"tag":1138,"props":1337,"children":1338},{"style":1151},[1339],{"type":37,"value":1340},";\n",{"type":32,"tag":1138,"props":1342,"children":1343},{"class":1140,"line":392},[1344,1348,1352,1357,1362,1367,1371,1375,1379,1383,1387],{"type":32,"tag":1138,"props":1345,"children":1346},{"style":1296},[1347],{"type":37,"value":1299},{"type":32,"tag":1138,"props":1349,"children":1350},{"style":1302},[1351],{"type":37,"value":1305},{"type":32,"tag":1138,"props":1353,"children":1354},{"style":1308},[1355],{"type":37,"value":1356},"msalPlugin",{"type":32,"tag":1138,"props":1358,"children":1359},{"style":1151},[1360],{"type":37,"value":1361},",",{"type":32,"tag":1138,"props":1363,"children":1364},{"style":1308},[1365],{"type":37,"value":1366}," msalInstance",{"type":32,"tag":1138,"props":1368,"children":1369},{"style":1302},[1370],{"type":37,"value":1316},{"type":32,"tag":1138,"props":1372,"children":1373},{"style":1296},[1374],{"type":37,"value":1321},{"type":32,"tag":1138,"props":1376,"children":1377},{"style":1151},[1378],{"type":37,"value":1326},{"type":32,"tag":1138,"props":1380,"children":1381},{"style":1162},[1382],{"type":37,"value":925},{"type":32,"tag":1138,"props":1384,"children":1385},{"style":1151},[1386],{"type":37,"value":1159},{"type":32,"tag":1138,"props":1388,"children":1389},{"style":1151},[1390],{"type":37,"value":1340},{"type":32,"tag":1138,"props":1392,"children":1394},{"class":1140,"line":1393},3,[1395,1399,1405,1409,1414,1418,1423,1427,1431,1435,1439,1443],{"type":32,"tag":1138,"props":1396,"children":1397},{"style":1296},[1398],{"type":37,"value":1299},{"type":32,"tag":1138,"props":1400,"children":1402},{"style":1401},"--shiki-default:#BB9AF7",[1403],{"type":37,"value":1404}," type",{"type":32,"tag":1138,"props":1406,"children":1407},{"style":1302},[1408],{"type":37,"value":1305},{"type":32,"tag":1138,"props":1410,"children":1411},{"style":1308},[1412],{"type":37,"value":1413},"Configuration",{"type":32,"tag":1138,"props":1415,"children":1416},{"style":1151},[1417],{"type":37,"value":1361},{"type":32,"tag":1138,"props":1419,"children":1420},{"style":1308},[1421],{"type":37,"value":1422}," AuthenticationResult",{"type":32,"tag":1138,"props":1424,"children":1425},{"style":1302},[1426],{"type":37,"value":1316},{"type":32,"tag":1138,"props":1428,"children":1429},{"style":1296},[1430],{"type":37,"value":1321},{"type":32,"tag":1138,"props":1432,"children":1433},{"style":1151},[1434],{"type":37,"value":1326},{"type":32,"tag":1138,"props":1436,"children":1437},{"style":1162},[1438],{"type":37,"value":899},{"type":32,"tag":1138,"props":1440,"children":1441},{"style":1151},[1442],{"type":37,"value":1159},{"type":32,"tag":1138,"props":1444,"children":1445},{"style":1151},[1446],{"type":37,"value":1340},{"type":32,"tag":1138,"props":1448,"children":1450},{"class":1140,"line":1449},4,[1451,1455,1459,1464,1468,1472,1476,1480,1484],{"type":32,"tag":1138,"props":1452,"children":1453},{"style":1296},[1454],{"type":37,"value":1299},{"type":32,"tag":1138,"props":1456,"children":1457},{"style":1302},[1458],{"type":37,"value":1305},{"type":32,"tag":1138,"props":1460,"children":1461},{"style":1308},[1462],{"type":37,"value":1463},"EventType",{"type":32,"tag":1138,"props":1465,"children":1466},{"style":1302},[1467],{"type":37,"value":1316},{"type":32,"tag":1138,"props":1469,"children":1470},{"style":1296},[1471],{"type":37,"value":1321},{"type":32,"tag":1138,"props":1473,"children":1474},{"style":1151},[1475],{"type":37,"value":1326},{"type":32,"tag":1138,"props":1477,"children":1478},{"style":1162},[1479],{"type":37,"value":899},{"type":32,"tag":1138,"props":1481,"children":1482},{"style":1151},[1483],{"type":37,"value":1159},{"type":32,"tag":1138,"props":1485,"children":1486},{"style":1151},[1487],{"type":37,"value":1340},{"type":32,"tag":1138,"props":1489,"children":1491},{"class":1140,"line":1490},5,[1492],{"type":32,"tag":1138,"props":1493,"children":1495},{"emptyLinePlaceholder":1494},true,[1496],{"type":37,"value":1497},"\n",{"type":32,"tag":1138,"props":1499,"children":1501},{"class":1140,"line":1500},6,[1502,1506,1511,1515,1519,1524,1528],{"type":32,"tag":1138,"props":1503,"children":1504},{"style":1296},[1505],{"type":37,"value":1299},{"type":32,"tag":1138,"props":1507,"children":1508},{"style":1308},[1509],{"type":37,"value":1510}," App",{"type":32,"tag":1138,"props":1512,"children":1513},{"style":1296},[1514],{"type":37,"value":1321},{"type":32,"tag":1138,"props":1516,"children":1517},{"style":1151},[1518],{"type":37,"value":1326},{"type":32,"tag":1138,"props":1520,"children":1521},{"style":1162},[1522],{"type":37,"value":1523},"./App.vue",{"type":32,"tag":1138,"props":1525,"children":1526},{"style":1151},[1527],{"type":37,"value":1159},{"type":32,"tag":1138,"props":1529,"children":1530},{"style":1151},[1531],{"type":37,"value":1340},{"type":32,"tag":1138,"props":1533,"children":1535},{"class":1140,"line":1534},7,[1536,1540,1545,1549,1553,1558,1562],{"type":32,"tag":1138,"props":1537,"children":1538},{"style":1296},[1539],{"type":37,"value":1299},{"type":32,"tag":1138,"props":1541,"children":1542},{"style":1308},[1543],{"type":37,"value":1544}," router",{"type":32,"tag":1138,"props":1546,"children":1547},{"style":1296},[1548],{"type":37,"value":1321},{"type":32,"tag":1138,"props":1550,"children":1551},{"style":1151},[1552],{"type":37,"value":1326},{"type":32,"tag":1138,"props":1554,"children":1555},{"style":1162},[1556],{"type":37,"value":1557},"./router",{"type":32,"tag":1138,"props":1559,"children":1560},{"style":1151},[1561],{"type":37,"value":1159},{"type":32,"tag":1138,"props":1563,"children":1564},{"style":1151},[1565],{"type":37,"value":1340},{"type":32,"tag":1138,"props":1567,"children":1569},{"class":1140,"line":1568},8,[1570],{"type":32,"tag":1138,"props":1571,"children":1572},{"emptyLinePlaceholder":1494},[1573],{"type":37,"value":1497},{"type":32,"tag":1138,"props":1575,"children":1577},{"class":1140,"line":1576},9,[1578,1584,1589,1594,1599,1604],{"type":32,"tag":1138,"props":1579,"children":1581},{"style":1580},"--shiki-default:#9D7CD8;--shiki-default-font-style:italic",[1582],{"type":37,"value":1583},"const",{"type":32,"tag":1138,"props":1585,"children":1586},{"style":1401},[1587],{"type":37,"value":1588}," msalConfig",{"type":32,"tag":1138,"props":1590,"children":1591},{"style":1151},[1592],{"type":37,"value":1593},":",{"type":32,"tag":1138,"props":1595,"children":1596},{"style":1145},[1597],{"type":37,"value":1598}," Configuration",{"type":32,"tag":1138,"props":1600,"children":1601},{"style":1151},[1602],{"type":37,"value":1603}," =",{"type":32,"tag":1138,"props":1605,"children":1606},{"style":1302},[1607],{"type":37,"value":1608}," {\n",{"type":32,"tag":1138,"props":1610,"children":1612},{"class":1140,"line":1611},10,[1613,1619,1623],{"type":32,"tag":1138,"props":1614,"children":1616},{"style":1615},"--shiki-default:#73DACA",[1617],{"type":37,"value":1618},"  auth",{"type":32,"tag":1138,"props":1620,"children":1621},{"style":1151},[1622],{"type":37,"value":1593},{"type":32,"tag":1138,"props":1624,"children":1625},{"style":1302},[1626],{"type":37,"value":1608},{"type":32,"tag":1138,"props":1628,"children":1630},{"class":1140,"line":1629},11,[1631,1636,1640,1645,1649,1654,1658,1663,1667,1672],{"type":32,"tag":1138,"props":1632,"children":1633},{"style":1615},[1634],{"type":37,"value":1635},"    clientId",{"type":32,"tag":1138,"props":1637,"children":1638},{"style":1151},[1639],{"type":37,"value":1593},{"type":32,"tag":1138,"props":1641,"children":1642},{"style":1296},[1643],{"type":37,"value":1644}," import",{"type":32,"tag":1138,"props":1646,"children":1647},{"style":1151},[1648],{"type":37,"value":64},{"type":32,"tag":1138,"props":1650,"children":1651},{"style":1296},[1652],{"type":37,"value":1653},"meta",{"type":32,"tag":1138,"props":1655,"children":1656},{"style":1151},[1657],{"type":37,"value":64},{"type":32,"tag":1138,"props":1659,"children":1660},{"style":1145},[1661],{"type":37,"value":1662},"env",{"type":32,"tag":1138,"props":1664,"children":1665},{"style":1151},[1666],{"type":37,"value":64},{"type":32,"tag":1138,"props":1668,"children":1670},{"style":1669},"--shiki-default:#FF9E64",[1671],{"type":37,"value":1148},{"type":32,"tag":1138,"props":1673,"children":1674},{"style":1151},[1675],{"type":37,"value":1676},",\n",{"type":32,"tag":1138,"props":1678,"children":1680},{"class":1140,"line":1679},12,[1681,1686,1690,1694,1698,1702,1706,1710,1714,1718],{"type":32,"tag":1138,"props":1682,"children":1683},{"style":1615},[1684],{"type":37,"value":1685},"    authority",{"type":32,"tag":1138,"props":1687,"children":1688},{"style":1151},[1689],{"type":37,"value":1593},{"type":32,"tag":1138,"props":1691,"children":1692},{"style":1296},[1693],{"type":37,"value":1644},{"type":32,"tag":1138,"props":1695,"children":1696},{"style":1151},[1697],{"type":37,"value":64},{"type":32,"tag":1138,"props":1699,"children":1700},{"style":1296},[1701],{"type":37,"value":1653},{"type":32,"tag":1138,"props":1703,"children":1704},{"style":1151},[1705],{"type":37,"value":64},{"type":32,"tag":1138,"props":1707,"children":1708},{"style":1145},[1709],{"type":37,"value":1662},{"type":32,"tag":1138,"props":1711,"children":1712},{"style":1151},[1713],{"type":37,"value":64},{"type":32,"tag":1138,"props":1715,"children":1716},{"style":1669},[1717],{"type":37,"value":1178},{"type":32,"tag":1138,"props":1719,"children":1720},{"style":1151},[1721],{"type":37,"value":1676},{"type":32,"tag":1138,"props":1723,"children":1725},{"class":1140,"line":1724},13,[1726,1731,1735,1739,1743,1747],{"type":32,"tag":1138,"props":1727,"children":1728},{"style":1615},[1729],{"type":37,"value":1730},"    redirectUri",{"type":32,"tag":1138,"props":1732,"children":1733},{"style":1151},[1734],{"type":37,"value":1593},{"type":32,"tag":1138,"props":1736,"children":1737},{"style":1151},[1738],{"type":37,"value":1326},{"type":32,"tag":1138,"props":1740,"children":1741},{"style":1162},[1742],{"type":37,"value":1059},{"type":32,"tag":1138,"props":1744,"children":1745},{"style":1151},[1746],{"type":37,"value":1159},{"type":32,"tag":1138,"props":1748,"children":1749},{"style":1151},[1750],{"type":37,"value":1676},{"type":32,"tag":1138,"props":1752,"children":1754},{"class":1140,"line":1753},14,[1755,1760,1764,1768,1772,1776],{"type":32,"tag":1138,"props":1756,"children":1757},{"style":1615},[1758],{"type":37,"value":1759},"    postLogoutRedirectUri",{"type":32,"tag":1138,"props":1761,"children":1762},{"style":1151},[1763],{"type":37,"value":1593},{"type":32,"tag":1138,"props":1765,"children":1766},{"style":1151},[1767],{"type":37,"value":1326},{"type":32,"tag":1138,"props":1769,"children":1770},{"style":1162},[1771],{"type":37,"value":1059},{"type":32,"tag":1138,"props":1773,"children":1774},{"style":1151},[1775],{"type":37,"value":1159},{"type":32,"tag":1138,"props":1777,"children":1778},{"style":1151},[1779],{"type":37,"value":1676},{"type":32,"tag":1138,"props":1781,"children":1783},{"class":1140,"line":1782},15,[1784,1789],{"type":32,"tag":1138,"props":1785,"children":1786},{"style":1302},[1787],{"type":37,"value":1788},"  }",{"type":32,"tag":1138,"props":1790,"children":1791},{"style":1151},[1792],{"type":37,"value":1676},{"type":32,"tag":1138,"props":1794,"children":1796},{"class":1140,"line":1795},16,[1797,1802,1806],{"type":32,"tag":1138,"props":1798,"children":1799},{"style":1615},[1800],{"type":37,"value":1801},"  cache",{"type":32,"tag":1138,"props":1803,"children":1804},{"style":1151},[1805],{"type":37,"value":1593},{"type":32,"tag":1138,"props":1807,"children":1808},{"style":1302},[1809],{"type":37,"value":1608},{"type":32,"tag":1138,"props":1811,"children":1813},{"class":1140,"line":1812},17,[1814,1819,1823,1827,1832,1836],{"type":32,"tag":1138,"props":1815,"children":1816},{"style":1615},[1817],{"type":37,"value":1818},"    cacheLocation",{"type":32,"tag":1138,"props":1820,"children":1821},{"style":1151},[1822],{"type":37,"value":1593},{"type":32,"tag":1138,"props":1824,"children":1825},{"style":1151},[1826],{"type":37,"value":1326},{"type":32,"tag":1138,"props":1828,"children":1829},{"style":1162},[1830],{"type":37,"value":1831},"localStorage",{"type":32,"tag":1138,"props":1833,"children":1834},{"style":1151},[1835],{"type":37,"value":1159},{"type":32,"tag":1138,"props":1837,"children":1838},{"style":1151},[1839],{"type":37,"value":1676},{"type":32,"tag":1138,"props":1841,"children":1843},{"class":1140,"line":1842},18,[1844,1848],{"type":32,"tag":1138,"props":1845,"children":1846},{"style":1302},[1847],{"type":37,"value":1788},{"type":32,"tag":1138,"props":1849,"children":1850},{"style":1151},[1851],{"type":37,"value":1676},{"type":32,"tag":1138,"props":1853,"children":1855},{"class":1140,"line":1854},19,[1856,1861],{"type":32,"tag":1138,"props":1857,"children":1858},{"style":1302},[1859],{"type":37,"value":1860},"}",{"type":32,"tag":1138,"props":1862,"children":1863},{"style":1151},[1864],{"type":37,"value":1340},{"type":32,"tag":1138,"props":1866,"children":1868},{"class":1140,"line":1867},20,[1869],{"type":32,"tag":1138,"props":1870,"children":1871},{"emptyLinePlaceholder":1494},[1872],{"type":37,"value":1497},{"type":32,"tag":1138,"props":1874,"children":1876},{"class":1140,"line":1875},21,[1877,1882,1887,1893,1898],{"type":32,"tag":1138,"props":1878,"children":1879},{"style":1580},[1880],{"type":37,"value":1881},"async",{"type":32,"tag":1138,"props":1883,"children":1884},{"style":1401},[1885],{"type":37,"value":1886}," function",{"type":32,"tag":1138,"props":1888,"children":1890},{"style":1889},"--shiki-default:#7AA2F7",[1891],{"type":37,"value":1892}," bootstrap",{"type":32,"tag":1138,"props":1894,"children":1895},{"style":1302},[1896],{"type":37,"value":1897},"()",{"type":32,"tag":1138,"props":1899,"children":1900},{"style":1302},[1901],{"type":37,"value":1608},{"type":32,"tag":1138,"props":1903,"children":1905},{"class":1140,"line":1904},22,[1906,1911,1916,1920,1924,1929,1934,1939],{"type":32,"tag":1138,"props":1907,"children":1908},{"style":1580},[1909],{"type":37,"value":1910},"  const",{"type":32,"tag":1138,"props":1912,"children":1913},{"style":1401},[1914],{"type":37,"value":1915}," instance",{"type":32,"tag":1138,"props":1917,"children":1918},{"style":1151},[1919],{"type":37,"value":1603},{"type":32,"tag":1138,"props":1921,"children":1922},{"style":1889},[1923],{"type":37,"value":1366},{"type":32,"tag":1138,"props":1925,"children":1926},{"style":1302},[1927],{"type":37,"value":1928},"(",{"type":32,"tag":1138,"props":1930,"children":1931},{"style":1145},[1932],{"type":37,"value":1933},"msalConfig",{"type":32,"tag":1138,"props":1935,"children":1936},{"style":1302},[1937],{"type":37,"value":1938},")",{"type":32,"tag":1138,"props":1940,"children":1941},{"style":1151},[1942],{"type":37,"value":1340},{"type":32,"tag":1138,"props":1944,"children":1946},{"class":1140,"line":1945},23,[1947],{"type":32,"tag":1138,"props":1948,"children":1949},{"emptyLinePlaceholder":1494},[1950],{"type":37,"value":1497},{"type":32,"tag":1138,"props":1952,"children":1954},{"class":1140,"line":1953},24,[1955],{"type":32,"tag":1138,"props":1956,"children":1958},{"style":1957},"--shiki-default:#51597D;--shiki-default-font-style:italic",[1959],{"type":37,"value":1960},"  // Loads the token cache. Every other MSAL call has to wait for this.\n",{"type":32,"tag":1138,"props":1962,"children":1964},{"class":1140,"line":1963},25,[1965,1971,1975,1979,1984,1988],{"type":32,"tag":1138,"props":1966,"children":1968},{"style":1967},"--shiki-default:#BB9AF7;--shiki-default-font-style:italic",[1969],{"type":37,"value":1970},"  await",{"type":32,"tag":1138,"props":1972,"children":1973},{"style":1145},[1974],{"type":37,"value":1915},{"type":32,"tag":1138,"props":1976,"children":1977},{"style":1151},[1978],{"type":37,"value":64},{"type":32,"tag":1138,"props":1980,"children":1981},{"style":1889},[1982],{"type":37,"value":1983},"initialize",{"type":32,"tag":1138,"props":1985,"children":1986},{"style":1302},[1987],{"type":37,"value":1897},{"type":32,"tag":1138,"props":1989,"children":1990},{"style":1151},[1991],{"type":37,"value":1340},{"type":32,"tag":1138,"props":1993,"children":1995},{"class":1140,"line":1994},26,[1996],{"type":32,"tag":1138,"props":1997,"children":1998},{"emptyLinePlaceholder":1494},[1999],{"type":37,"value":1497},{"type":32,"tag":1138,"props":2001,"children":2003},{"class":1140,"line":2002},27,[2004],{"type":32,"tag":1138,"props":2005,"children":2006},{"style":1957},[2007],{"type":37,"value":2008},"  // Restore the signed-in account after a page refresh.\n",{"type":32,"tag":1138,"props":2010,"children":2012},{"class":1140,"line":2011},28,[2013,2017,2022,2026,2030,2034,2039,2043],{"type":32,"tag":1138,"props":2014,"children":2015},{"style":1580},[2016],{"type":37,"value":1910},{"type":32,"tag":1138,"props":2018,"children":2019},{"style":1401},[2020],{"type":37,"value":2021}," accounts",{"type":32,"tag":1138,"props":2023,"children":2024},{"style":1151},[2025],{"type":37,"value":1603},{"type":32,"tag":1138,"props":2027,"children":2028},{"style":1145},[2029],{"type":37,"value":1915},{"type":32,"tag":1138,"props":2031,"children":2032},{"style":1151},[2033],{"type":37,"value":64},{"type":32,"tag":1138,"props":2035,"children":2036},{"style":1889},[2037],{"type":37,"value":2038},"getAllAccounts",{"type":32,"tag":1138,"props":2040,"children":2041},{"style":1302},[2042],{"type":37,"value":1897},{"type":32,"tag":1138,"props":2044,"children":2045},{"style":1151},[2046],{"type":37,"value":1340},{"type":32,"tag":1138,"props":2048,"children":2050},{"class":1140,"line":2049},29,[2051,2056,2060,2065,2069,2074,2079,2084],{"type":32,"tag":1138,"props":2052,"children":2053},{"style":1401},[2054],{"type":37,"value":2055},"  if",{"type":32,"tag":1138,"props":2057,"children":2058},{"style":1302},[2059],{"type":37,"value":972},{"type":32,"tag":1138,"props":2061,"children":2062},{"style":1145},[2063],{"type":37,"value":2064},"accounts",{"type":32,"tag":1138,"props":2066,"children":2067},{"style":1151},[2068],{"type":37,"value":64},{"type":32,"tag":1138,"props":2070,"children":2071},{"style":1296},[2072],{"type":37,"value":2073},"length",{"type":32,"tag":1138,"props":2075,"children":2076},{"style":1401},[2077],{"type":37,"value":2078}," >",{"type":32,"tag":1138,"props":2080,"children":2081},{"style":1669},[2082],{"type":37,"value":2083}," 0",{"type":32,"tag":1138,"props":2085,"children":2086},{"style":1302},[2087],{"type":37,"value":2088},") {\n",{"type":32,"tag":1138,"props":2090,"children":2092},{"class":1140,"line":2091},30,[2093,2098,2102,2107,2111,2115,2120,2125,2130],{"type":32,"tag":1138,"props":2094,"children":2095},{"style":1145},[2096],{"type":37,"value":2097},"    instance",{"type":32,"tag":1138,"props":2099,"children":2100},{"style":1151},[2101],{"type":37,"value":64},{"type":32,"tag":1138,"props":2103,"children":2104},{"style":1889},[2105],{"type":37,"value":2106},"setActiveAccount",{"type":32,"tag":1138,"props":2108,"children":2109},{"style":1302},[2110],{"type":37,"value":1928},{"type":32,"tag":1138,"props":2112,"children":2113},{"style":1145},[2114],{"type":37,"value":2064},{"type":32,"tag":1138,"props":2116,"children":2117},{"style":1302},[2118],{"type":37,"value":2119},"[",{"type":32,"tag":1138,"props":2121,"children":2122},{"style":1669},[2123],{"type":37,"value":2124},"0",{"type":32,"tag":1138,"props":2126,"children":2127},{"style":1302},[2128],{"type":37,"value":2129},"])",{"type":32,"tag":1138,"props":2131,"children":2132},{"style":1151},[2133],{"type":37,"value":1340},{"type":32,"tag":1138,"props":2135,"children":2137},{"class":1140,"line":2136},31,[2138],{"type":32,"tag":1138,"props":2139,"children":2140},{"style":1302},[2141],{"type":37,"value":2142},"  }\n",{"type":32,"tag":1138,"props":2144,"children":2146},{"class":1140,"line":2145},32,[2147],{"type":32,"tag":1138,"props":2148,"children":2149},{"emptyLinePlaceholder":1494},[2150],{"type":37,"value":1497},{"type":32,"tag":1138,"props":2152,"children":2154},{"class":1140,"line":2153},33,[2155],{"type":32,"tag":1138,"props":2156,"children":2157},{"style":1957},[2158],{"type":37,"value":2159},"  // A fresh sign-in does not set the active account for you.\n",{"type":32,"tag":1138,"props":2161,"children":2163},{"class":1140,"line":2162},34,[2164,2169,2173,2178,2183,2189,2194,2199],{"type":32,"tag":1138,"props":2165,"children":2166},{"style":1145},[2167],{"type":37,"value":2168},"  instance",{"type":32,"tag":1138,"props":2170,"children":2171},{"style":1151},[2172],{"type":37,"value":64},{"type":32,"tag":1138,"props":2174,"children":2175},{"style":1889},[2176],{"type":37,"value":2177},"addEventCallback",{"type":32,"tag":1138,"props":2179,"children":2180},{"style":1302},[2181],{"type":37,"value":2182},"((",{"type":32,"tag":1138,"props":2184,"children":2186},{"style":2185},"--shiki-default:#E0AF68",[2187],{"type":37,"value":2188},"event",{"type":32,"tag":1138,"props":2190,"children":2191},{"style":1302},[2192],{"type":37,"value":2193},") ",{"type":32,"tag":1138,"props":2195,"children":2196},{"style":1401},[2197],{"type":37,"value":2198},"=>",{"type":32,"tag":1138,"props":2200,"children":2201},{"style":1302},[2202],{"type":37,"value":1608},{"type":32,"tag":1138,"props":2204,"children":2206},{"class":1140,"line":2205},35,[2207,2212,2216,2220,2224,2229,2234,2239,2243,2248,2253,2258,2262,2267],{"type":32,"tag":1138,"props":2208,"children":2209},{"style":1401},[2210],{"type":37,"value":2211},"    if",{"type":32,"tag":1138,"props":2213,"children":2214},{"style":1302},[2215],{"type":37,"value":972},{"type":32,"tag":1138,"props":2217,"children":2218},{"style":1145},[2219],{"type":37,"value":2188},{"type":32,"tag":1138,"props":2221,"children":2222},{"style":1151},[2223],{"type":37,"value":64},{"type":32,"tag":1138,"props":2225,"children":2226},{"style":1296},[2227],{"type":37,"value":2228},"eventType",{"type":32,"tag":1138,"props":2230,"children":2231},{"style":1401},[2232],{"type":37,"value":2233}," ===",{"type":32,"tag":1138,"props":2235,"children":2236},{"style":1145},[2237],{"type":37,"value":2238}," EventType",{"type":32,"tag":1138,"props":2240,"children":2241},{"style":1151},[2242],{"type":37,"value":64},{"type":32,"tag":1138,"props":2244,"children":2245},{"style":1669},[2246],{"type":37,"value":2247},"LOGIN_SUCCESS",{"type":32,"tag":1138,"props":2249,"children":2250},{"style":1401},[2251],{"type":37,"value":2252}," &&",{"type":32,"tag":1138,"props":2254,"children":2255},{"style":1145},[2256],{"type":37,"value":2257}," event",{"type":32,"tag":1138,"props":2259,"children":2260},{"style":1151},[2261],{"type":37,"value":64},{"type":32,"tag":1138,"props":2263,"children":2264},{"style":1296},[2265],{"type":37,"value":2266},"payload",{"type":32,"tag":1138,"props":2268,"children":2269},{"style":1302},[2270],{"type":37,"value":2088},{"type":32,"tag":1138,"props":2272,"children":2274},{"class":1140,"line":2273},36,[2275,2280,2285,2289,2293,2297,2301,2306,2310],{"type":32,"tag":1138,"props":2276,"children":2277},{"style":1580},[2278],{"type":37,"value":2279},"      const",{"type":32,"tag":1138,"props":2281,"children":2282},{"style":1401},[2283],{"type":37,"value":2284}," payload",{"type":32,"tag":1138,"props":2286,"children":2287},{"style":1151},[2288],{"type":37,"value":1603},{"type":32,"tag":1138,"props":2290,"children":2291},{"style":1145},[2292],{"type":37,"value":2257},{"type":32,"tag":1138,"props":2294,"children":2295},{"style":1151},[2296],{"type":37,"value":64},{"type":32,"tag":1138,"props":2298,"children":2299},{"style":1296},[2300],{"type":37,"value":2266},{"type":32,"tag":1138,"props":2302,"children":2303},{"style":1151},[2304],{"type":37,"value":2305}," as",{"type":32,"tag":1138,"props":2307,"children":2308},{"style":1145},[2309],{"type":37,"value":1422},{"type":32,"tag":1138,"props":2311,"children":2312},{"style":1151},[2313],{"type":37,"value":1340},{"type":32,"tag":1138,"props":2315,"children":2317},{"class":1140,"line":2316},37,[2318,2323,2327,2331,2335,2339,2343,2348,2352],{"type":32,"tag":1138,"props":2319,"children":2320},{"style":1145},[2321],{"type":37,"value":2322},"      instance",{"type":32,"tag":1138,"props":2324,"children":2325},{"style":1151},[2326],{"type":37,"value":64},{"type":32,"tag":1138,"props":2328,"children":2329},{"style":1889},[2330],{"type":37,"value":2106},{"type":32,"tag":1138,"props":2332,"children":2333},{"style":1302},[2334],{"type":37,"value":1928},{"type":32,"tag":1138,"props":2336,"children":2337},{"style":1145},[2338],{"type":37,"value":2266},{"type":32,"tag":1138,"props":2340,"children":2341},{"style":1151},[2342],{"type":37,"value":64},{"type":32,"tag":1138,"props":2344,"children":2345},{"style":1296},[2346],{"type":37,"value":2347},"account",{"type":32,"tag":1138,"props":2349,"children":2350},{"style":1302},[2351],{"type":37,"value":1938},{"type":32,"tag":1138,"props":2353,"children":2354},{"style":1151},[2355],{"type":37,"value":1340},{"type":32,"tag":1138,"props":2357,"children":2359},{"class":1140,"line":2358},38,[2360],{"type":32,"tag":1138,"props":2361,"children":2362},{"style":1302},[2363],{"type":37,"value":2364},"    }\n",{"type":32,"tag":1138,"props":2366,"children":2368},{"class":1140,"line":2367},39,[2369,2374],{"type":32,"tag":1138,"props":2370,"children":2371},{"style":1302},[2372],{"type":37,"value":2373},"  })",{"type":32,"tag":1138,"props":2375,"children":2376},{"style":1151},[2377],{"type":37,"value":1340},{"type":32,"tag":1138,"props":2379,"children":2381},{"class":1140,"line":2380},40,[2382],{"type":32,"tag":1138,"props":2383,"children":2384},{"emptyLinePlaceholder":1494},[2385],{"type":37,"value":1497},{"type":32,"tag":1138,"props":2387,"children":2389},{"class":1140,"line":2388},41,[2390,2394,2399,2403,2408,2412,2417,2421],{"type":32,"tag":1138,"props":2391,"children":2392},{"style":1580},[2393],{"type":37,"value":1910},{"type":32,"tag":1138,"props":2395,"children":2396},{"style":1401},[2397],{"type":37,"value":2398}," app",{"type":32,"tag":1138,"props":2400,"children":2401},{"style":1151},[2402],{"type":37,"value":1603},{"type":32,"tag":1138,"props":2404,"children":2405},{"style":1889},[2406],{"type":37,"value":2407}," createApp",{"type":32,"tag":1138,"props":2409,"children":2410},{"style":1302},[2411],{"type":37,"value":1928},{"type":32,"tag":1138,"props":2413,"children":2414},{"style":1145},[2415],{"type":37,"value":2416},"App",{"type":32,"tag":1138,"props":2418,"children":2419},{"style":1302},[2420],{"type":37,"value":1938},{"type":32,"tag":1138,"props":2422,"children":2423},{"style":1151},[2424],{"type":37,"value":1340},{"type":32,"tag":1138,"props":2426,"children":2428},{"class":1140,"line":2427},42,[2429,2434,2438,2443,2447,2452,2456],{"type":32,"tag":1138,"props":2430,"children":2431},{"style":1145},[2432],{"type":37,"value":2433},"  app",{"type":32,"tag":1138,"props":2435,"children":2436},{"style":1151},[2437],{"type":37,"value":64},{"type":32,"tag":1138,"props":2439,"children":2440},{"style":1889},[2441],{"type":37,"value":2442},"use",{"type":32,"tag":1138,"props":2444,"children":2445},{"style":1302},[2446],{"type":37,"value":1928},{"type":32,"tag":1138,"props":2448,"children":2449},{"style":1145},[2450],{"type":37,"value":2451},"router",{"type":32,"tag":1138,"props":2453,"children":2454},{"style":1302},[2455],{"type":37,"value":1938},{"type":32,"tag":1138,"props":2457,"children":2458},{"style":1151},[2459],{"type":37,"value":1340},{"type":32,"tag":1138,"props":2461,"children":2463},{"class":1140,"line":2462},43,[2464,2468,2472,2476,2480,2484,2488,2492,2496],{"type":32,"tag":1138,"props":2465,"children":2466},{"style":1145},[2467],{"type":37,"value":2433},{"type":32,"tag":1138,"props":2469,"children":2470},{"style":1151},[2471],{"type":37,"value":64},{"type":32,"tag":1138,"props":2473,"children":2474},{"style":1889},[2475],{"type":37,"value":2442},{"type":32,"tag":1138,"props":2477,"children":2478},{"style":1302},[2479],{"type":37,"value":1928},{"type":32,"tag":1138,"props":2481,"children":2482},{"style":1145},[2483],{"type":37,"value":1356},{"type":32,"tag":1138,"props":2485,"children":2486},{"style":1151},[2487],{"type":37,"value":1361},{"type":32,"tag":1138,"props":2489,"children":2490},{"style":1145},[2491],{"type":37,"value":1915},{"type":32,"tag":1138,"props":2493,"children":2494},{"style":1302},[2495],{"type":37,"value":1938},{"type":32,"tag":1138,"props":2497,"children":2498},{"style":1151},[2499],{"type":37,"value":1340},{"type":32,"tag":1138,"props":2501,"children":2503},{"class":1140,"line":2502},44,[2504,2508,2512,2517,2521,2525,2530,2534,2538],{"type":32,"tag":1138,"props":2505,"children":2506},{"style":1145},[2507],{"type":37,"value":2433},{"type":32,"tag":1138,"props":2509,"children":2510},{"style":1151},[2511],{"type":37,"value":64},{"type":32,"tag":1138,"props":2513,"children":2514},{"style":1889},[2515],{"type":37,"value":2516},"mount",{"type":32,"tag":1138,"props":2518,"children":2519},{"style":1302},[2520],{"type":37,"value":1928},{"type":32,"tag":1138,"props":2522,"children":2523},{"style":1151},[2524],{"type":37,"value":1159},{"type":32,"tag":1138,"props":2526,"children":2527},{"style":1162},[2528],{"type":37,"value":2529},"#app",{"type":32,"tag":1138,"props":2531,"children":2532},{"style":1151},[2533],{"type":37,"value":1159},{"type":32,"tag":1138,"props":2535,"children":2536},{"style":1302},[2537],{"type":37,"value":1938},{"type":32,"tag":1138,"props":2539,"children":2540},{"style":1151},[2541],{"type":37,"value":1340},{"type":32,"tag":1138,"props":2543,"children":2545},{"class":1140,"line":2544},45,[2546],{"type":32,"tag":1138,"props":2547,"children":2548},{"style":1302},[2549],{"type":37,"value":2550},"}\n",{"type":32,"tag":1138,"props":2552,"children":2554},{"class":1140,"line":2553},46,[2555],{"type":32,"tag":1138,"props":2556,"children":2557},{"emptyLinePlaceholder":1494},[2558],{"type":37,"value":1497},{"type":32,"tag":1138,"props":2560,"children":2562},{"class":1140,"line":2561},47,[2563,2568,2572],{"type":32,"tag":1138,"props":2564,"children":2565},{"style":1889},[2566],{"type":37,"value":2567},"bootstrap",{"type":32,"tag":1138,"props":2569,"children":2570},{"style":1302},[2571],{"type":37,"value":1897},{"type":32,"tag":1138,"props":2573,"children":2574},{"style":1151},[2575],{"type":37,"value":1340},{"type":32,"tag":33,"props":2577,"children":2578},{},[2579],{"type":37,"value":2580},"Four details in this file are easy to get wrong.",{"type":32,"tag":33,"props":2582,"children":2583},{},[2584,2595,2596,2601,2603,2608,2610,2616,2618,2624,2626,2632],{"type":32,"tag":549,"props":2585,"children":2586},{},[2587,2593],{"type":32,"tag":218,"props":2588,"children":2590},{"className":2589},[],[2591],{"type":37,"value":2592},"await instance.initialize()",{"type":37,"value":2594}," comes first.",{"type":37,"value":555},{"type":32,"tag":218,"props":2597,"children":2599},{"className":2598},[],[2600],{"type":37,"value":899},{"type":37,"value":2602}," has required it since v3, and in v4 the ",{"type":32,"tag":218,"props":2604,"children":2606},{"className":2605},[],[2607],{"type":37,"value":1831},{"type":37,"value":2609}," cache only loads during ",{"type":32,"tag":218,"props":2611,"children":2613},{"className":2612},[],[2614],{"type":37,"value":2615},"initialize()",{"type":37,"value":2617},". Call ",{"type":32,"tag":218,"props":2619,"children":2621},{"className":2620},[],[2622],{"type":37,"value":2623},"getAllAccounts()",{"type":37,"value":2625}," before it and a signed-in user gets ",{"type":32,"tag":218,"props":2627,"children":2629},{"className":2628},[],[2630],{"type":37,"value":2631},"BrowserAuthError: uninitialized_public_client_application",{"type":37,"value":2633}," on every reload. A first sign-in works fine, so test with a reload.",{"type":32,"tag":33,"props":2635,"children":2636},{},[2637,2652],{"type":32,"tag":549,"props":2638,"children":2639},{},[2640,2645,2647],{"type":32,"tag":218,"props":2641,"children":2643},{"className":2642},[],[2644],{"type":37,"value":2106},{"type":37,"value":2646}," after ",{"type":32,"tag":218,"props":2648,"children":2650},{"className":2649},[],[2651],{"type":37,"value":2038},{"type":37,"value":2653}," restores the session after a refresh. MSAL keeps the account in its cache but doesn't pick an active one, so without this, token calls fail even though the user is signed in.",{"type":32,"tag":33,"props":2655,"children":2656},{},[2657,2669],{"type":32,"tag":549,"props":2658,"children":2659},{},[2660,2662,2667],{"type":37,"value":2661},"The ",{"type":32,"tag":218,"props":2663,"children":2665},{"className":2664},[],[2666],{"type":37,"value":2247},{"type":37,"value":2668}," callback",{"type":37,"value":2670}," does the same for a first-time sign-in, which also leaves the active account unset.",{"type":32,"tag":33,"props":2672,"children":2673},{},[2674,2683,2685,2691],{"type":32,"tag":549,"props":2675,"children":2676},{},[2677],{"type":32,"tag":218,"props":2678,"children":2680},{"className":2679},[],[2681],{"type":37,"value":2682},"cacheLocation: \"localStorage\"",{"type":37,"value":2684}," keeps the session across tabs and reloads. The default, ",{"type":32,"tag":218,"props":2686,"children":2688},{"className":2687},[],[2689],{"type":37,"value":2690},"sessionStorage",{"type":37,"value":2692},", doesn't. The FAQ covers the security side of that choice.",{"type":32,"tag":33,"props":2694,"children":2695},{},[2696,2698,2704,2706,2712],{"type":37,"value":2697},"You don't need to call ",{"type":32,"tag":218,"props":2699,"children":2701},{"className":2700},[],[2702],{"type":37,"value":2703},"handleRedirectPromise()",{"type":37,"value":2705}," yourself. The first ",{"type":32,"tag":218,"props":2707,"children":2709},{"className":2708},[],[2710],{"type":37,"value":2711},"useMsal()",{"type":37,"value":2713}," call in a component runs it, which completes a redirect sign-in when the user lands back on your app.",{"type":32,"tag":66,"props":2715,"children":2717},{"id":2716},"signing-in",[2718],{"type":37,"value":2719},"Signing in",{"type":32,"tag":33,"props":2721,"children":2722},{},[2723,2728],{"type":32,"tag":218,"props":2724,"children":2726},{"className":2725},[],[2727],{"type":37,"value":2711},{"type":37,"value":2729}," returns the MSAL instance plus some reactive state.",{"type":32,"tag":1128,"props":2731,"children":2733},{"className":1284,"code":2732,"language":1286,"meta":7,"style":7},"const { instance, accounts, inProgress, loginRequest, callMsGraph } = useMsal();\n",[2734],{"type":32,"tag":218,"props":2735,"children":2736},{"__ignoreMap":7},[2737],{"type":32,"tag":1138,"props":2738,"children":2739},{"class":1140,"line":1141},[2740,2744,2749,2753,2757,2761,2765,2770,2774,2779,2783,2788,2792,2796,2801,2805],{"type":32,"tag":1138,"props":2741,"children":2742},{"style":1580},[2743],{"type":37,"value":1583},{"type":32,"tag":1138,"props":2745,"children":2746},{"style":1151},[2747],{"type":37,"value":2748}," {",{"type":32,"tag":1138,"props":2750,"children":2751},{"style":1401},[2752],{"type":37,"value":1915},{"type":32,"tag":1138,"props":2754,"children":2755},{"style":1151},[2756],{"type":37,"value":1361},{"type":32,"tag":1138,"props":2758,"children":2759},{"style":1401},[2760],{"type":37,"value":2021},{"type":32,"tag":1138,"props":2762,"children":2763},{"style":1151},[2764],{"type":37,"value":1361},{"type":32,"tag":1138,"props":2766,"children":2767},{"style":1401},[2768],{"type":37,"value":2769}," inProgress",{"type":32,"tag":1138,"props":2771,"children":2772},{"style":1151},[2773],{"type":37,"value":1361},{"type":32,"tag":1138,"props":2775,"children":2776},{"style":1401},[2777],{"type":37,"value":2778}," loginRequest",{"type":32,"tag":1138,"props":2780,"children":2781},{"style":1151},[2782],{"type":37,"value":1361},{"type":32,"tag":1138,"props":2784,"children":2785},{"style":1401},[2786],{"type":37,"value":2787}," callMsGraph",{"type":32,"tag":1138,"props":2789,"children":2790},{"style":1151},[2791],{"type":37,"value":1316},{"type":32,"tag":1138,"props":2793,"children":2794},{"style":1151},[2795],{"type":37,"value":1603},{"type":32,"tag":1138,"props":2797,"children":2798},{"style":1889},[2799],{"type":37,"value":2800}," useMsal",{"type":32,"tag":1138,"props":2802,"children":2803},{"style":1302},[2804],{"type":37,"value":1897},{"type":32,"tag":1138,"props":2806,"children":2807},{"style":1151},[2808],{"type":37,"value":1340},{"type":32,"tag":33,"props":2810,"children":2811},{},[2812,2818,2820,2825,2827,2832,2834,2840,2842,2848,2850,2856],{"type":32,"tag":218,"props":2813,"children":2815},{"className":2814},[],[2816],{"type":37,"value":2817},"instance",{"type":37,"value":2819}," is the ",{"type":32,"tag":218,"props":2821,"children":2823},{"className":2822},[],[2824],{"type":37,"value":907},{"type":37,"value":2826}," itself. ",{"type":32,"tag":218,"props":2828,"children":2830},{"className":2829},[],[2831],{"type":37,"value":2064},{"type":37,"value":2833}," and ",{"type":32,"tag":218,"props":2835,"children":2837},{"className":2836},[],[2838],{"type":37,"value":2839},"inProgress",{"type":37,"value":2841}," are refs, and ",{"type":32,"tag":218,"props":2843,"children":2845},{"className":2844},[],[2846],{"type":37,"value":2847},"loginRequest",{"type":37,"value":2849}," defaults to ",{"type":32,"tag":218,"props":2851,"children":2853},{"className":2852},[],[2854],{"type":37,"value":2855},"{ scopes: ['User.Read'] }",{"type":37,"value":2857},", which is enough to sign in and read the user's own profile.",{"type":32,"tag":33,"props":2859,"children":2860},{},[2861],{"type":32,"tag":549,"props":2862,"children":2863},{},[2864],{"type":32,"tag":218,"props":2865,"children":2867},{"className":2866},[],[2868],{"type":37,"value":2869},"src/components/AuthButton.vue",{"type":32,"tag":1128,"props":2871,"children":2874},{"className":2872,"code":2873,"language":1331,"meta":7,"style":7},"language-vue shiki shiki-themes tokyo-night","\u003Cscript setup lang=\"ts\">\nimport { useMsal, useIsAuthenticated } from \"vue3-msal-plugin\";\n\nconst { instance, loginRequest } = useMsal();\nconst isAuthenticated = useIsAuthenticated();\n\nconst loginPopup = () => instance.loginPopup(loginRequest);\nconst loginRedirect = () => instance.loginRedirect(loginRequest);\nconst logoutPopup = () => instance.logoutPopup({ mainWindowRedirectUri: \"/\" });\nconst logoutRedirect = () => instance.logoutRedirect();\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cbutton v-if=\"!isAuthenticated\" @click=\"loginPopup\">Sign in\u003C/button>\n  \u003Cbutton v-else @click=\"logoutPopup\">Sign out\u003C/button>\n\u003C/template>\n",[2875],{"type":32,"tag":218,"props":2876,"children":2877},{"__ignoreMap":7},[2878,2925,2974,2981,3024,3052,3059,3114,3167,3240,3285,3301,3308,3324,3413,3474],{"type":32,"tag":1138,"props":2879,"children":2880},{"class":1140,"line":1141},[2881,2887,2893,2898,2903,2907,2911,2916,2920],{"type":32,"tag":1138,"props":2882,"children":2884},{"style":2883},"--shiki-default:#BA3C97",[2885],{"type":37,"value":2886},"\u003C",{"type":32,"tag":1138,"props":2888,"children":2890},{"style":2889},"--shiki-default:#F7768E",[2891],{"type":37,"value":2892},"script",{"type":32,"tag":1138,"props":2894,"children":2895},{"style":1401},[2896],{"type":37,"value":2897}," setup",{"type":32,"tag":1138,"props":2899,"children":2900},{"style":1401},[2901],{"type":37,"value":2902}," lang",{"type":32,"tag":1138,"props":2904,"children":2905},{"style":1151},[2906],{"type":37,"value":1154},{"type":32,"tag":1138,"props":2908,"children":2909},{"style":1151},[2910],{"type":37,"value":1159},{"type":32,"tag":1138,"props":2912,"children":2913},{"style":1162},[2914],{"type":37,"value":2915},"ts",{"type":32,"tag":1138,"props":2917,"children":2918},{"style":1151},[2919],{"type":37,"value":1159},{"type":32,"tag":1138,"props":2921,"children":2922},{"style":2883},[2923],{"type":37,"value":2924},">\n",{"type":32,"tag":1138,"props":2926,"children":2927},{"class":1140,"line":392},[2928,2932,2936,2941,2945,2950,2954,2958,2962,2966,2970],{"type":32,"tag":1138,"props":2929,"children":2930},{"style":1296},[2931],{"type":37,"value":1299},{"type":32,"tag":1138,"props":2933,"children":2934},{"style":1302},[2935],{"type":37,"value":1305},{"type":32,"tag":1138,"props":2937,"children":2938},{"style":1308},[2939],{"type":37,"value":2940},"useMsal",{"type":32,"tag":1138,"props":2942,"children":2943},{"style":1151},[2944],{"type":37,"value":1361},{"type":32,"tag":1138,"props":2946,"children":2947},{"style":1308},[2948],{"type":37,"value":2949}," useIsAuthenticated",{"type":32,"tag":1138,"props":2951,"children":2952},{"style":1302},[2953],{"type":37,"value":1316},{"type":32,"tag":1138,"props":2955,"children":2956},{"style":1296},[2957],{"type":37,"value":1321},{"type":32,"tag":1138,"props":2959,"children":2960},{"style":1151},[2961],{"type":37,"value":1326},{"type":32,"tag":1138,"props":2963,"children":2964},{"style":1162},[2965],{"type":37,"value":925},{"type":32,"tag":1138,"props":2967,"children":2968},{"style":1151},[2969],{"type":37,"value":1159},{"type":32,"tag":1138,"props":2971,"children":2972},{"style":1151},[2973],{"type":37,"value":1340},{"type":32,"tag":1138,"props":2975,"children":2976},{"class":1140,"line":1393},[2977],{"type":32,"tag":1138,"props":2978,"children":2979},{"emptyLinePlaceholder":1494},[2980],{"type":37,"value":1497},{"type":32,"tag":1138,"props":2982,"children":2983},{"class":1140,"line":1449},[2984,2988,2992,2996,3000,3004,3008,3012,3016,3020],{"type":32,"tag":1138,"props":2985,"children":2986},{"style":1580},[2987],{"type":37,"value":1583},{"type":32,"tag":1138,"props":2989,"children":2990},{"style":1151},[2991],{"type":37,"value":2748},{"type":32,"tag":1138,"props":2993,"children":2994},{"style":1401},[2995],{"type":37,"value":1915},{"type":32,"tag":1138,"props":2997,"children":2998},{"style":1151},[2999],{"type":37,"value":1361},{"type":32,"tag":1138,"props":3001,"children":3002},{"style":1401},[3003],{"type":37,"value":2778},{"type":32,"tag":1138,"props":3005,"children":3006},{"style":1151},[3007],{"type":37,"value":1316},{"type":32,"tag":1138,"props":3009,"children":3010},{"style":1151},[3011],{"type":37,"value":1603},{"type":32,"tag":1138,"props":3013,"children":3014},{"style":1889},[3015],{"type":37,"value":2800},{"type":32,"tag":1138,"props":3017,"children":3018},{"style":1302},[3019],{"type":37,"value":1897},{"type":32,"tag":1138,"props":3021,"children":3022},{"style":1151},[3023],{"type":37,"value":1340},{"type":32,"tag":1138,"props":3025,"children":3026},{"class":1140,"line":1490},[3027,3031,3036,3040,3044,3048],{"type":32,"tag":1138,"props":3028,"children":3029},{"style":1580},[3030],{"type":37,"value":1583},{"type":32,"tag":1138,"props":3032,"children":3033},{"style":1401},[3034],{"type":37,"value":3035}," isAuthenticated",{"type":32,"tag":1138,"props":3037,"children":3038},{"style":1151},[3039],{"type":37,"value":1603},{"type":32,"tag":1138,"props":3041,"children":3042},{"style":1889},[3043],{"type":37,"value":2949},{"type":32,"tag":1138,"props":3045,"children":3046},{"style":1302},[3047],{"type":37,"value":1897},{"type":32,"tag":1138,"props":3049,"children":3050},{"style":1151},[3051],{"type":37,"value":1340},{"type":32,"tag":1138,"props":3053,"children":3054},{"class":1140,"line":1500},[3055],{"type":32,"tag":1138,"props":3056,"children":3057},{"emptyLinePlaceholder":1494},[3058],{"type":37,"value":1497},{"type":32,"tag":1138,"props":3060,"children":3061},{"class":1140,"line":1534},[3062,3066,3071,3075,3080,3085,3089,3093,3098,3102,3106,3110],{"type":32,"tag":1138,"props":3063,"children":3064},{"style":1580},[3065],{"type":37,"value":1583},{"type":32,"tag":1138,"props":3067,"children":3068},{"style":1889},[3069],{"type":37,"value":3070}," loginPopup",{"type":32,"tag":1138,"props":3072,"children":3073},{"style":1151},[3074],{"type":37,"value":1603},{"type":32,"tag":1138,"props":3076,"children":3077},{"style":1302},[3078],{"type":37,"value":3079}," ()",{"type":32,"tag":1138,"props":3081,"children":3082},{"style":1401},[3083],{"type":37,"value":3084}," =>",{"type":32,"tag":1138,"props":3086,"children":3087},{"style":1145},[3088],{"type":37,"value":1915},{"type":32,"tag":1138,"props":3090,"children":3091},{"style":1151},[3092],{"type":37,"value":64},{"type":32,"tag":1138,"props":3094,"children":3095},{"style":1889},[3096],{"type":37,"value":3097},"loginPopup",{"type":32,"tag":1138,"props":3099,"children":3100},{"style":1302},[3101],{"type":37,"value":1928},{"type":32,"tag":1138,"props":3103,"children":3104},{"style":1145},[3105],{"type":37,"value":2847},{"type":32,"tag":1138,"props":3107,"children":3108},{"style":1302},[3109],{"type":37,"value":1938},{"type":32,"tag":1138,"props":3111,"children":3112},{"style":1151},[3113],{"type":37,"value":1340},{"type":32,"tag":1138,"props":3115,"children":3116},{"class":1140,"line":1568},[3117,3121,3126,3130,3134,3138,3142,3146,3151,3155,3159,3163],{"type":32,"tag":1138,"props":3118,"children":3119},{"style":1580},[3120],{"type":37,"value":1583},{"type":32,"tag":1138,"props":3122,"children":3123},{"style":1889},[3124],{"type":37,"value":3125}," loginRedirect",{"type":32,"tag":1138,"props":3127,"children":3128},{"style":1151},[3129],{"type":37,"value":1603},{"type":32,"tag":1138,"props":3131,"children":3132},{"style":1302},[3133],{"type":37,"value":3079},{"type":32,"tag":1138,"props":3135,"children":3136},{"style":1401},[3137],{"type":37,"value":3084},{"type":32,"tag":1138,"props":3139,"children":3140},{"style":1145},[3141],{"type":37,"value":1915},{"type":32,"tag":1138,"props":3143,"children":3144},{"style":1151},[3145],{"type":37,"value":64},{"type":32,"tag":1138,"props":3147,"children":3148},{"style":1889},[3149],{"type":37,"value":3150},"loginRedirect",{"type":32,"tag":1138,"props":3152,"children":3153},{"style":1302},[3154],{"type":37,"value":1928},{"type":32,"tag":1138,"props":3156,"children":3157},{"style":1145},[3158],{"type":37,"value":2847},{"type":32,"tag":1138,"props":3160,"children":3161},{"style":1302},[3162],{"type":37,"value":1938},{"type":32,"tag":1138,"props":3164,"children":3165},{"style":1151},[3166],{"type":37,"value":1340},{"type":32,"tag":1138,"props":3168,"children":3169},{"class":1140,"line":1576},[3170,3174,3179,3183,3187,3191,3195,3199,3204,3209,3214,3218,3222,3227,3231,3236],{"type":32,"tag":1138,"props":3171,"children":3172},{"style":1580},[3173],{"type":37,"value":1583},{"type":32,"tag":1138,"props":3175,"children":3176},{"style":1889},[3177],{"type":37,"value":3178}," logoutPopup",{"type":32,"tag":1138,"props":3180,"children":3181},{"style":1151},[3182],{"type":37,"value":1603},{"type":32,"tag":1138,"props":3184,"children":3185},{"style":1302},[3186],{"type":37,"value":3079},{"type":32,"tag":1138,"props":3188,"children":3189},{"style":1401},[3190],{"type":37,"value":3084},{"type":32,"tag":1138,"props":3192,"children":3193},{"style":1145},[3194],{"type":37,"value":1915},{"type":32,"tag":1138,"props":3196,"children":3197},{"style":1151},[3198],{"type":37,"value":64},{"type":32,"tag":1138,"props":3200,"children":3201},{"style":1889},[3202],{"type":37,"value":3203},"logoutPopup",{"type":32,"tag":1138,"props":3205,"children":3206},{"style":1302},[3207],{"type":37,"value":3208},"({",{"type":32,"tag":1138,"props":3210,"children":3211},{"style":1615},[3212],{"type":37,"value":3213}," mainWindowRedirectUri",{"type":32,"tag":1138,"props":3215,"children":3216},{"style":1151},[3217],{"type":37,"value":1593},{"type":32,"tag":1138,"props":3219,"children":3220},{"style":1151},[3221],{"type":37,"value":1326},{"type":32,"tag":1138,"props":3223,"children":3224},{"style":1162},[3225],{"type":37,"value":3226},"/",{"type":32,"tag":1138,"props":3228,"children":3229},{"style":1151},[3230],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3232,"children":3233},{"style":1302},[3234],{"type":37,"value":3235}," })",{"type":32,"tag":1138,"props":3237,"children":3238},{"style":1151},[3239],{"type":37,"value":1340},{"type":32,"tag":1138,"props":3241,"children":3242},{"class":1140,"line":1611},[3243,3247,3252,3256,3260,3264,3268,3272,3277,3281],{"type":32,"tag":1138,"props":3244,"children":3245},{"style":1580},[3246],{"type":37,"value":1583},{"type":32,"tag":1138,"props":3248,"children":3249},{"style":1889},[3250],{"type":37,"value":3251}," logoutRedirect",{"type":32,"tag":1138,"props":3253,"children":3254},{"style":1151},[3255],{"type":37,"value":1603},{"type":32,"tag":1138,"props":3257,"children":3258},{"style":1302},[3259],{"type":37,"value":3079},{"type":32,"tag":1138,"props":3261,"children":3262},{"style":1401},[3263],{"type":37,"value":3084},{"type":32,"tag":1138,"props":3265,"children":3266},{"style":1145},[3267],{"type":37,"value":1915},{"type":32,"tag":1138,"props":3269,"children":3270},{"style":1151},[3271],{"type":37,"value":64},{"type":32,"tag":1138,"props":3273,"children":3274},{"style":1889},[3275],{"type":37,"value":3276},"logoutRedirect",{"type":32,"tag":1138,"props":3278,"children":3279},{"style":1302},[3280],{"type":37,"value":1897},{"type":32,"tag":1138,"props":3282,"children":3283},{"style":1151},[3284],{"type":37,"value":1340},{"type":32,"tag":1138,"props":3286,"children":3287},{"class":1140,"line":1629},[3288,3293,3297],{"type":32,"tag":1138,"props":3289,"children":3290},{"style":2883},[3291],{"type":37,"value":3292},"\u003C/",{"type":32,"tag":1138,"props":3294,"children":3295},{"style":2889},[3296],{"type":37,"value":2892},{"type":32,"tag":1138,"props":3298,"children":3299},{"style":2883},[3300],{"type":37,"value":2924},{"type":32,"tag":1138,"props":3302,"children":3303},{"class":1140,"line":1679},[3304],{"type":32,"tag":1138,"props":3305,"children":3306},{"emptyLinePlaceholder":1494},[3307],{"type":37,"value":1497},{"type":32,"tag":1138,"props":3309,"children":3310},{"class":1140,"line":1724},[3311,3315,3320],{"type":32,"tag":1138,"props":3312,"children":3313},{"style":2883},[3314],{"type":37,"value":2886},{"type":32,"tag":1138,"props":3316,"children":3317},{"style":2889},[3318],{"type":37,"value":3319},"template",{"type":32,"tag":1138,"props":3321,"children":3322},{"style":2883},[3323],{"type":37,"value":2924},{"type":32,"tag":1138,"props":3325,"children":3326},{"class":1140,"line":1753},[3327,3332,3337,3342,3346,3350,3355,3360,3364,3369,3374,3378,3382,3386,3390,3395,3401,3405,3409],{"type":32,"tag":1138,"props":3328,"children":3329},{"style":2883},[3330],{"type":37,"value":3331},"  \u003C",{"type":32,"tag":1138,"props":3333,"children":3334},{"style":2889},[3335],{"type":37,"value":3336},"button",{"type":32,"tag":1138,"props":3338,"children":3339},{"style":1401},[3340],{"type":37,"value":3341}," v-if",{"type":32,"tag":1138,"props":3343,"children":3344},{"style":1151},[3345],{"type":37,"value":1154},{"type":32,"tag":1138,"props":3347,"children":3348},{"style":1151},[3349],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3351,"children":3352},{"style":1401},[3353],{"type":37,"value":3354},"!",{"type":32,"tag":1138,"props":3356,"children":3357},{"style":1145},[3358],{"type":37,"value":3359},"isAuthenticated",{"type":32,"tag":1138,"props":3361,"children":3362},{"style":1151},[3363],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3365,"children":3366},{"style":1151},[3367],{"type":37,"value":3368}," @",{"type":32,"tag":1138,"props":3370,"children":3371},{"style":1401},[3372],{"type":37,"value":3373},"click",{"type":32,"tag":1138,"props":3375,"children":3376},{"style":1151},[3377],{"type":37,"value":1154},{"type":32,"tag":1138,"props":3379,"children":3380},{"style":1151},[3381],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3383,"children":3384},{"style":1145},[3385],{"type":37,"value":3097},{"type":32,"tag":1138,"props":3387,"children":3388},{"style":1151},[3389],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3391,"children":3392},{"style":2883},[3393],{"type":37,"value":3394},">",{"type":32,"tag":1138,"props":3396,"children":3398},{"style":3397},"--shiki-default:#9AA5CE",[3399],{"type":37,"value":3400},"Sign in",{"type":32,"tag":1138,"props":3402,"children":3403},{"style":2883},[3404],{"type":37,"value":3292},{"type":32,"tag":1138,"props":3406,"children":3407},{"style":2889},[3408],{"type":37,"value":3336},{"type":32,"tag":1138,"props":3410,"children":3411},{"style":2883},[3412],{"type":37,"value":2924},{"type":32,"tag":1138,"props":3414,"children":3415},{"class":1140,"line":1782},[3416,3420,3424,3429,3433,3437,3441,3445,3449,3453,3457,3462,3466,3470],{"type":32,"tag":1138,"props":3417,"children":3418},{"style":2883},[3419],{"type":37,"value":3331},{"type":32,"tag":1138,"props":3421,"children":3422},{"style":2889},[3423],{"type":37,"value":3336},{"type":32,"tag":1138,"props":3425,"children":3426},{"style":1401},[3427],{"type":37,"value":3428}," v-else",{"type":32,"tag":1138,"props":3430,"children":3431},{"style":1151},[3432],{"type":37,"value":3368},{"type":32,"tag":1138,"props":3434,"children":3435},{"style":1401},[3436],{"type":37,"value":3373},{"type":32,"tag":1138,"props":3438,"children":3439},{"style":1151},[3440],{"type":37,"value":1154},{"type":32,"tag":1138,"props":3442,"children":3443},{"style":1151},[3444],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3446,"children":3447},{"style":1145},[3448],{"type":37,"value":3203},{"type":32,"tag":1138,"props":3450,"children":3451},{"style":1151},[3452],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3454,"children":3455},{"style":2883},[3456],{"type":37,"value":3394},{"type":32,"tag":1138,"props":3458,"children":3459},{"style":3397},[3460],{"type":37,"value":3461},"Sign out",{"type":32,"tag":1138,"props":3463,"children":3464},{"style":2883},[3465],{"type":37,"value":3292},{"type":32,"tag":1138,"props":3467,"children":3468},{"style":2889},[3469],{"type":37,"value":3336},{"type":32,"tag":1138,"props":3471,"children":3472},{"style":2883},[3473],{"type":37,"value":2924},{"type":32,"tag":1138,"props":3475,"children":3476},{"class":1140,"line":1795},[3477,3481,3485],{"type":32,"tag":1138,"props":3478,"children":3479},{"style":2883},[3480],{"type":37,"value":3292},{"type":32,"tag":1138,"props":3482,"children":3483},{"style":2889},[3484],{"type":37,"value":3319},{"type":32,"tag":1138,"props":3486,"children":3487},{"style":2883},[3488],{"type":37,"value":2924},{"type":32,"tag":33,"props":3490,"children":3491},{},[3492],{"type":37,"value":3493},"Popup is the better default for most apps. Your app stays mounted, so its state survives the sign-in. Browsers only allow popups that come from a direct user action, though, so call it from a click handler, not from a watcher or a lifecycle hook.",{"type":32,"tag":33,"props":3495,"children":3496},{},[3497],{"type":37,"value":3498},"Redirect leaves the page and comes back. It avoids popup blockers and works in browsers with strict third-party storage rules, but your app reloads on return and loses any state you didn't persist.",{"type":32,"tag":33,"props":3500,"children":3501},{},[3502,3504,3510],{"type":37,"value":3503},"Pick one per app. Mixing them leads to ",{"type":32,"tag":218,"props":3505,"children":3507},{"className":3506},[],[3508],{"type":37,"value":3509},"interaction_in_progress",{"type":37,"value":3511}," errors (see the FAQ).",{"type":32,"tag":66,"props":3513,"children":3515},{"id":3514},"reading-auth-state",[3516],{"type":37,"value":3517},"Reading auth state",{"type":32,"tag":1128,"props":3519,"children":3521},{"className":1284,"code":3520,"language":1286,"meta":7,"style":7},"import { useIsAuthenticated } from \"vue3-msal-plugin\";\n\nconst isAuthenticated = useIsAuthenticated();\n",[3522],{"type":32,"tag":218,"props":3523,"children":3524},{"__ignoreMap":7},[3525,3565,3572],{"type":32,"tag":1138,"props":3526,"children":3527},{"class":1140,"line":1141},[3528,3532,3536,3541,3545,3549,3553,3557,3561],{"type":32,"tag":1138,"props":3529,"children":3530},{"style":1296},[3531],{"type":37,"value":1299},{"type":32,"tag":1138,"props":3533,"children":3534},{"style":1302},[3535],{"type":37,"value":1305},{"type":32,"tag":1138,"props":3537,"children":3538},{"style":1308},[3539],{"type":37,"value":3540},"useIsAuthenticated",{"type":32,"tag":1138,"props":3542,"children":3543},{"style":1302},[3544],{"type":37,"value":1316},{"type":32,"tag":1138,"props":3546,"children":3547},{"style":1296},[3548],{"type":37,"value":1321},{"type":32,"tag":1138,"props":3550,"children":3551},{"style":1151},[3552],{"type":37,"value":1326},{"type":32,"tag":1138,"props":3554,"children":3555},{"style":1162},[3556],{"type":37,"value":925},{"type":32,"tag":1138,"props":3558,"children":3559},{"style":1151},[3560],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3562,"children":3563},{"style":1151},[3564],{"type":37,"value":1340},{"type":32,"tag":1138,"props":3566,"children":3567},{"class":1140,"line":392},[3568],{"type":32,"tag":1138,"props":3569,"children":3570},{"emptyLinePlaceholder":1494},[3571],{"type":37,"value":1497},{"type":32,"tag":1138,"props":3573,"children":3574},{"class":1140,"line":1393},[3575,3579,3583,3587,3591,3595],{"type":32,"tag":1138,"props":3576,"children":3577},{"style":1580},[3578],{"type":37,"value":1583},{"type":32,"tag":1138,"props":3580,"children":3581},{"style":1401},[3582],{"type":37,"value":3035},{"type":32,"tag":1138,"props":3584,"children":3585},{"style":1151},[3586],{"type":37,"value":1603},{"type":32,"tag":1138,"props":3588,"children":3589},{"style":1889},[3590],{"type":37,"value":2949},{"type":32,"tag":1138,"props":3592,"children":3593},{"style":1302},[3594],{"type":37,"value":1897},{"type":32,"tag":1138,"props":3596,"children":3597},{"style":1151},[3598],{"type":37,"value":1340},{"type":32,"tag":33,"props":3600,"children":3601},{},[3602,3608,3610,3616,3618,3623],{"type":32,"tag":218,"props":3603,"children":3605},{"className":3604},[],[3606],{"type":37,"value":3607},"useIsAuthenticated()",{"type":37,"value":3609}," returns a ",{"type":32,"tag":218,"props":3611,"children":3613},{"className":3612},[],[3614],{"type":37,"value":3615},"Ref\u003Cboolean>",{"type":37,"value":3617}," that you can use straight in a template. The plugin listens to MSAL's events (sign-in, sign-out, silent SSO, redirect completion, token acquisition) and only updates ",{"type":32,"tag":218,"props":3619,"children":3621},{"className":3620},[],[3622],{"type":37,"value":2064},{"type":37,"value":3624}," when the list actually changes, so it doesn't trigger extra re-renders.",{"type":32,"tag":33,"props":3626,"children":3627},{},[3628],{"type":37,"value":3629},"For the user's details, read the account.",{"type":32,"tag":33,"props":3631,"children":3632},{},[3633],{"type":32,"tag":549,"props":3634,"children":3635},{},[3636],{"type":32,"tag":218,"props":3637,"children":3639},{"className":3638},[],[3640],{"type":37,"value":3641},"src/components/UserBadge.vue",{"type":32,"tag":1128,"props":3643,"children":3645},{"className":2872,"code":3644,"language":1331,"meta":7,"style":7},"\u003Cscript setup lang=\"ts\">\nimport { computed } from \"vue\";\nimport { useMsal } from \"vue3-msal-plugin\";\n\nconst { accounts } = useMsal();\nconst account = computed(() => accounts.value[0] ?? null);\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cp v-if=\"account\">{{ account.name }} ({{ account.username }})\u003C/p>\n\u003C/template>\n",[3646],{"type":32,"tag":218,"props":3647,"children":3648},{"__ignoreMap":7},[3649,3688,3728,3767,3774,3809,3883,3898,3905,3920,4019],{"type":32,"tag":1138,"props":3650,"children":3651},{"class":1140,"line":1141},[3652,3656,3660,3664,3668,3672,3676,3680,3684],{"type":32,"tag":1138,"props":3653,"children":3654},{"style":2883},[3655],{"type":37,"value":2886},{"type":32,"tag":1138,"props":3657,"children":3658},{"style":2889},[3659],{"type":37,"value":2892},{"type":32,"tag":1138,"props":3661,"children":3662},{"style":1401},[3663],{"type":37,"value":2897},{"type":32,"tag":1138,"props":3665,"children":3666},{"style":1401},[3667],{"type":37,"value":2902},{"type":32,"tag":1138,"props":3669,"children":3670},{"style":1151},[3671],{"type":37,"value":1154},{"type":32,"tag":1138,"props":3673,"children":3674},{"style":1151},[3675],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3677,"children":3678},{"style":1162},[3679],{"type":37,"value":2915},{"type":32,"tag":1138,"props":3681,"children":3682},{"style":1151},[3683],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3685,"children":3686},{"style":2883},[3687],{"type":37,"value":2924},{"type":32,"tag":1138,"props":3689,"children":3690},{"class":1140,"line":392},[3691,3695,3699,3704,3708,3712,3716,3720,3724],{"type":32,"tag":1138,"props":3692,"children":3693},{"style":1296},[3694],{"type":37,"value":1299},{"type":32,"tag":1138,"props":3696,"children":3697},{"style":1302},[3698],{"type":37,"value":1305},{"type":32,"tag":1138,"props":3700,"children":3701},{"style":1308},[3702],{"type":37,"value":3703},"computed",{"type":32,"tag":1138,"props":3705,"children":3706},{"style":1302},[3707],{"type":37,"value":1316},{"type":32,"tag":1138,"props":3709,"children":3710},{"style":1296},[3711],{"type":37,"value":1321},{"type":32,"tag":1138,"props":3713,"children":3714},{"style":1151},[3715],{"type":37,"value":1326},{"type":32,"tag":1138,"props":3717,"children":3718},{"style":1162},[3719],{"type":37,"value":1331},{"type":32,"tag":1138,"props":3721,"children":3722},{"style":1151},[3723],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3725,"children":3726},{"style":1151},[3727],{"type":37,"value":1340},{"type":32,"tag":1138,"props":3729,"children":3730},{"class":1140,"line":1393},[3731,3735,3739,3743,3747,3751,3755,3759,3763],{"type":32,"tag":1138,"props":3732,"children":3733},{"style":1296},[3734],{"type":37,"value":1299},{"type":32,"tag":1138,"props":3736,"children":3737},{"style":1302},[3738],{"type":37,"value":1305},{"type":32,"tag":1138,"props":3740,"children":3741},{"style":1308},[3742],{"type":37,"value":2940},{"type":32,"tag":1138,"props":3744,"children":3745},{"style":1302},[3746],{"type":37,"value":1316},{"type":32,"tag":1138,"props":3748,"children":3749},{"style":1296},[3750],{"type":37,"value":1321},{"type":32,"tag":1138,"props":3752,"children":3753},{"style":1151},[3754],{"type":37,"value":1326},{"type":32,"tag":1138,"props":3756,"children":3757},{"style":1162},[3758],{"type":37,"value":925},{"type":32,"tag":1138,"props":3760,"children":3761},{"style":1151},[3762],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3764,"children":3765},{"style":1151},[3766],{"type":37,"value":1340},{"type":32,"tag":1138,"props":3768,"children":3769},{"class":1140,"line":1449},[3770],{"type":32,"tag":1138,"props":3771,"children":3772},{"emptyLinePlaceholder":1494},[3773],{"type":37,"value":1497},{"type":32,"tag":1138,"props":3775,"children":3776},{"class":1140,"line":1490},[3777,3781,3785,3789,3793,3797,3801,3805],{"type":32,"tag":1138,"props":3778,"children":3779},{"style":1580},[3780],{"type":37,"value":1583},{"type":32,"tag":1138,"props":3782,"children":3783},{"style":1151},[3784],{"type":37,"value":2748},{"type":32,"tag":1138,"props":3786,"children":3787},{"style":1401},[3788],{"type":37,"value":2021},{"type":32,"tag":1138,"props":3790,"children":3791},{"style":1151},[3792],{"type":37,"value":1316},{"type":32,"tag":1138,"props":3794,"children":3795},{"style":1151},[3796],{"type":37,"value":1603},{"type":32,"tag":1138,"props":3798,"children":3799},{"style":1889},[3800],{"type":37,"value":2800},{"type":32,"tag":1138,"props":3802,"children":3803},{"style":1302},[3804],{"type":37,"value":1897},{"type":32,"tag":1138,"props":3806,"children":3807},{"style":1151},[3808],{"type":37,"value":1340},{"type":32,"tag":1138,"props":3810,"children":3811},{"class":1140,"line":1500},[3812,3816,3821,3825,3830,3835,3839,3843,3847,3852,3856,3860,3865,3870,3875,3879],{"type":32,"tag":1138,"props":3813,"children":3814},{"style":1580},[3815],{"type":37,"value":1583},{"type":32,"tag":1138,"props":3817,"children":3818},{"style":1401},[3819],{"type":37,"value":3820}," account",{"type":32,"tag":1138,"props":3822,"children":3823},{"style":1151},[3824],{"type":37,"value":1603},{"type":32,"tag":1138,"props":3826,"children":3827},{"style":1889},[3828],{"type":37,"value":3829}," computed",{"type":32,"tag":1138,"props":3831,"children":3832},{"style":1302},[3833],{"type":37,"value":3834},"(()",{"type":32,"tag":1138,"props":3836,"children":3837},{"style":1401},[3838],{"type":37,"value":3084},{"type":32,"tag":1138,"props":3840,"children":3841},{"style":1145},[3842],{"type":37,"value":2021},{"type":32,"tag":1138,"props":3844,"children":3845},{"style":1151},[3846],{"type":37,"value":64},{"type":32,"tag":1138,"props":3848,"children":3849},{"style":1296},[3850],{"type":37,"value":3851},"value",{"type":32,"tag":1138,"props":3853,"children":3854},{"style":1302},[3855],{"type":37,"value":2119},{"type":32,"tag":1138,"props":3857,"children":3858},{"style":1669},[3859],{"type":37,"value":2124},{"type":32,"tag":1138,"props":3861,"children":3862},{"style":1302},[3863],{"type":37,"value":3864},"]",{"type":32,"tag":1138,"props":3866,"children":3867},{"style":1401},[3868],{"type":37,"value":3869}," ??",{"type":32,"tag":1138,"props":3871,"children":3872},{"style":1669},[3873],{"type":37,"value":3874}," null",{"type":32,"tag":1138,"props":3876,"children":3877},{"style":1302},[3878],{"type":37,"value":1938},{"type":32,"tag":1138,"props":3880,"children":3881},{"style":1151},[3882],{"type":37,"value":1340},{"type":32,"tag":1138,"props":3884,"children":3885},{"class":1140,"line":1534},[3886,3890,3894],{"type":32,"tag":1138,"props":3887,"children":3888},{"style":2883},[3889],{"type":37,"value":3292},{"type":32,"tag":1138,"props":3891,"children":3892},{"style":2889},[3893],{"type":37,"value":2892},{"type":32,"tag":1138,"props":3895,"children":3896},{"style":2883},[3897],{"type":37,"value":2924},{"type":32,"tag":1138,"props":3899,"children":3900},{"class":1140,"line":1568},[3901],{"type":32,"tag":1138,"props":3902,"children":3903},{"emptyLinePlaceholder":1494},[3904],{"type":37,"value":1497},{"type":32,"tag":1138,"props":3906,"children":3907},{"class":1140,"line":1576},[3908,3912,3916],{"type":32,"tag":1138,"props":3909,"children":3910},{"style":2883},[3911],{"type":37,"value":2886},{"type":32,"tag":1138,"props":3913,"children":3914},{"style":2889},[3915],{"type":37,"value":3319},{"type":32,"tag":1138,"props":3917,"children":3918},{"style":2883},[3919],{"type":37,"value":2924},{"type":32,"tag":1138,"props":3921,"children":3922},{"class":1140,"line":1611},[3923,3927,3931,3935,3939,3943,3947,3951,3955,3960,3964,3968,3973,3978,3982,3986,3990,3994,3999,4003,4007,4011,4015],{"type":32,"tag":1138,"props":3924,"children":3925},{"style":2883},[3926],{"type":37,"value":3331},{"type":32,"tag":1138,"props":3928,"children":3929},{"style":2889},[3930],{"type":37,"value":33},{"type":32,"tag":1138,"props":3932,"children":3933},{"style":1401},[3934],{"type":37,"value":3341},{"type":32,"tag":1138,"props":3936,"children":3937},{"style":1151},[3938],{"type":37,"value":1154},{"type":32,"tag":1138,"props":3940,"children":3941},{"style":1151},[3942],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3944,"children":3945},{"style":1145},[3946],{"type":37,"value":2347},{"type":32,"tag":1138,"props":3948,"children":3949},{"style":1151},[3950],{"type":37,"value":1159},{"type":32,"tag":1138,"props":3952,"children":3953},{"style":2883},[3954],{"type":37,"value":3394},{"type":32,"tag":1138,"props":3956,"children":3957},{"style":1151},[3958],{"type":37,"value":3959},"{{",{"type":32,"tag":1138,"props":3961,"children":3962},{"style":1145},[3963],{"type":37,"value":3820},{"type":32,"tag":1138,"props":3965,"children":3966},{"style":1151},[3967],{"type":37,"value":64},{"type":32,"tag":1138,"props":3969,"children":3970},{"style":1296},[3971],{"type":37,"value":3972},"name",{"type":32,"tag":1138,"props":3974,"children":3975},{"style":1151},[3976],{"type":37,"value":3977}," }}",{"type":32,"tag":1138,"props":3979,"children":3980},{"style":3397},[3981],{"type":37,"value":972},{"type":32,"tag":1138,"props":3983,"children":3984},{"style":1151},[3985],{"type":37,"value":3959},{"type":32,"tag":1138,"props":3987,"children":3988},{"style":1145},[3989],{"type":37,"value":3820},{"type":32,"tag":1138,"props":3991,"children":3992},{"style":1151},[3993],{"type":37,"value":64},{"type":32,"tag":1138,"props":3995,"children":3996},{"style":1296},[3997],{"type":37,"value":3998},"username",{"type":32,"tag":1138,"props":4000,"children":4001},{"style":1151},[4002],{"type":37,"value":3977},{"type":32,"tag":1138,"props":4004,"children":4005},{"style":3397},[4006],{"type":37,"value":1938},{"type":32,"tag":1138,"props":4008,"children":4009},{"style":2883},[4010],{"type":37,"value":3292},{"type":32,"tag":1138,"props":4012,"children":4013},{"style":2889},[4014],{"type":37,"value":33},{"type":32,"tag":1138,"props":4016,"children":4017},{"style":2883},[4018],{"type":37,"value":2924},{"type":32,"tag":1138,"props":4020,"children":4021},{"class":1140,"line":1629},[4022,4026,4030],{"type":32,"tag":1138,"props":4023,"children":4024},{"style":2883},[4025],{"type":37,"value":3292},{"type":32,"tag":1138,"props":4027,"children":4028},{"style":2889},[4029],{"type":37,"value":3319},{"type":32,"tag":1138,"props":4031,"children":4032},{"style":2883},[4033],{"type":37,"value":2924},{"type":32,"tag":33,"props":4035,"children":4036},{},[4037,4042,4043,4048],{"type":32,"tag":218,"props":4038,"children":4040},{"className":4039},[],[4041],{"type":37,"value":3972},{"type":37,"value":2833},{"type":32,"tag":218,"props":4044,"children":4046},{"className":4045},[],[4047],{"type":37,"value":3998},{"type":37,"value":4049}," come from the ID token. Use them for display, not for authorization. Access control belongs in the API that validates the access token.",{"type":32,"tag":66,"props":4051,"children":4053},{"id":4052},"getting-an-access-token",[4054],{"type":37,"value":4055},"Getting an access token",{"type":32,"tag":33,"props":4057,"children":4058},{},[4059,4061,4067],{"type":37,"value":4060},"To call a protected API, you need an access token for its scopes. ",{"type":32,"tag":218,"props":4062,"children":4064},{"className":4063},[],[4065],{"type":37,"value":4066},"useMsalAuthentication",{"type":37,"value":4068}," handles that.",{"type":32,"tag":33,"props":4070,"children":4071},{},[4072],{"type":32,"tag":549,"props":4073,"children":4074},{},[4075],{"type":32,"tag":218,"props":4076,"children":4078},{"className":4077},[],[4079],{"type":37,"value":4080},"src/components/TokenDemo.vue",{"type":32,"tag":1128,"props":4082,"children":4084},{"className":2872,"code":4083,"language":1331,"meta":7,"style":7},"\u003Cscript setup lang=\"ts\">\nimport { watch } from \"vue\";\nimport { useMsalAuthentication, InteractionType } from \"vue3-msal-plugin\";\n\nconst { result, error, inProgress, acquireToken } = useMsalAuthentication(\n  InteractionType.Popup,\n  { scopes: [\"User.Read\"] },\n);\n\nwatch(result, (value) => {\n  if (value) {\n    console.log(value.accessToken);\n  }\n});\n\u003C/script>\n",[4085],{"type":32,"tag":218,"props":4086,"children":4087},{"__ignoreMap":7},[4088,4127,4167,4215,4222,4282,4303,4349,4360,4367,4407,4426,4468,4475,4487],{"type":32,"tag":1138,"props":4089,"children":4090},{"class":1140,"line":1141},[4091,4095,4099,4103,4107,4111,4115,4119,4123],{"type":32,"tag":1138,"props":4092,"children":4093},{"style":2883},[4094],{"type":37,"value":2886},{"type":32,"tag":1138,"props":4096,"children":4097},{"style":2889},[4098],{"type":37,"value":2892},{"type":32,"tag":1138,"props":4100,"children":4101},{"style":1401},[4102],{"type":37,"value":2897},{"type":32,"tag":1138,"props":4104,"children":4105},{"style":1401},[4106],{"type":37,"value":2902},{"type":32,"tag":1138,"props":4108,"children":4109},{"style":1151},[4110],{"type":37,"value":1154},{"type":32,"tag":1138,"props":4112,"children":4113},{"style":1151},[4114],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4116,"children":4117},{"style":1162},[4118],{"type":37,"value":2915},{"type":32,"tag":1138,"props":4120,"children":4121},{"style":1151},[4122],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4124,"children":4125},{"style":2883},[4126],{"type":37,"value":2924},{"type":32,"tag":1138,"props":4128,"children":4129},{"class":1140,"line":392},[4130,4134,4138,4143,4147,4151,4155,4159,4163],{"type":32,"tag":1138,"props":4131,"children":4132},{"style":1296},[4133],{"type":37,"value":1299},{"type":32,"tag":1138,"props":4135,"children":4136},{"style":1302},[4137],{"type":37,"value":1305},{"type":32,"tag":1138,"props":4139,"children":4140},{"style":1308},[4141],{"type":37,"value":4142},"watch",{"type":32,"tag":1138,"props":4144,"children":4145},{"style":1302},[4146],{"type":37,"value":1316},{"type":32,"tag":1138,"props":4148,"children":4149},{"style":1296},[4150],{"type":37,"value":1321},{"type":32,"tag":1138,"props":4152,"children":4153},{"style":1151},[4154],{"type":37,"value":1326},{"type":32,"tag":1138,"props":4156,"children":4157},{"style":1162},[4158],{"type":37,"value":1331},{"type":32,"tag":1138,"props":4160,"children":4161},{"style":1151},[4162],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4164,"children":4165},{"style":1151},[4166],{"type":37,"value":1340},{"type":32,"tag":1138,"props":4168,"children":4169},{"class":1140,"line":1393},[4170,4174,4178,4182,4186,4191,4195,4199,4203,4207,4211],{"type":32,"tag":1138,"props":4171,"children":4172},{"style":1296},[4173],{"type":37,"value":1299},{"type":32,"tag":1138,"props":4175,"children":4176},{"style":1302},[4177],{"type":37,"value":1305},{"type":32,"tag":1138,"props":4179,"children":4180},{"style":1308},[4181],{"type":37,"value":4066},{"type":32,"tag":1138,"props":4183,"children":4184},{"style":1151},[4185],{"type":37,"value":1361},{"type":32,"tag":1138,"props":4187,"children":4188},{"style":1308},[4189],{"type":37,"value":4190}," InteractionType",{"type":32,"tag":1138,"props":4192,"children":4193},{"style":1302},[4194],{"type":37,"value":1316},{"type":32,"tag":1138,"props":4196,"children":4197},{"style":1296},[4198],{"type":37,"value":1321},{"type":32,"tag":1138,"props":4200,"children":4201},{"style":1151},[4202],{"type":37,"value":1326},{"type":32,"tag":1138,"props":4204,"children":4205},{"style":1162},[4206],{"type":37,"value":925},{"type":32,"tag":1138,"props":4208,"children":4209},{"style":1151},[4210],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4212,"children":4213},{"style":1151},[4214],{"type":37,"value":1340},{"type":32,"tag":1138,"props":4216,"children":4217},{"class":1140,"line":1449},[4218],{"type":32,"tag":1138,"props":4219,"children":4220},{"emptyLinePlaceholder":1494},[4221],{"type":37,"value":1497},{"type":32,"tag":1138,"props":4223,"children":4224},{"class":1140,"line":1490},[4225,4229,4233,4238,4242,4247,4251,4255,4259,4264,4268,4272,4277],{"type":32,"tag":1138,"props":4226,"children":4227},{"style":1580},[4228],{"type":37,"value":1583},{"type":32,"tag":1138,"props":4230,"children":4231},{"style":1151},[4232],{"type":37,"value":2748},{"type":32,"tag":1138,"props":4234,"children":4235},{"style":1401},[4236],{"type":37,"value":4237}," result",{"type":32,"tag":1138,"props":4239,"children":4240},{"style":1151},[4241],{"type":37,"value":1361},{"type":32,"tag":1138,"props":4243,"children":4244},{"style":1401},[4245],{"type":37,"value":4246}," error",{"type":32,"tag":1138,"props":4248,"children":4249},{"style":1151},[4250],{"type":37,"value":1361},{"type":32,"tag":1138,"props":4252,"children":4253},{"style":1401},[4254],{"type":37,"value":2769},{"type":32,"tag":1138,"props":4256,"children":4257},{"style":1151},[4258],{"type":37,"value":1361},{"type":32,"tag":1138,"props":4260,"children":4261},{"style":1401},[4262],{"type":37,"value":4263}," acquireToken",{"type":32,"tag":1138,"props":4265,"children":4266},{"style":1151},[4267],{"type":37,"value":1316},{"type":32,"tag":1138,"props":4269,"children":4270},{"style":1151},[4271],{"type":37,"value":1603},{"type":32,"tag":1138,"props":4273,"children":4274},{"style":1889},[4275],{"type":37,"value":4276}," useMsalAuthentication",{"type":32,"tag":1138,"props":4278,"children":4279},{"style":1302},[4280],{"type":37,"value":4281},"(\n",{"type":32,"tag":1138,"props":4283,"children":4284},{"class":1140,"line":1500},[4285,4290,4294,4299],{"type":32,"tag":1138,"props":4286,"children":4287},{"style":1145},[4288],{"type":37,"value":4289},"  InteractionType",{"type":32,"tag":1138,"props":4291,"children":4292},{"style":1151},[4293],{"type":37,"value":64},{"type":32,"tag":1138,"props":4295,"children":4296},{"style":1296},[4297],{"type":37,"value":4298},"Popup",{"type":32,"tag":1138,"props":4300,"children":4301},{"style":1151},[4302],{"type":37,"value":1676},{"type":32,"tag":1138,"props":4304,"children":4305},{"class":1140,"line":1534},[4306,4311,4316,4320,4325,4329,4333,4337,4341,4345],{"type":32,"tag":1138,"props":4307,"children":4308},{"style":1302},[4309],{"type":37,"value":4310},"  {",{"type":32,"tag":1138,"props":4312,"children":4313},{"style":1615},[4314],{"type":37,"value":4315}," scopes",{"type":32,"tag":1138,"props":4317,"children":4318},{"style":1151},[4319],{"type":37,"value":1593},{"type":32,"tag":1138,"props":4321,"children":4322},{"style":1302},[4323],{"type":37,"value":4324}," [",{"type":32,"tag":1138,"props":4326,"children":4327},{"style":1151},[4328],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4330,"children":4331},{"style":1162},[4332],{"type":37,"value":1112},{"type":32,"tag":1138,"props":4334,"children":4335},{"style":1151},[4336],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4338,"children":4339},{"style":1302},[4340],{"type":37,"value":3864},{"type":32,"tag":1138,"props":4342,"children":4343},{"style":1302},[4344],{"type":37,"value":1316},{"type":32,"tag":1138,"props":4346,"children":4347},{"style":1151},[4348],{"type":37,"value":1676},{"type":32,"tag":1138,"props":4350,"children":4351},{"class":1140,"line":1568},[4352,4356],{"type":32,"tag":1138,"props":4353,"children":4354},{"style":1302},[4355],{"type":37,"value":1938},{"type":32,"tag":1138,"props":4357,"children":4358},{"style":1151},[4359],{"type":37,"value":1340},{"type":32,"tag":1138,"props":4361,"children":4362},{"class":1140,"line":1576},[4363],{"type":32,"tag":1138,"props":4364,"children":4365},{"emptyLinePlaceholder":1494},[4366],{"type":37,"value":1497},{"type":32,"tag":1138,"props":4368,"children":4369},{"class":1140,"line":1611},[4370,4374,4378,4383,4387,4391,4395,4399,4403],{"type":32,"tag":1138,"props":4371,"children":4372},{"style":1889},[4373],{"type":37,"value":4142},{"type":32,"tag":1138,"props":4375,"children":4376},{"style":1302},[4377],{"type":37,"value":1928},{"type":32,"tag":1138,"props":4379,"children":4380},{"style":1145},[4381],{"type":37,"value":4382},"result",{"type":32,"tag":1138,"props":4384,"children":4385},{"style":1151},[4386],{"type":37,"value":1361},{"type":32,"tag":1138,"props":4388,"children":4389},{"style":1302},[4390],{"type":37,"value":972},{"type":32,"tag":1138,"props":4392,"children":4393},{"style":2185},[4394],{"type":37,"value":3851},{"type":32,"tag":1138,"props":4396,"children":4397},{"style":1302},[4398],{"type":37,"value":1938},{"type":32,"tag":1138,"props":4400,"children":4401},{"style":1401},[4402],{"type":37,"value":3084},{"type":32,"tag":1138,"props":4404,"children":4405},{"style":1302},[4406],{"type":37,"value":1608},{"type":32,"tag":1138,"props":4408,"children":4409},{"class":1140,"line":1629},[4410,4414,4418,4422],{"type":32,"tag":1138,"props":4411,"children":4412},{"style":1401},[4413],{"type":37,"value":2055},{"type":32,"tag":1138,"props":4415,"children":4416},{"style":1302},[4417],{"type":37,"value":972},{"type":32,"tag":1138,"props":4419,"children":4420},{"style":1145},[4421],{"type":37,"value":3851},{"type":32,"tag":1138,"props":4423,"children":4424},{"style":1302},[4425],{"type":37,"value":2088},{"type":32,"tag":1138,"props":4427,"children":4428},{"class":1140,"line":1679},[4429,4434,4438,4443,4447,4451,4455,4460,4464],{"type":32,"tag":1138,"props":4430,"children":4431},{"style":1145},[4432],{"type":37,"value":4433},"    console",{"type":32,"tag":1138,"props":4435,"children":4436},{"style":1151},[4437],{"type":37,"value":64},{"type":32,"tag":1138,"props":4439,"children":4440},{"style":1889},[4441],{"type":37,"value":4442},"log",{"type":32,"tag":1138,"props":4444,"children":4445},{"style":1302},[4446],{"type":37,"value":1928},{"type":32,"tag":1138,"props":4448,"children":4449},{"style":1145},[4450],{"type":37,"value":3851},{"type":32,"tag":1138,"props":4452,"children":4453},{"style":1151},[4454],{"type":37,"value":64},{"type":32,"tag":1138,"props":4456,"children":4457},{"style":1296},[4458],{"type":37,"value":4459},"accessToken",{"type":32,"tag":1138,"props":4461,"children":4462},{"style":1302},[4463],{"type":37,"value":1938},{"type":32,"tag":1138,"props":4465,"children":4466},{"style":1151},[4467],{"type":37,"value":1340},{"type":32,"tag":1138,"props":4469,"children":4470},{"class":1140,"line":1724},[4471],{"type":32,"tag":1138,"props":4472,"children":4473},{"style":1302},[4474],{"type":37,"value":2142},{"type":32,"tag":1138,"props":4476,"children":4477},{"class":1140,"line":1753},[4478,4483],{"type":32,"tag":1138,"props":4479,"children":4480},{"style":1302},[4481],{"type":37,"value":4482},"})",{"type":32,"tag":1138,"props":4484,"children":4485},{"style":1151},[4486],{"type":37,"value":1340},{"type":32,"tag":1138,"props":4488,"children":4489},{"class":1140,"line":1782},[4490,4494,4498],{"type":32,"tag":1138,"props":4491,"children":4492},{"style":2883},[4493],{"type":37,"value":3292},{"type":32,"tag":1138,"props":4495,"children":4496},{"style":2889},[4497],{"type":37,"value":2892},{"type":32,"tag":1138,"props":4499,"children":4500},{"style":2883},[4501],{"type":37,"value":2924},{"type":32,"tag":33,"props":4503,"children":4504},{},[4505,4507,4513,4515,4522,4524,4529,4531,4537,4539,4544,4546,4552],{"type":37,"value":4506},"It starts as soon as it's called. It tries ",{"type":32,"tag":218,"props":4508,"children":4510},{"className":4509},[],[4511],{"type":37,"value":4512},"acquireTokenSilent",{"type":37,"value":4514}," first, which returns a cached token or refreshes it in the background, and falls back to an interactive prompt if that fails. That's ",{"type":32,"tag":55,"props":4516,"children":4519},{"href":4517,"rel":4518},"https://learn.microsoft.com/en-us/entra/identity-platform/scenario-spa-acquire-token",[59],[4520],{"type":37,"value":4521},"the pattern Microsoft recommends",{"type":37,"value":4523},". You get ",{"type":32,"tag":218,"props":4525,"children":4527},{"className":4526},[],[4528],{"type":37,"value":4382},{"type":37,"value":4530},", ",{"type":32,"tag":218,"props":4532,"children":4534},{"className":4533},[],[4535],{"type":37,"value":4536},"error",{"type":37,"value":4538},", and ",{"type":32,"tag":218,"props":4540,"children":4542},{"className":4541},[],[4543],{"type":37,"value":2839},{"type":37,"value":4545}," as refs, plus ",{"type":32,"tag":218,"props":4547,"children":4549},{"className":4548},[],[4550],{"type":37,"value":4551},"acquireToken",{"type":37,"value":4553}," to run it again.",{"type":32,"tag":33,"props":4555,"children":4556},{},[4557,4559,4565,4567,4573,4575,4581],{"type":37,"value":4558},"Pass ",{"type":32,"tag":218,"props":4560,"children":4562},{"className":4561},[],[4563],{"type":37,"value":4564},"InteractionType.Popup",{"type":37,"value":4566}," or ",{"type":32,"tag":218,"props":4568,"children":4570},{"className":4569},[],[4571],{"type":37,"value":4572},"InteractionType.Redirect",{"type":37,"value":4574},", not ",{"type":32,"tag":218,"props":4576,"children":4578},{"className":4577},[],[4579],{"type":37,"value":4580},"Silent",{"type":37,"value":4582},". Only those two can fall back to a prompt, which a user needs the first time they consent to a new scope.",{"type":32,"tag":33,"props":4584,"children":4585},{},[4586,4588,4593],{"type":37,"value":4587},"Request only the scopes of the API you're calling. For a second API, pass its scopes to ",{"type":32,"tag":218,"props":4589,"children":4591},{"className":4590},[],[4592],{"type":37,"value":4551},{"type":37,"value":4594}," instead of widening the first request.",{"type":32,"tag":1128,"props":4596,"children":4598},{"className":1284,"code":4597,"language":1286,"meta":7,"style":7},"await acquireToken({ scopes: [\"api://your-api-id/Files.Read\"] });\n",[4599],{"type":32,"tag":218,"props":4600,"children":4601},{"__ignoreMap":7},[4602],{"type":32,"tag":1138,"props":4603,"children":4604},{"class":1140,"line":1141},[4605,4610,4614,4618,4622,4626,4630,4634,4639,4643,4647,4651],{"type":32,"tag":1138,"props":4606,"children":4607},{"style":1967},[4608],{"type":37,"value":4609},"await",{"type":32,"tag":1138,"props":4611,"children":4612},{"style":1889},[4613],{"type":37,"value":4263},{"type":32,"tag":1138,"props":4615,"children":4616},{"style":1302},[4617],{"type":37,"value":3208},{"type":32,"tag":1138,"props":4619,"children":4620},{"style":1615},[4621],{"type":37,"value":4315},{"type":32,"tag":1138,"props":4623,"children":4624},{"style":1151},[4625],{"type":37,"value":1593},{"type":32,"tag":1138,"props":4627,"children":4628},{"style":1302},[4629],{"type":37,"value":4324},{"type":32,"tag":1138,"props":4631,"children":4632},{"style":1151},[4633],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4635,"children":4636},{"style":1162},[4637],{"type":37,"value":4638},"api://your-api-id/Files.Read",{"type":32,"tag":1138,"props":4640,"children":4641},{"style":1151},[4642],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4644,"children":4645},{"style":1302},[4646],{"type":37,"value":3864},{"type":32,"tag":1138,"props":4648,"children":4649},{"style":1302},[4650],{"type":37,"value":3235},{"type":32,"tag":1138,"props":4652,"children":4653},{"style":1151},[4654],{"type":37,"value":1340},{"type":32,"tag":33,"props":4656,"children":4657},{},[4658],{"type":37,"value":4659},"MSAL caches tokens per scope, so acquiring one before every request is fine. Don't copy the token into a Pinia store or a cookie. Let MSAL handle expiry and refresh.",{"type":32,"tag":66,"props":4661,"children":4663},{"id":4662},"calling-microsoft-graph",[4664],{"type":37,"value":4665},"Calling Microsoft Graph",{"type":32,"tag":33,"props":4667,"children":4668},{},[4669,4674,4676,4682],{"type":32,"tag":218,"props":4670,"children":4672},{"className":4671},[],[4673],{"type":37,"value":2711},{"type":37,"value":4675}," also gives you ",{"type":32,"tag":218,"props":4677,"children":4679},{"className":4678},[],[4680],{"type":37,"value":4681},"callMsGraph",{"type":37,"value":4683},", which fetches the signed-in user's profile.",{"type":32,"tag":33,"props":4685,"children":4686},{},[4687],{"type":32,"tag":549,"props":4688,"children":4689},{},[4690],{"type":32,"tag":218,"props":4691,"children":4693},{"className":4692},[],[4694],{"type":37,"value":4695},"src/components/Profile.vue",{"type":32,"tag":1128,"props":4697,"children":4699},{"className":2872,"code":4698,"language":1331,"meta":7,"style":7},"\u003Cscript setup lang=\"ts\">\nimport { ref, watch } from \"vue\";\nimport {\n  useMsal,\n  useMsalAuthentication,\n  InteractionType,\n} from \"vue3-msal-plugin\";\n\nconst { callMsGraph } = useMsal();\nconst { result } = useMsalAuthentication(InteractionType.Popup, {\n  scopes: [\"User.Read\"],\n});\n\nconst profile = ref\u003CRecord\u003Cstring, unknown> | null>(null);\n\nwatch(result, async (value) => {\n  if (!value) return;\n  try {\n    profile.value = await callMsGraph(value.accessToken);\n  } catch (e) {\n    console.error(e);\n  }\n});\n\u003C/script>\n\n\u003Ctemplate>\n  \u003Cpre v-if=\"profile\">{{ profile }}\u003C/pre>\n\u003C/template>\n",[4700],{"type":32,"tag":218,"props":4701,"children":4702},{"__ignoreMap":7},[4703,4742,4791,4802,4814,4826,4837,4864,4871,4906,4958,4994,5005,5012,5094,5101,5145,5177,5189,5242,5268,5299,5306,5317,5332,5339,5354,5414],{"type":32,"tag":1138,"props":4704,"children":4705},{"class":1140,"line":1141},[4706,4710,4714,4718,4722,4726,4730,4734,4738],{"type":32,"tag":1138,"props":4707,"children":4708},{"style":2883},[4709],{"type":37,"value":2886},{"type":32,"tag":1138,"props":4711,"children":4712},{"style":2889},[4713],{"type":37,"value":2892},{"type":32,"tag":1138,"props":4715,"children":4716},{"style":1401},[4717],{"type":37,"value":2897},{"type":32,"tag":1138,"props":4719,"children":4720},{"style":1401},[4721],{"type":37,"value":2902},{"type":32,"tag":1138,"props":4723,"children":4724},{"style":1151},[4725],{"type":37,"value":1154},{"type":32,"tag":1138,"props":4727,"children":4728},{"style":1151},[4729],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4731,"children":4732},{"style":1162},[4733],{"type":37,"value":2915},{"type":32,"tag":1138,"props":4735,"children":4736},{"style":1151},[4737],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4739,"children":4740},{"style":2883},[4741],{"type":37,"value":2924},{"type":32,"tag":1138,"props":4743,"children":4744},{"class":1140,"line":392},[4745,4749,4753,4758,4762,4767,4771,4775,4779,4783,4787],{"type":32,"tag":1138,"props":4746,"children":4747},{"style":1296},[4748],{"type":37,"value":1299},{"type":32,"tag":1138,"props":4750,"children":4751},{"style":1302},[4752],{"type":37,"value":1305},{"type":32,"tag":1138,"props":4754,"children":4755},{"style":1308},[4756],{"type":37,"value":4757},"ref",{"type":32,"tag":1138,"props":4759,"children":4760},{"style":1151},[4761],{"type":37,"value":1361},{"type":32,"tag":1138,"props":4763,"children":4764},{"style":1308},[4765],{"type":37,"value":4766}," watch",{"type":32,"tag":1138,"props":4768,"children":4769},{"style":1302},[4770],{"type":37,"value":1316},{"type":32,"tag":1138,"props":4772,"children":4773},{"style":1296},[4774],{"type":37,"value":1321},{"type":32,"tag":1138,"props":4776,"children":4777},{"style":1151},[4778],{"type":37,"value":1326},{"type":32,"tag":1138,"props":4780,"children":4781},{"style":1162},[4782],{"type":37,"value":1331},{"type":32,"tag":1138,"props":4784,"children":4785},{"style":1151},[4786],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4788,"children":4789},{"style":1151},[4790],{"type":37,"value":1340},{"type":32,"tag":1138,"props":4792,"children":4793},{"class":1140,"line":1393},[4794,4798],{"type":32,"tag":1138,"props":4795,"children":4796},{"style":1296},[4797],{"type":37,"value":1299},{"type":32,"tag":1138,"props":4799,"children":4800},{"style":1302},[4801],{"type":37,"value":1608},{"type":32,"tag":1138,"props":4803,"children":4804},{"class":1140,"line":1449},[4805,4810],{"type":32,"tag":1138,"props":4806,"children":4807},{"style":1308},[4808],{"type":37,"value":4809},"  useMsal",{"type":32,"tag":1138,"props":4811,"children":4812},{"style":1151},[4813],{"type":37,"value":1676},{"type":32,"tag":1138,"props":4815,"children":4816},{"class":1140,"line":1490},[4817,4822],{"type":32,"tag":1138,"props":4818,"children":4819},{"style":1308},[4820],{"type":37,"value":4821},"  useMsalAuthentication",{"type":32,"tag":1138,"props":4823,"children":4824},{"style":1151},[4825],{"type":37,"value":1676},{"type":32,"tag":1138,"props":4827,"children":4828},{"class":1140,"line":1500},[4829,4833],{"type":32,"tag":1138,"props":4830,"children":4831},{"style":1308},[4832],{"type":37,"value":4289},{"type":32,"tag":1138,"props":4834,"children":4835},{"style":1151},[4836],{"type":37,"value":1676},{"type":32,"tag":1138,"props":4838,"children":4839},{"class":1140,"line":1534},[4840,4844,4848,4852,4856,4860],{"type":32,"tag":1138,"props":4841,"children":4842},{"style":1302},[4843],{"type":37,"value":1860},{"type":32,"tag":1138,"props":4845,"children":4846},{"style":1296},[4847],{"type":37,"value":1321},{"type":32,"tag":1138,"props":4849,"children":4850},{"style":1151},[4851],{"type":37,"value":1326},{"type":32,"tag":1138,"props":4853,"children":4854},{"style":1162},[4855],{"type":37,"value":925},{"type":32,"tag":1138,"props":4857,"children":4858},{"style":1151},[4859],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4861,"children":4862},{"style":1151},[4863],{"type":37,"value":1340},{"type":32,"tag":1138,"props":4865,"children":4866},{"class":1140,"line":1568},[4867],{"type":32,"tag":1138,"props":4868,"children":4869},{"emptyLinePlaceholder":1494},[4870],{"type":37,"value":1497},{"type":32,"tag":1138,"props":4872,"children":4873},{"class":1140,"line":1576},[4874,4878,4882,4886,4890,4894,4898,4902],{"type":32,"tag":1138,"props":4875,"children":4876},{"style":1580},[4877],{"type":37,"value":1583},{"type":32,"tag":1138,"props":4879,"children":4880},{"style":1151},[4881],{"type":37,"value":2748},{"type":32,"tag":1138,"props":4883,"children":4884},{"style":1401},[4885],{"type":37,"value":2787},{"type":32,"tag":1138,"props":4887,"children":4888},{"style":1151},[4889],{"type":37,"value":1316},{"type":32,"tag":1138,"props":4891,"children":4892},{"style":1151},[4893],{"type":37,"value":1603},{"type":32,"tag":1138,"props":4895,"children":4896},{"style":1889},[4897],{"type":37,"value":2800},{"type":32,"tag":1138,"props":4899,"children":4900},{"style":1302},[4901],{"type":37,"value":1897},{"type":32,"tag":1138,"props":4903,"children":4904},{"style":1151},[4905],{"type":37,"value":1340},{"type":32,"tag":1138,"props":4907,"children":4908},{"class":1140,"line":1611},[4909,4913,4917,4921,4925,4929,4933,4937,4942,4946,4950,4954],{"type":32,"tag":1138,"props":4910,"children":4911},{"style":1580},[4912],{"type":37,"value":1583},{"type":32,"tag":1138,"props":4914,"children":4915},{"style":1151},[4916],{"type":37,"value":2748},{"type":32,"tag":1138,"props":4918,"children":4919},{"style":1401},[4920],{"type":37,"value":4237},{"type":32,"tag":1138,"props":4922,"children":4923},{"style":1151},[4924],{"type":37,"value":1316},{"type":32,"tag":1138,"props":4926,"children":4927},{"style":1151},[4928],{"type":37,"value":1603},{"type":32,"tag":1138,"props":4930,"children":4931},{"style":1889},[4932],{"type":37,"value":4276},{"type":32,"tag":1138,"props":4934,"children":4935},{"style":1302},[4936],{"type":37,"value":1928},{"type":32,"tag":1138,"props":4938,"children":4939},{"style":1145},[4940],{"type":37,"value":4941},"InteractionType",{"type":32,"tag":1138,"props":4943,"children":4944},{"style":1151},[4945],{"type":37,"value":64},{"type":32,"tag":1138,"props":4947,"children":4948},{"style":1296},[4949],{"type":37,"value":4298},{"type":32,"tag":1138,"props":4951,"children":4952},{"style":1151},[4953],{"type":37,"value":1361},{"type":32,"tag":1138,"props":4955,"children":4956},{"style":1302},[4957],{"type":37,"value":1608},{"type":32,"tag":1138,"props":4959,"children":4960},{"class":1140,"line":1629},[4961,4966,4970,4974,4978,4982,4986,4990],{"type":32,"tag":1138,"props":4962,"children":4963},{"style":1615},[4964],{"type":37,"value":4965},"  scopes",{"type":32,"tag":1138,"props":4967,"children":4968},{"style":1151},[4969],{"type":37,"value":1593},{"type":32,"tag":1138,"props":4971,"children":4972},{"style":1302},[4973],{"type":37,"value":4324},{"type":32,"tag":1138,"props":4975,"children":4976},{"style":1151},[4977],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4979,"children":4980},{"style":1162},[4981],{"type":37,"value":1112},{"type":32,"tag":1138,"props":4983,"children":4984},{"style":1151},[4985],{"type":37,"value":1159},{"type":32,"tag":1138,"props":4987,"children":4988},{"style":1302},[4989],{"type":37,"value":3864},{"type":32,"tag":1138,"props":4991,"children":4992},{"style":1151},[4993],{"type":37,"value":1676},{"type":32,"tag":1138,"props":4995,"children":4996},{"class":1140,"line":1679},[4997,5001],{"type":32,"tag":1138,"props":4998,"children":4999},{"style":1302},[5000],{"type":37,"value":4482},{"type":32,"tag":1138,"props":5002,"children":5003},{"style":1151},[5004],{"type":37,"value":1340},{"type":32,"tag":1138,"props":5006,"children":5007},{"class":1140,"line":1724},[5008],{"type":32,"tag":1138,"props":5009,"children":5010},{"emptyLinePlaceholder":1494},[5011],{"type":37,"value":1497},{"type":32,"tag":1138,"props":5013,"children":5014},{"class":1140,"line":1753},[5015,5019,5024,5028,5033,5037,5042,5046,5051,5055,5060,5064,5069,5073,5077,5081,5086,5090],{"type":32,"tag":1138,"props":5016,"children":5017},{"style":1580},[5018],{"type":37,"value":1583},{"type":32,"tag":1138,"props":5020,"children":5021},{"style":1401},[5022],{"type":37,"value":5023}," profile",{"type":32,"tag":1138,"props":5025,"children":5026},{"style":1151},[5027],{"type":37,"value":1603},{"type":32,"tag":1138,"props":5029,"children":5030},{"style":1889},[5031],{"type":37,"value":5032}," ref",{"type":32,"tag":1138,"props":5034,"children":5035},{"style":1151},[5036],{"type":37,"value":2886},{"type":32,"tag":1138,"props":5038,"children":5039},{"style":1145},[5040],{"type":37,"value":5041},"Record",{"type":32,"tag":1138,"props":5043,"children":5044},{"style":1151},[5045],{"type":37,"value":2886},{"type":32,"tag":1138,"props":5047,"children":5048},{"style":1308},[5049],{"type":37,"value":5050},"string",{"type":32,"tag":1138,"props":5052,"children":5053},{"style":1151},[5054],{"type":37,"value":1361},{"type":32,"tag":1138,"props":5056,"children":5057},{"style":1308},[5058],{"type":37,"value":5059}," unknown",{"type":32,"tag":1138,"props":5061,"children":5062},{"style":1151},[5063],{"type":37,"value":3394},{"type":32,"tag":1138,"props":5065,"children":5066},{"style":1151},[5067],{"type":37,"value":5068}," |",{"type":32,"tag":1138,"props":5070,"children":5071},{"style":1308},[5072],{"type":37,"value":3874},{"type":32,"tag":1138,"props":5074,"children":5075},{"style":1151},[5076],{"type":37,"value":3394},{"type":32,"tag":1138,"props":5078,"children":5079},{"style":1302},[5080],{"type":37,"value":1928},{"type":32,"tag":1138,"props":5082,"children":5083},{"style":1669},[5084],{"type":37,"value":5085},"null",{"type":32,"tag":1138,"props":5087,"children":5088},{"style":1302},[5089],{"type":37,"value":1938},{"type":32,"tag":1138,"props":5091,"children":5092},{"style":1151},[5093],{"type":37,"value":1340},{"type":32,"tag":1138,"props":5095,"children":5096},{"class":1140,"line":1782},[5097],{"type":32,"tag":1138,"props":5098,"children":5099},{"emptyLinePlaceholder":1494},[5100],{"type":37,"value":1497},{"type":32,"tag":1138,"props":5102,"children":5103},{"class":1140,"line":1795},[5104,5108,5112,5116,5120,5125,5129,5133,5137,5141],{"type":32,"tag":1138,"props":5105,"children":5106},{"style":1889},[5107],{"type":37,"value":4142},{"type":32,"tag":1138,"props":5109,"children":5110},{"style":1302},[5111],{"type":37,"value":1928},{"type":32,"tag":1138,"props":5113,"children":5114},{"style":1145},[5115],{"type":37,"value":4382},{"type":32,"tag":1138,"props":5117,"children":5118},{"style":1151},[5119],{"type":37,"value":1361},{"type":32,"tag":1138,"props":5121,"children":5122},{"style":1580},[5123],{"type":37,"value":5124}," async",{"type":32,"tag":1138,"props":5126,"children":5127},{"style":1302},[5128],{"type":37,"value":972},{"type":32,"tag":1138,"props":5130,"children":5131},{"style":2185},[5132],{"type":37,"value":3851},{"type":32,"tag":1138,"props":5134,"children":5135},{"style":1302},[5136],{"type":37,"value":1938},{"type":32,"tag":1138,"props":5138,"children":5139},{"style":1401},[5140],{"type":37,"value":3084},{"type":32,"tag":1138,"props":5142,"children":5143},{"style":1302},[5144],{"type":37,"value":1608},{"type":32,"tag":1138,"props":5146,"children":5147},{"class":1140,"line":1812},[5148,5152,5156,5160,5164,5168,5173],{"type":32,"tag":1138,"props":5149,"children":5150},{"style":1401},[5151],{"type":37,"value":2055},{"type":32,"tag":1138,"props":5153,"children":5154},{"style":1302},[5155],{"type":37,"value":972},{"type":32,"tag":1138,"props":5157,"children":5158},{"style":1401},[5159],{"type":37,"value":3354},{"type":32,"tag":1138,"props":5161,"children":5162},{"style":1145},[5163],{"type":37,"value":3851},{"type":32,"tag":1138,"props":5165,"children":5166},{"style":1302},[5167],{"type":37,"value":2193},{"type":32,"tag":1138,"props":5169,"children":5170},{"style":1967},[5171],{"type":37,"value":5172},"return",{"type":32,"tag":1138,"props":5174,"children":5175},{"style":1151},[5176],{"type":37,"value":1340},{"type":32,"tag":1138,"props":5178,"children":5179},{"class":1140,"line":1842},[5180,5185],{"type":32,"tag":1138,"props":5181,"children":5182},{"style":1401},[5183],{"type":37,"value":5184},"  try",{"type":32,"tag":1138,"props":5186,"children":5187},{"style":1302},[5188],{"type":37,"value":1608},{"type":32,"tag":1138,"props":5190,"children":5191},{"class":1140,"line":1854},[5192,5197,5201,5205,5209,5214,5218,5222,5226,5230,5234,5238],{"type":32,"tag":1138,"props":5193,"children":5194},{"style":1145},[5195],{"type":37,"value":5196},"    profile",{"type":32,"tag":1138,"props":5198,"children":5199},{"style":1151},[5200],{"type":37,"value":64},{"type":32,"tag":1138,"props":5202,"children":5203},{"style":1296},[5204],{"type":37,"value":3851},{"type":32,"tag":1138,"props":5206,"children":5207},{"style":1151},[5208],{"type":37,"value":1603},{"type":32,"tag":1138,"props":5210,"children":5211},{"style":1967},[5212],{"type":37,"value":5213}," await",{"type":32,"tag":1138,"props":5215,"children":5216},{"style":1889},[5217],{"type":37,"value":2787},{"type":32,"tag":1138,"props":5219,"children":5220},{"style":1302},[5221],{"type":37,"value":1928},{"type":32,"tag":1138,"props":5223,"children":5224},{"style":1145},[5225],{"type":37,"value":3851},{"type":32,"tag":1138,"props":5227,"children":5228},{"style":1151},[5229],{"type":37,"value":64},{"type":32,"tag":1138,"props":5231,"children":5232},{"style":1296},[5233],{"type":37,"value":4459},{"type":32,"tag":1138,"props":5235,"children":5236},{"style":1302},[5237],{"type":37,"value":1938},{"type":32,"tag":1138,"props":5239,"children":5240},{"style":1151},[5241],{"type":37,"value":1340},{"type":32,"tag":1138,"props":5243,"children":5244},{"class":1140,"line":1867},[5245,5250,5255,5259,5264],{"type":32,"tag":1138,"props":5246,"children":5247},{"style":1302},[5248],{"type":37,"value":5249},"  } ",{"type":32,"tag":1138,"props":5251,"children":5252},{"style":1401},[5253],{"type":37,"value":5254},"catch",{"type":32,"tag":1138,"props":5256,"children":5257},{"style":1302},[5258],{"type":37,"value":972},{"type":32,"tag":1138,"props":5260,"children":5261},{"style":1145},[5262],{"type":37,"value":5263},"e",{"type":32,"tag":1138,"props":5265,"children":5266},{"style":1302},[5267],{"type":37,"value":2088},{"type":32,"tag":1138,"props":5269,"children":5270},{"class":1140,"line":1875},[5271,5275,5279,5283,5287,5291,5295],{"type":32,"tag":1138,"props":5272,"children":5273},{"style":1145},[5274],{"type":37,"value":4433},{"type":32,"tag":1138,"props":5276,"children":5277},{"style":1151},[5278],{"type":37,"value":64},{"type":32,"tag":1138,"props":5280,"children":5281},{"style":1889},[5282],{"type":37,"value":4536},{"type":32,"tag":1138,"props":5284,"children":5285},{"style":1302},[5286],{"type":37,"value":1928},{"type":32,"tag":1138,"props":5288,"children":5289},{"style":1145},[5290],{"type":37,"value":5263},{"type":32,"tag":1138,"props":5292,"children":5293},{"style":1302},[5294],{"type":37,"value":1938},{"type":32,"tag":1138,"props":5296,"children":5297},{"style":1151},[5298],{"type":37,"value":1340},{"type":32,"tag":1138,"props":5300,"children":5301},{"class":1140,"line":1904},[5302],{"type":32,"tag":1138,"props":5303,"children":5304},{"style":1302},[5305],{"type":37,"value":2142},{"type":32,"tag":1138,"props":5307,"children":5308},{"class":1140,"line":1945},[5309,5313],{"type":32,"tag":1138,"props":5310,"children":5311},{"style":1302},[5312],{"type":37,"value":4482},{"type":32,"tag":1138,"props":5314,"children":5315},{"style":1151},[5316],{"type":37,"value":1340},{"type":32,"tag":1138,"props":5318,"children":5319},{"class":1140,"line":1953},[5320,5324,5328],{"type":32,"tag":1138,"props":5321,"children":5322},{"style":2883},[5323],{"type":37,"value":3292},{"type":32,"tag":1138,"props":5325,"children":5326},{"style":2889},[5327],{"type":37,"value":2892},{"type":32,"tag":1138,"props":5329,"children":5330},{"style":2883},[5331],{"type":37,"value":2924},{"type":32,"tag":1138,"props":5333,"children":5334},{"class":1140,"line":1963},[5335],{"type":32,"tag":1138,"props":5336,"children":5337},{"emptyLinePlaceholder":1494},[5338],{"type":37,"value":1497},{"type":32,"tag":1138,"props":5340,"children":5341},{"class":1140,"line":1994},[5342,5346,5350],{"type":32,"tag":1138,"props":5343,"children":5344},{"style":2883},[5345],{"type":37,"value":2886},{"type":32,"tag":1138,"props":5347,"children":5348},{"style":2889},[5349],{"type":37,"value":3319},{"type":32,"tag":1138,"props":5351,"children":5352},{"style":2883},[5353],{"type":37,"value":2924},{"type":32,"tag":1138,"props":5355,"children":5356},{"class":1140,"line":2002},[5357,5361,5365,5369,5373,5377,5382,5386,5390,5394,5398,5402,5406,5410],{"type":32,"tag":1138,"props":5358,"children":5359},{"style":2883},[5360],{"type":37,"value":3331},{"type":32,"tag":1138,"props":5362,"children":5363},{"style":2889},[5364],{"type":37,"value":1128},{"type":32,"tag":1138,"props":5366,"children":5367},{"style":1401},[5368],{"type":37,"value":3341},{"type":32,"tag":1138,"props":5370,"children":5371},{"style":1151},[5372],{"type":37,"value":1154},{"type":32,"tag":1138,"props":5374,"children":5375},{"style":1151},[5376],{"type":37,"value":1159},{"type":32,"tag":1138,"props":5378,"children":5379},{"style":1145},[5380],{"type":37,"value":5381},"profile",{"type":32,"tag":1138,"props":5383,"children":5384},{"style":1151},[5385],{"type":37,"value":1159},{"type":32,"tag":1138,"props":5387,"children":5388},{"style":2883},[5389],{"type":37,"value":3394},{"type":32,"tag":1138,"props":5391,"children":5392},{"style":1151},[5393],{"type":37,"value":3959},{"type":32,"tag":1138,"props":5395,"children":5396},{"style":1145},[5397],{"type":37,"value":5023},{"type":32,"tag":1138,"props":5399,"children":5400},{"style":1151},[5401],{"type":37,"value":3977},{"type":32,"tag":1138,"props":5403,"children":5404},{"style":2883},[5405],{"type":37,"value":3292},{"type":32,"tag":1138,"props":5407,"children":5408},{"style":2889},[5409],{"type":37,"value":1128},{"type":32,"tag":1138,"props":5411,"children":5412},{"style":2883},[5413],{"type":37,"value":2924},{"type":32,"tag":1138,"props":5415,"children":5416},{"class":1140,"line":2011},[5417,5421,5425],{"type":32,"tag":1138,"props":5418,"children":5419},{"style":2883},[5420],{"type":37,"value":3292},{"type":32,"tag":1138,"props":5422,"children":5423},{"style":2889},[5424],{"type":37,"value":3319},{"type":32,"tag":1138,"props":5426,"children":5427},{"style":2883},[5428],{"type":37,"value":2924},{"type":32,"tag":33,"props":5430,"children":5431},{},[5432,5437,5439,5445,5447,5453],{"type":32,"tag":218,"props":5433,"children":5435},{"className":5434},[],[5436],{"type":37,"value":4681},{"type":37,"value":5438}," only calls ",{"type":32,"tag":218,"props":5440,"children":5442},{"className":5441},[],[5443],{"type":37,"value":5444},"https://graph.microsoft.com/v1.0/me",{"type":37,"value":5446},". For any other Graph endpoint, use the access token with ",{"type":32,"tag":218,"props":5448,"children":5450},{"className":5449},[],[5451],{"type":37,"value":5452},"fetch",{"type":37,"value":5454}," or the Graph SDK.",{"type":32,"tag":66,"props":5456,"children":5458},{"id":5457},"protecting-routes",[5459],{"type":37,"value":5460},"Protecting routes",{"type":32,"tag":33,"props":5462,"children":5463},{},[5464,5466,5471],{"type":37,"value":5465},"A guard that only checks ",{"type":32,"tag":218,"props":5467,"children":5469},{"className":5468},[],[5470],{"type":37,"value":2623},{"type":37,"value":5472}," breaks redirect sign-ins. When the user comes back from Microsoft, the guard runs before MSAL has processed the response in the URL, finds no accounts, and sends a signed-in user to the home page. Await MSAL's startup steps inside the guard instead.",{"type":32,"tag":33,"props":5474,"children":5475},{},[5476],{"type":32,"tag":549,"props":5477,"children":5478},{},[5479],{"type":32,"tag":218,"props":5480,"children":5482},{"className":5481},[],[5483],{"type":37,"value":5484},"src/router/guards.ts",{"type":32,"tag":1128,"props":5486,"children":5488},{"className":1284,"code":5487,"language":1286,"meta":7,"style":7},"import type { PublicClientApplication } from \"@azure/msal-browser\";\nimport type { Router } from \"vue-router\";\n\nexport function registerGuard(\n  router: Router,\n  instance: PublicClientApplication,\n) {\n  router.beforeEach(async (to) => {\n    if (!to.meta.requiresAuth) return true;\n\n    // Both are safe to call repeatedly; MSAL no-ops after the first run.\n    await instance.initialize();\n    await instance.handleRedirectPromise();\n\n    if (instance.getAllAccounts().length > 0) return true;\n\n    await instance.loginRedirect({\n      scopes: [\"User.Read\"],\n      redirectStartPage: to.fullPath,\n    });\n    return false;\n  });\n}\n",[5489],{"type":32,"tag":218,"props":5490,"children":5491},{"__ignoreMap":7},[5492,5535,5580,5587,5608,5629,5649,5660,5705,5758,5765,5773,5801,5829,5836,5895,5902,5926,5962,5992,6004,6021,6032],{"type":32,"tag":1138,"props":5493,"children":5494},{"class":1140,"line":1141},[5495,5499,5503,5507,5511,5515,5519,5523,5527,5531],{"type":32,"tag":1138,"props":5496,"children":5497},{"style":1296},[5498],{"type":37,"value":1299},{"type":32,"tag":1138,"props":5500,"children":5501},{"style":1401},[5502],{"type":37,"value":1404},{"type":32,"tag":1138,"props":5504,"children":5505},{"style":1302},[5506],{"type":37,"value":1305},{"type":32,"tag":1138,"props":5508,"children":5509},{"style":1308},[5510],{"type":37,"value":907},{"type":32,"tag":1138,"props":5512,"children":5513},{"style":1302},[5514],{"type":37,"value":1316},{"type":32,"tag":1138,"props":5516,"children":5517},{"style":1296},[5518],{"type":37,"value":1321},{"type":32,"tag":1138,"props":5520,"children":5521},{"style":1151},[5522],{"type":37,"value":1326},{"type":32,"tag":1138,"props":5524,"children":5525},{"style":1162},[5526],{"type":37,"value":899},{"type":32,"tag":1138,"props":5528,"children":5529},{"style":1151},[5530],{"type":37,"value":1159},{"type":32,"tag":1138,"props":5532,"children":5533},{"style":1151},[5534],{"type":37,"value":1340},{"type":32,"tag":1138,"props":5536,"children":5537},{"class":1140,"line":392},[5538,5542,5546,5550,5555,5559,5563,5567,5572,5576],{"type":32,"tag":1138,"props":5539,"children":5540},{"style":1296},[5541],{"type":37,"value":1299},{"type":32,"tag":1138,"props":5543,"children":5544},{"style":1401},[5545],{"type":37,"value":1404},{"type":32,"tag":1138,"props":5547,"children":5548},{"style":1302},[5549],{"type":37,"value":1305},{"type":32,"tag":1138,"props":5551,"children":5552},{"style":1308},[5553],{"type":37,"value":5554},"Router",{"type":32,"tag":1138,"props":5556,"children":5557},{"style":1302},[5558],{"type":37,"value":1316},{"type":32,"tag":1138,"props":5560,"children":5561},{"style":1296},[5562],{"type":37,"value":1321},{"type":32,"tag":1138,"props":5564,"children":5565},{"style":1151},[5566],{"type":37,"value":1326},{"type":32,"tag":1138,"props":5568,"children":5569},{"style":1162},[5570],{"type":37,"value":5571},"vue-router",{"type":32,"tag":1138,"props":5573,"children":5574},{"style":1151},[5575],{"type":37,"value":1159},{"type":32,"tag":1138,"props":5577,"children":5578},{"style":1151},[5579],{"type":37,"value":1340},{"type":32,"tag":1138,"props":5581,"children":5582},{"class":1140,"line":1393},[5583],{"type":32,"tag":1138,"props":5584,"children":5585},{"emptyLinePlaceholder":1494},[5586],{"type":37,"value":1497},{"type":32,"tag":1138,"props":5588,"children":5589},{"class":1140,"line":1449},[5590,5595,5599,5604],{"type":32,"tag":1138,"props":5591,"children":5592},{"style":1296},[5593],{"type":37,"value":5594},"export",{"type":32,"tag":1138,"props":5596,"children":5597},{"style":1401},[5598],{"type":37,"value":1886},{"type":32,"tag":1138,"props":5600,"children":5601},{"style":1889},[5602],{"type":37,"value":5603}," registerGuard",{"type":32,"tag":1138,"props":5605,"children":5606},{"style":1302},[5607],{"type":37,"value":4281},{"type":32,"tag":1138,"props":5609,"children":5610},{"class":1140,"line":1490},[5611,5616,5620,5625],{"type":32,"tag":1138,"props":5612,"children":5613},{"style":2185},[5614],{"type":37,"value":5615},"  router",{"type":32,"tag":1138,"props":5617,"children":5618},{"style":1151},[5619],{"type":37,"value":1593},{"type":32,"tag":1138,"props":5621,"children":5622},{"style":1145},[5623],{"type":37,"value":5624}," Router",{"type":32,"tag":1138,"props":5626,"children":5627},{"style":1151},[5628],{"type":37,"value":1676},{"type":32,"tag":1138,"props":5630,"children":5631},{"class":1140,"line":1500},[5632,5636,5640,5645],{"type":32,"tag":1138,"props":5633,"children":5634},{"style":2185},[5635],{"type":37,"value":2168},{"type":32,"tag":1138,"props":5637,"children":5638},{"style":1151},[5639],{"type":37,"value":1593},{"type":32,"tag":1138,"props":5641,"children":5642},{"style":1145},[5643],{"type":37,"value":5644}," PublicClientApplication",{"type":32,"tag":1138,"props":5646,"children":5647},{"style":1151},[5648],{"type":37,"value":1676},{"type":32,"tag":1138,"props":5650,"children":5651},{"class":1140,"line":1534},[5652,5656],{"type":32,"tag":1138,"props":5653,"children":5654},{"style":1302},[5655],{"type":37,"value":1938},{"type":32,"tag":1138,"props":5657,"children":5658},{"style":1302},[5659],{"type":37,"value":1608},{"type":32,"tag":1138,"props":5661,"children":5662},{"class":1140,"line":1568},[5663,5667,5671,5676,5680,5684,5688,5693,5697,5701],{"type":32,"tag":1138,"props":5664,"children":5665},{"style":1145},[5666],{"type":37,"value":5615},{"type":32,"tag":1138,"props":5668,"children":5669},{"style":1151},[5670],{"type":37,"value":64},{"type":32,"tag":1138,"props":5672,"children":5673},{"style":1889},[5674],{"type":37,"value":5675},"beforeEach",{"type":32,"tag":1138,"props":5677,"children":5678},{"style":1302},[5679],{"type":37,"value":1928},{"type":32,"tag":1138,"props":5681,"children":5682},{"style":1580},[5683],{"type":37,"value":1881},{"type":32,"tag":1138,"props":5685,"children":5686},{"style":1302},[5687],{"type":37,"value":972},{"type":32,"tag":1138,"props":5689,"children":5690},{"style":2185},[5691],{"type":37,"value":5692},"to",{"type":32,"tag":1138,"props":5694,"children":5695},{"style":1302},[5696],{"type":37,"value":2193},{"type":32,"tag":1138,"props":5698,"children":5699},{"style":1401},[5700],{"type":37,"value":2198},{"type":32,"tag":1138,"props":5702,"children":5703},{"style":1302},[5704],{"type":37,"value":1608},{"type":32,"tag":1138,"props":5706,"children":5707},{"class":1140,"line":1576},[5708,5712,5716,5720,5724,5728,5732,5736,5741,5745,5749,5754],{"type":32,"tag":1138,"props":5709,"children":5710},{"style":1401},[5711],{"type":37,"value":2211},{"type":32,"tag":1138,"props":5713,"children":5714},{"style":1302},[5715],{"type":37,"value":972},{"type":32,"tag":1138,"props":5717,"children":5718},{"style":1401},[5719],{"type":37,"value":3354},{"type":32,"tag":1138,"props":5721,"children":5722},{"style":1145},[5723],{"type":37,"value":5692},{"type":32,"tag":1138,"props":5725,"children":5726},{"style":1151},[5727],{"type":37,"value":64},{"type":32,"tag":1138,"props":5729,"children":5730},{"style":1145},[5731],{"type":37,"value":1653},{"type":32,"tag":1138,"props":5733,"children":5734},{"style":1151},[5735],{"type":37,"value":64},{"type":32,"tag":1138,"props":5737,"children":5738},{"style":1296},[5739],{"type":37,"value":5740},"requiresAuth",{"type":32,"tag":1138,"props":5742,"children":5743},{"style":1302},[5744],{"type":37,"value":2193},{"type":32,"tag":1138,"props":5746,"children":5747},{"style":1967},[5748],{"type":37,"value":5172},{"type":32,"tag":1138,"props":5750,"children":5751},{"style":1669},[5752],{"type":37,"value":5753}," true",{"type":32,"tag":1138,"props":5755,"children":5756},{"style":1151},[5757],{"type":37,"value":1340},{"type":32,"tag":1138,"props":5759,"children":5760},{"class":1140,"line":1611},[5761],{"type":32,"tag":1138,"props":5762,"children":5763},{"emptyLinePlaceholder":1494},[5764],{"type":37,"value":1497},{"type":32,"tag":1138,"props":5766,"children":5767},{"class":1140,"line":1629},[5768],{"type":32,"tag":1138,"props":5769,"children":5770},{"style":1957},[5771],{"type":37,"value":5772},"    // Both are safe to call repeatedly; MSAL no-ops after the first run.\n",{"type":32,"tag":1138,"props":5774,"children":5775},{"class":1140,"line":1679},[5776,5781,5785,5789,5793,5797],{"type":32,"tag":1138,"props":5777,"children":5778},{"style":1967},[5779],{"type":37,"value":5780},"    await",{"type":32,"tag":1138,"props":5782,"children":5783},{"style":1145},[5784],{"type":37,"value":1915},{"type":32,"tag":1138,"props":5786,"children":5787},{"style":1151},[5788],{"type":37,"value":64},{"type":32,"tag":1138,"props":5790,"children":5791},{"style":1889},[5792],{"type":37,"value":1983},{"type":32,"tag":1138,"props":5794,"children":5795},{"style":1302},[5796],{"type":37,"value":1897},{"type":32,"tag":1138,"props":5798,"children":5799},{"style":1151},[5800],{"type":37,"value":1340},{"type":32,"tag":1138,"props":5802,"children":5803},{"class":1140,"line":1724},[5804,5808,5812,5816,5821,5825],{"type":32,"tag":1138,"props":5805,"children":5806},{"style":1967},[5807],{"type":37,"value":5780},{"type":32,"tag":1138,"props":5809,"children":5810},{"style":1145},[5811],{"type":37,"value":1915},{"type":32,"tag":1138,"props":5813,"children":5814},{"style":1151},[5815],{"type":37,"value":64},{"type":32,"tag":1138,"props":5817,"children":5818},{"style":1889},[5819],{"type":37,"value":5820},"handleRedirectPromise",{"type":32,"tag":1138,"props":5822,"children":5823},{"style":1302},[5824],{"type":37,"value":1897},{"type":32,"tag":1138,"props":5826,"children":5827},{"style":1151},[5828],{"type":37,"value":1340},{"type":32,"tag":1138,"props":5830,"children":5831},{"class":1140,"line":1753},[5832],{"type":32,"tag":1138,"props":5833,"children":5834},{"emptyLinePlaceholder":1494},[5835],{"type":37,"value":1497},{"type":32,"tag":1138,"props":5837,"children":5838},{"class":1140,"line":1782},[5839,5843,5847,5851,5855,5859,5863,5867,5871,5875,5879,5883,5887,5891],{"type":32,"tag":1138,"props":5840,"children":5841},{"style":1401},[5842],{"type":37,"value":2211},{"type":32,"tag":1138,"props":5844,"children":5845},{"style":1302},[5846],{"type":37,"value":972},{"type":32,"tag":1138,"props":5848,"children":5849},{"style":1145},[5850],{"type":37,"value":2817},{"type":32,"tag":1138,"props":5852,"children":5853},{"style":1151},[5854],{"type":37,"value":64},{"type":32,"tag":1138,"props":5856,"children":5857},{"style":1889},[5858],{"type":37,"value":2038},{"type":32,"tag":1138,"props":5860,"children":5861},{"style":1302},[5862],{"type":37,"value":1897},{"type":32,"tag":1138,"props":5864,"children":5865},{"style":1151},[5866],{"type":37,"value":64},{"type":32,"tag":1138,"props":5868,"children":5869},{"style":1296},[5870],{"type":37,"value":2073},{"type":32,"tag":1138,"props":5872,"children":5873},{"style":1401},[5874],{"type":37,"value":2078},{"type":32,"tag":1138,"props":5876,"children":5877},{"style":1669},[5878],{"type":37,"value":2083},{"type":32,"tag":1138,"props":5880,"children":5881},{"style":1302},[5882],{"type":37,"value":2193},{"type":32,"tag":1138,"props":5884,"children":5885},{"style":1967},[5886],{"type":37,"value":5172},{"type":32,"tag":1138,"props":5888,"children":5889},{"style":1669},[5890],{"type":37,"value":5753},{"type":32,"tag":1138,"props":5892,"children":5893},{"style":1151},[5894],{"type":37,"value":1340},{"type":32,"tag":1138,"props":5896,"children":5897},{"class":1140,"line":1795},[5898],{"type":32,"tag":1138,"props":5899,"children":5900},{"emptyLinePlaceholder":1494},[5901],{"type":37,"value":1497},{"type":32,"tag":1138,"props":5903,"children":5904},{"class":1140,"line":1812},[5905,5909,5913,5917,5921],{"type":32,"tag":1138,"props":5906,"children":5907},{"style":1967},[5908],{"type":37,"value":5780},{"type":32,"tag":1138,"props":5910,"children":5911},{"style":1145},[5912],{"type":37,"value":1915},{"type":32,"tag":1138,"props":5914,"children":5915},{"style":1151},[5916],{"type":37,"value":64},{"type":32,"tag":1138,"props":5918,"children":5919},{"style":1889},[5920],{"type":37,"value":3150},{"type":32,"tag":1138,"props":5922,"children":5923},{"style":1302},[5924],{"type":37,"value":5925},"({\n",{"type":32,"tag":1138,"props":5927,"children":5928},{"class":1140,"line":1842},[5929,5934,5938,5942,5946,5950,5954,5958],{"type":32,"tag":1138,"props":5930,"children":5931},{"style":1615},[5932],{"type":37,"value":5933},"      scopes",{"type":32,"tag":1138,"props":5935,"children":5936},{"style":1151},[5937],{"type":37,"value":1593},{"type":32,"tag":1138,"props":5939,"children":5940},{"style":1302},[5941],{"type":37,"value":4324},{"type":32,"tag":1138,"props":5943,"children":5944},{"style":1151},[5945],{"type":37,"value":1159},{"type":32,"tag":1138,"props":5947,"children":5948},{"style":1162},[5949],{"type":37,"value":1112},{"type":32,"tag":1138,"props":5951,"children":5952},{"style":1151},[5953],{"type":37,"value":1159},{"type":32,"tag":1138,"props":5955,"children":5956},{"style":1302},[5957],{"type":37,"value":3864},{"type":32,"tag":1138,"props":5959,"children":5960},{"style":1151},[5961],{"type":37,"value":1676},{"type":32,"tag":1138,"props":5963,"children":5964},{"class":1140,"line":1854},[5965,5970,5974,5979,5983,5988],{"type":32,"tag":1138,"props":5966,"children":5967},{"style":1615},[5968],{"type":37,"value":5969},"      redirectStartPage",{"type":32,"tag":1138,"props":5971,"children":5972},{"style":1151},[5973],{"type":37,"value":1593},{"type":32,"tag":1138,"props":5975,"children":5976},{"style":1145},[5977],{"type":37,"value":5978}," to",{"type":32,"tag":1138,"props":5980,"children":5981},{"style":1151},[5982],{"type":37,"value":64},{"type":32,"tag":1138,"props":5984,"children":5985},{"style":1296},[5986],{"type":37,"value":5987},"fullPath",{"type":32,"tag":1138,"props":5989,"children":5990},{"style":1151},[5991],{"type":37,"value":1676},{"type":32,"tag":1138,"props":5993,"children":5994},{"class":1140,"line":1867},[5995,6000],{"type":32,"tag":1138,"props":5996,"children":5997},{"style":1302},[5998],{"type":37,"value":5999},"    })",{"type":32,"tag":1138,"props":6001,"children":6002},{"style":1151},[6003],{"type":37,"value":1340},{"type":32,"tag":1138,"props":6005,"children":6006},{"class":1140,"line":1875},[6007,6012,6017],{"type":32,"tag":1138,"props":6008,"children":6009},{"style":1967},[6010],{"type":37,"value":6011},"    return",{"type":32,"tag":1138,"props":6013,"children":6014},{"style":1669},[6015],{"type":37,"value":6016}," false",{"type":32,"tag":1138,"props":6018,"children":6019},{"style":1151},[6020],{"type":37,"value":1340},{"type":32,"tag":1138,"props":6022,"children":6023},{"class":1140,"line":1904},[6024,6028],{"type":32,"tag":1138,"props":6025,"children":6026},{"style":1302},[6027],{"type":37,"value":2373},{"type":32,"tag":1138,"props":6029,"children":6030},{"style":1151},[6031],{"type":37,"value":1340},{"type":32,"tag":1138,"props":6033,"children":6034},{"class":1140,"line":1945},[6035],{"type":32,"tag":1138,"props":6036,"children":6037},{"style":1302},[6038],{"type":37,"value":2550},{"type":32,"tag":33,"props":6040,"children":6041},{},[6042,6048,6050,6055],{"type":32,"tag":218,"props":6043,"children":6045},{"className":6044},[],[6046],{"type":37,"value":6047},"redirectStartPage",{"type":37,"value":6049}," sends the user back to the page they asked for. The guard takes the instance as an argument because ",{"type":32,"tag":218,"props":6051,"children":6053},{"className":6052},[],[6054],{"type":37,"value":2711},{"type":37,"value":6056}," only works inside components, not navigation guards.",{"type":32,"tag":33,"props":6058,"children":6059},{},[6060],{"type":37,"value":6061},"Mark the routes that need it.",{"type":32,"tag":33,"props":6063,"children":6064},{},[6065],{"type":32,"tag":549,"props":6066,"children":6067},{},[6068],{"type":32,"tag":218,"props":6069,"children":6071},{"className":6070},[],[6072],{"type":37,"value":6073},"src/router/index.ts",{"type":32,"tag":1128,"props":6075,"children":6077},{"className":1284,"code":6076,"language":1286,"meta":7,"style":7},"import { createRouter, createWebHistory } from \"vue-router\";\nimport Home from \"../views/Home.vue\";\nimport Profile from \"../views/Profile.vue\";\n\nexport default createRouter({\n  history: createWebHistory(),\n  routes: [\n    { path: \"/\", component: Home },\n    { path: \"/profile\", component: Profile, meta: { requiresAuth: true } },\n  ],\n});\n",[6078],{"type":32,"tag":218,"props":6079,"children":6080},{"__ignoreMap":7},[6081,6130,6163,6196,6203,6224,6248,6265,6319,6406,6418],{"type":32,"tag":1138,"props":6082,"children":6083},{"class":1140,"line":1141},[6084,6088,6092,6097,6101,6106,6110,6114,6118,6122,6126],{"type":32,"tag":1138,"props":6085,"children":6086},{"style":1296},[6087],{"type":37,"value":1299},{"type":32,"tag":1138,"props":6089,"children":6090},{"style":1302},[6091],{"type":37,"value":1305},{"type":32,"tag":1138,"props":6093,"children":6094},{"style":1308},[6095],{"type":37,"value":6096},"createRouter",{"type":32,"tag":1138,"props":6098,"children":6099},{"style":1151},[6100],{"type":37,"value":1361},{"type":32,"tag":1138,"props":6102,"children":6103},{"style":1308},[6104],{"type":37,"value":6105}," createWebHistory",{"type":32,"tag":1138,"props":6107,"children":6108},{"style":1302},[6109],{"type":37,"value":1316},{"type":32,"tag":1138,"props":6111,"children":6112},{"style":1296},[6113],{"type":37,"value":1321},{"type":32,"tag":1138,"props":6115,"children":6116},{"style":1151},[6117],{"type":37,"value":1326},{"type":32,"tag":1138,"props":6119,"children":6120},{"style":1162},[6121],{"type":37,"value":5571},{"type":32,"tag":1138,"props":6123,"children":6124},{"style":1151},[6125],{"type":37,"value":1159},{"type":32,"tag":1138,"props":6127,"children":6128},{"style":1151},[6129],{"type":37,"value":1340},{"type":32,"tag":1138,"props":6131,"children":6132},{"class":1140,"line":392},[6133,6137,6142,6146,6150,6155,6159],{"type":32,"tag":1138,"props":6134,"children":6135},{"style":1296},[6136],{"type":37,"value":1299},{"type":32,"tag":1138,"props":6138,"children":6139},{"style":1308},[6140],{"type":37,"value":6141}," Home",{"type":32,"tag":1138,"props":6143,"children":6144},{"style":1296},[6145],{"type":37,"value":1321},{"type":32,"tag":1138,"props":6147,"children":6148},{"style":1151},[6149],{"type":37,"value":1326},{"type":32,"tag":1138,"props":6151,"children":6152},{"style":1162},[6153],{"type":37,"value":6154},"../views/Home.vue",{"type":32,"tag":1138,"props":6156,"children":6157},{"style":1151},[6158],{"type":37,"value":1159},{"type":32,"tag":1138,"props":6160,"children":6161},{"style":1151},[6162],{"type":37,"value":1340},{"type":32,"tag":1138,"props":6164,"children":6165},{"class":1140,"line":1393},[6166,6170,6175,6179,6183,6188,6192],{"type":32,"tag":1138,"props":6167,"children":6168},{"style":1296},[6169],{"type":37,"value":1299},{"type":32,"tag":1138,"props":6171,"children":6172},{"style":1308},[6173],{"type":37,"value":6174}," Profile",{"type":32,"tag":1138,"props":6176,"children":6177},{"style":1296},[6178],{"type":37,"value":1321},{"type":32,"tag":1138,"props":6180,"children":6181},{"style":1151},[6182],{"type":37,"value":1326},{"type":32,"tag":1138,"props":6184,"children":6185},{"style":1162},[6186],{"type":37,"value":6187},"../views/Profile.vue",{"type":32,"tag":1138,"props":6189,"children":6190},{"style":1151},[6191],{"type":37,"value":1159},{"type":32,"tag":1138,"props":6193,"children":6194},{"style":1151},[6195],{"type":37,"value":1340},{"type":32,"tag":1138,"props":6197,"children":6198},{"class":1140,"line":1449},[6199],{"type":32,"tag":1138,"props":6200,"children":6201},{"emptyLinePlaceholder":1494},[6202],{"type":37,"value":1497},{"type":32,"tag":1138,"props":6204,"children":6205},{"class":1140,"line":1490},[6206,6210,6215,6220],{"type":32,"tag":1138,"props":6207,"children":6208},{"style":1296},[6209],{"type":37,"value":5594},{"type":32,"tag":1138,"props":6211,"children":6212},{"style":1296},[6213],{"type":37,"value":6214}," default",{"type":32,"tag":1138,"props":6216,"children":6217},{"style":1889},[6218],{"type":37,"value":6219}," createRouter",{"type":32,"tag":1138,"props":6221,"children":6222},{"style":1302},[6223],{"type":37,"value":5925},{"type":32,"tag":1138,"props":6225,"children":6226},{"class":1140,"line":1500},[6227,6232,6236,6240,6244],{"type":32,"tag":1138,"props":6228,"children":6229},{"style":1615},[6230],{"type":37,"value":6231},"  history",{"type":32,"tag":1138,"props":6233,"children":6234},{"style":1151},[6235],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6237,"children":6238},{"style":1889},[6239],{"type":37,"value":6105},{"type":32,"tag":1138,"props":6241,"children":6242},{"style":1302},[6243],{"type":37,"value":1897},{"type":32,"tag":1138,"props":6245,"children":6246},{"style":1151},[6247],{"type":37,"value":1676},{"type":32,"tag":1138,"props":6249,"children":6250},{"class":1140,"line":1534},[6251,6256,6260],{"type":32,"tag":1138,"props":6252,"children":6253},{"style":1615},[6254],{"type":37,"value":6255},"  routes",{"type":32,"tag":1138,"props":6257,"children":6258},{"style":1151},[6259],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6261,"children":6262},{"style":1302},[6263],{"type":37,"value":6264}," [\n",{"type":32,"tag":1138,"props":6266,"children":6267},{"class":1140,"line":1568},[6268,6273,6278,6282,6286,6290,6294,6298,6303,6307,6311,6315],{"type":32,"tag":1138,"props":6269,"children":6270},{"style":1302},[6271],{"type":37,"value":6272},"    {",{"type":32,"tag":1138,"props":6274,"children":6275},{"style":1615},[6276],{"type":37,"value":6277}," path",{"type":32,"tag":1138,"props":6279,"children":6280},{"style":1151},[6281],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6283,"children":6284},{"style":1151},[6285],{"type":37,"value":1326},{"type":32,"tag":1138,"props":6287,"children":6288},{"style":1162},[6289],{"type":37,"value":3226},{"type":32,"tag":1138,"props":6291,"children":6292},{"style":1151},[6293],{"type":37,"value":1159},{"type":32,"tag":1138,"props":6295,"children":6296},{"style":1151},[6297],{"type":37,"value":1361},{"type":32,"tag":1138,"props":6299,"children":6300},{"style":1615},[6301],{"type":37,"value":6302}," component",{"type":32,"tag":1138,"props":6304,"children":6305},{"style":1151},[6306],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6308,"children":6309},{"style":1296},[6310],{"type":37,"value":6141},{"type":32,"tag":1138,"props":6312,"children":6313},{"style":1302},[6314],{"type":37,"value":1316},{"type":32,"tag":1138,"props":6316,"children":6317},{"style":1151},[6318],{"type":37,"value":1676},{"type":32,"tag":1138,"props":6320,"children":6321},{"class":1140,"line":1576},[6322,6326,6330,6334,6338,6343,6347,6351,6355,6359,6363,6367,6372,6376,6380,6386,6390,6394,6398,6402],{"type":32,"tag":1138,"props":6323,"children":6324},{"style":1302},[6325],{"type":37,"value":6272},{"type":32,"tag":1138,"props":6327,"children":6328},{"style":1615},[6329],{"type":37,"value":6277},{"type":32,"tag":1138,"props":6331,"children":6332},{"style":1151},[6333],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6335,"children":6336},{"style":1151},[6337],{"type":37,"value":1326},{"type":32,"tag":1138,"props":6339,"children":6340},{"style":1162},[6341],{"type":37,"value":6342},"/profile",{"type":32,"tag":1138,"props":6344,"children":6345},{"style":1151},[6346],{"type":37,"value":1159},{"type":32,"tag":1138,"props":6348,"children":6349},{"style":1151},[6350],{"type":37,"value":1361},{"type":32,"tag":1138,"props":6352,"children":6353},{"style":1615},[6354],{"type":37,"value":6302},{"type":32,"tag":1138,"props":6356,"children":6357},{"style":1151},[6358],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6360,"children":6361},{"style":1296},[6362],{"type":37,"value":6174},{"type":32,"tag":1138,"props":6364,"children":6365},{"style":1151},[6366],{"type":37,"value":1361},{"type":32,"tag":1138,"props":6368,"children":6369},{"style":1615},[6370],{"type":37,"value":6371}," meta",{"type":32,"tag":1138,"props":6373,"children":6374},{"style":1151},[6375],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6377,"children":6378},{"style":1302},[6379],{"type":37,"value":2748},{"type":32,"tag":1138,"props":6381,"children":6383},{"style":6382},"--shiki-default:#41A6B5",[6384],{"type":37,"value":6385}," requiresAuth",{"type":32,"tag":1138,"props":6387,"children":6388},{"style":1151},[6389],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6391,"children":6392},{"style":1669},[6393],{"type":37,"value":5753},{"type":32,"tag":1138,"props":6395,"children":6396},{"style":1302},[6397],{"type":37,"value":1316},{"type":32,"tag":1138,"props":6399,"children":6400},{"style":1302},[6401],{"type":37,"value":1316},{"type":32,"tag":1138,"props":6403,"children":6404},{"style":1151},[6405],{"type":37,"value":1676},{"type":32,"tag":1138,"props":6407,"children":6408},{"class":1140,"line":1611},[6409,6414],{"type":32,"tag":1138,"props":6410,"children":6411},{"style":1302},[6412],{"type":37,"value":6413},"  ]",{"type":32,"tag":1138,"props":6415,"children":6416},{"style":1151},[6417],{"type":37,"value":1676},{"type":32,"tag":1138,"props":6419,"children":6420},{"class":1140,"line":1629},[6421,6425],{"type":32,"tag":1138,"props":6422,"children":6423},{"style":1302},[6424],{"type":37,"value":4482},{"type":32,"tag":1138,"props":6426,"children":6427},{"style":1151},[6428],{"type":37,"value":1340},{"type":32,"tag":33,"props":6430,"children":6431},{},[6432,6434,6440,6442,6448,6450,6455,6457,6463],{"type":37,"value":6433},"Then call ",{"type":32,"tag":218,"props":6435,"children":6437},{"className":6436},[],[6438],{"type":37,"value":6439},"registerGuard(router, instance)",{"type":37,"value":6441}," in ",{"type":32,"tag":218,"props":6443,"children":6445},{"className":6444},[],[6446],{"type":37,"value":6447},"bootstrap()",{"type":37,"value":6449},", after ",{"type":32,"tag":218,"props":6451,"children":6453},{"className":6452},[],[6454],{"type":37,"value":2615},{"type":37,"value":6456}," and before ",{"type":32,"tag":218,"props":6458,"children":6460},{"className":6459},[],[6461],{"type":37,"value":6462},"app.use(router)",{"type":37,"value":6464},". Installing the router starts the first navigation, so a guard registered later misses the first page load.",{"type":32,"tag":66,"props":6466,"children":6468},{"id":6467},"nuxt",[6469],{"type":37,"value":15},{"type":32,"tag":33,"props":6471,"children":6472},{},[6473,6478,6480,6486,6487,6492,6494,6501],{"type":32,"tag":218,"props":6474,"children":6476},{"className":6475},[],[6477],{"type":37,"value":899},{"type":37,"value":6479}," needs ",{"type":32,"tag":218,"props":6481,"children":6483},{"className":6482},[],[6484],{"type":37,"value":6485},"window",{"type":37,"value":2833},{"type":32,"tag":218,"props":6488,"children":6490},{"className":6489},[],[6491],{"type":37,"value":1831},{"type":37,"value":6493},", which don't exist during server-side rendering. The ",{"type":32,"tag":55,"props":6495,"children":6498},{"href":6496,"rel":6497},"https://github.com/DulanDev/vue3-msal/tree/main/samples/sample-with-nuxt",[59],[6499],{"type":37,"value":6500},"Nuxt sample",{"type":37,"value":6502}," splits the setup into a client plugin and a server plugin, so the composables work on both sides.",{"type":32,"tag":33,"props":6504,"children":6505},{},[6506,6508,6514],{"type":37,"value":6507},"The client plugin is the same setup as ",{"type":32,"tag":218,"props":6509,"children":6511},{"className":6510},[],[6512],{"type":37,"value":6513},"main.ts",{"type":37,"value":64},{"type":32,"tag":33,"props":6516,"children":6517},{},[6518],{"type":32,"tag":549,"props":6519,"children":6520},{},[6521],{"type":32,"tag":218,"props":6522,"children":6524},{"className":6523},[],[6525],{"type":37,"value":6526},"app/plugins/msal.client.ts",{"type":32,"tag":1128,"props":6528,"children":6530},{"className":1284,"code":6529,"language":1286,"meta":7,"style":7},"import { msalPlugin, msalInstance } from \"vue3-msal-plugin\";\nimport type { AuthenticationResult, Configuration } from \"@azure/msal-browser\";\nimport { EventType } from \"@azure/msal-browser\";\n\nexport default defineNuxtPlugin(async (nuxtApp) => {\n  const config = useRuntimeConfig();\n\n  const msalConfig: Configuration = {\n    auth: {\n      clientId: String(config.public.clientId),\n      authority: String(config.public.authority),\n      redirectUri: String(config.public.redirectUri),\n      postLogoutRedirectUri: String(config.public.postLogoutRedirectUri),\n    },\n    cache: { cacheLocation: \"localStorage\" },\n  };\n\n  const instance = msalInstance(msalConfig);\n  await instance.initialize();\n\n  const accounts = instance.getAllAccounts();\n  if (accounts[0]) instance.setActiveAccount(accounts[0]);\n\n  instance.addEventCallback((event) => {\n    if (event.eventType === EventType.LOGIN_SUCCESS && event.payload) {\n      const payload = event.payload as AuthenticationResult;\n      instance.setActiveAccount(payload.account);\n    }\n  });\n\n  nuxtApp.vueApp.use(msalPlugin, instance);\n});\n",[6531],{"type":32,"tag":218,"props":6532,"children":6533},{"__ignoreMap":7},[6534,6581,6633,6672,6679,6724,6753,6760,6787,6803,6855,6904,6953,7002,7014,7059,7070,7077,7112,7139,7146,7181,7245,7252,7287,7346,7385,7424,7431,7442,7449,7498],{"type":32,"tag":1138,"props":6535,"children":6536},{"class":1140,"line":1141},[6537,6541,6545,6549,6553,6557,6561,6565,6569,6573,6577],{"type":32,"tag":1138,"props":6538,"children":6539},{"style":1296},[6540],{"type":37,"value":1299},{"type":32,"tag":1138,"props":6542,"children":6543},{"style":1302},[6544],{"type":37,"value":1305},{"type":32,"tag":1138,"props":6546,"children":6547},{"style":1308},[6548],{"type":37,"value":1356},{"type":32,"tag":1138,"props":6550,"children":6551},{"style":1151},[6552],{"type":37,"value":1361},{"type":32,"tag":1138,"props":6554,"children":6555},{"style":1308},[6556],{"type":37,"value":1366},{"type":32,"tag":1138,"props":6558,"children":6559},{"style":1302},[6560],{"type":37,"value":1316},{"type":32,"tag":1138,"props":6562,"children":6563},{"style":1296},[6564],{"type":37,"value":1321},{"type":32,"tag":1138,"props":6566,"children":6567},{"style":1151},[6568],{"type":37,"value":1326},{"type":32,"tag":1138,"props":6570,"children":6571},{"style":1162},[6572],{"type":37,"value":925},{"type":32,"tag":1138,"props":6574,"children":6575},{"style":1151},[6576],{"type":37,"value":1159},{"type":32,"tag":1138,"props":6578,"children":6579},{"style":1151},[6580],{"type":37,"value":1340},{"type":32,"tag":1138,"props":6582,"children":6583},{"class":1140,"line":392},[6584,6588,6592,6596,6601,6605,6609,6613,6617,6621,6625,6629],{"type":32,"tag":1138,"props":6585,"children":6586},{"style":1296},[6587],{"type":37,"value":1299},{"type":32,"tag":1138,"props":6589,"children":6590},{"style":1401},[6591],{"type":37,"value":1404},{"type":32,"tag":1138,"props":6593,"children":6594},{"style":1302},[6595],{"type":37,"value":1305},{"type":32,"tag":1138,"props":6597,"children":6598},{"style":1308},[6599],{"type":37,"value":6600},"AuthenticationResult",{"type":32,"tag":1138,"props":6602,"children":6603},{"style":1151},[6604],{"type":37,"value":1361},{"type":32,"tag":1138,"props":6606,"children":6607},{"style":1308},[6608],{"type":37,"value":1598},{"type":32,"tag":1138,"props":6610,"children":6611},{"style":1302},[6612],{"type":37,"value":1316},{"type":32,"tag":1138,"props":6614,"children":6615},{"style":1296},[6616],{"type":37,"value":1321},{"type":32,"tag":1138,"props":6618,"children":6619},{"style":1151},[6620],{"type":37,"value":1326},{"type":32,"tag":1138,"props":6622,"children":6623},{"style":1162},[6624],{"type":37,"value":899},{"type":32,"tag":1138,"props":6626,"children":6627},{"style":1151},[6628],{"type":37,"value":1159},{"type":32,"tag":1138,"props":6630,"children":6631},{"style":1151},[6632],{"type":37,"value":1340},{"type":32,"tag":1138,"props":6634,"children":6635},{"class":1140,"line":1393},[6636,6640,6644,6648,6652,6656,6660,6664,6668],{"type":32,"tag":1138,"props":6637,"children":6638},{"style":1296},[6639],{"type":37,"value":1299},{"type":32,"tag":1138,"props":6641,"children":6642},{"style":1302},[6643],{"type":37,"value":1305},{"type":32,"tag":1138,"props":6645,"children":6646},{"style":1308},[6647],{"type":37,"value":1463},{"type":32,"tag":1138,"props":6649,"children":6650},{"style":1302},[6651],{"type":37,"value":1316},{"type":32,"tag":1138,"props":6653,"children":6654},{"style":1296},[6655],{"type":37,"value":1321},{"type":32,"tag":1138,"props":6657,"children":6658},{"style":1151},[6659],{"type":37,"value":1326},{"type":32,"tag":1138,"props":6661,"children":6662},{"style":1162},[6663],{"type":37,"value":899},{"type":32,"tag":1138,"props":6665,"children":6666},{"style":1151},[6667],{"type":37,"value":1159},{"type":32,"tag":1138,"props":6669,"children":6670},{"style":1151},[6671],{"type":37,"value":1340},{"type":32,"tag":1138,"props":6673,"children":6674},{"class":1140,"line":1449},[6675],{"type":32,"tag":1138,"props":6676,"children":6677},{"emptyLinePlaceholder":1494},[6678],{"type":37,"value":1497},{"type":32,"tag":1138,"props":6680,"children":6681},{"class":1140,"line":1490},[6682,6686,6690,6695,6699,6703,6707,6712,6716,6720],{"type":32,"tag":1138,"props":6683,"children":6684},{"style":1296},[6685],{"type":37,"value":5594},{"type":32,"tag":1138,"props":6687,"children":6688},{"style":1296},[6689],{"type":37,"value":6214},{"type":32,"tag":1138,"props":6691,"children":6692},{"style":1889},[6693],{"type":37,"value":6694}," defineNuxtPlugin",{"type":32,"tag":1138,"props":6696,"children":6697},{"style":1302},[6698],{"type":37,"value":1928},{"type":32,"tag":1138,"props":6700,"children":6701},{"style":1580},[6702],{"type":37,"value":1881},{"type":32,"tag":1138,"props":6704,"children":6705},{"style":1302},[6706],{"type":37,"value":972},{"type":32,"tag":1138,"props":6708,"children":6709},{"style":2185},[6710],{"type":37,"value":6711},"nuxtApp",{"type":32,"tag":1138,"props":6713,"children":6714},{"style":1302},[6715],{"type":37,"value":1938},{"type":32,"tag":1138,"props":6717,"children":6718},{"style":1401},[6719],{"type":37,"value":3084},{"type":32,"tag":1138,"props":6721,"children":6722},{"style":1302},[6723],{"type":37,"value":1608},{"type":32,"tag":1138,"props":6725,"children":6726},{"class":1140,"line":1500},[6727,6731,6736,6740,6745,6749],{"type":32,"tag":1138,"props":6728,"children":6729},{"style":1580},[6730],{"type":37,"value":1910},{"type":32,"tag":1138,"props":6732,"children":6733},{"style":1401},[6734],{"type":37,"value":6735}," config",{"type":32,"tag":1138,"props":6737,"children":6738},{"style":1151},[6739],{"type":37,"value":1603},{"type":32,"tag":1138,"props":6741,"children":6742},{"style":1889},[6743],{"type":37,"value":6744}," useRuntimeConfig",{"type":32,"tag":1138,"props":6746,"children":6747},{"style":1302},[6748],{"type":37,"value":1897},{"type":32,"tag":1138,"props":6750,"children":6751},{"style":1151},[6752],{"type":37,"value":1340},{"type":32,"tag":1138,"props":6754,"children":6755},{"class":1140,"line":1534},[6756],{"type":32,"tag":1138,"props":6757,"children":6758},{"emptyLinePlaceholder":1494},[6759],{"type":37,"value":1497},{"type":32,"tag":1138,"props":6761,"children":6762},{"class":1140,"line":1568},[6763,6767,6771,6775,6779,6783],{"type":32,"tag":1138,"props":6764,"children":6765},{"style":1580},[6766],{"type":37,"value":1910},{"type":32,"tag":1138,"props":6768,"children":6769},{"style":1401},[6770],{"type":37,"value":1588},{"type":32,"tag":1138,"props":6772,"children":6773},{"style":1151},[6774],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6776,"children":6777},{"style":1145},[6778],{"type":37,"value":1598},{"type":32,"tag":1138,"props":6780,"children":6781},{"style":1151},[6782],{"type":37,"value":1603},{"type":32,"tag":1138,"props":6784,"children":6785},{"style":1302},[6786],{"type":37,"value":1608},{"type":32,"tag":1138,"props":6788,"children":6789},{"class":1140,"line":1576},[6790,6795,6799],{"type":32,"tag":1138,"props":6791,"children":6792},{"style":1615},[6793],{"type":37,"value":6794},"    auth",{"type":32,"tag":1138,"props":6796,"children":6797},{"style":1151},[6798],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6800,"children":6801},{"style":1302},[6802],{"type":37,"value":1608},{"type":32,"tag":1138,"props":6804,"children":6805},{"class":1140,"line":1611},[6806,6811,6815,6820,6824,6829,6833,6838,6842,6847,6851],{"type":32,"tag":1138,"props":6807,"children":6808},{"style":1615},[6809],{"type":37,"value":6810},"      clientId",{"type":32,"tag":1138,"props":6812,"children":6813},{"style":1151},[6814],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6816,"children":6817},{"style":1889},[6818],{"type":37,"value":6819}," String",{"type":32,"tag":1138,"props":6821,"children":6822},{"style":1302},[6823],{"type":37,"value":1928},{"type":32,"tag":1138,"props":6825,"children":6826},{"style":1145},[6827],{"type":37,"value":6828},"config",{"type":32,"tag":1138,"props":6830,"children":6831},{"style":1151},[6832],{"type":37,"value":64},{"type":32,"tag":1138,"props":6834,"children":6835},{"style":1145},[6836],{"type":37,"value":6837},"public",{"type":32,"tag":1138,"props":6839,"children":6840},{"style":1151},[6841],{"type":37,"value":64},{"type":32,"tag":1138,"props":6843,"children":6844},{"style":1296},[6845],{"type":37,"value":6846},"clientId",{"type":32,"tag":1138,"props":6848,"children":6849},{"style":1302},[6850],{"type":37,"value":1938},{"type":32,"tag":1138,"props":6852,"children":6853},{"style":1151},[6854],{"type":37,"value":1676},{"type":32,"tag":1138,"props":6856,"children":6857},{"class":1140,"line":1629},[6858,6863,6867,6871,6875,6879,6883,6887,6891,6896,6900],{"type":32,"tag":1138,"props":6859,"children":6860},{"style":1615},[6861],{"type":37,"value":6862},"      authority",{"type":32,"tag":1138,"props":6864,"children":6865},{"style":1151},[6866],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6868,"children":6869},{"style":1889},[6870],{"type":37,"value":6819},{"type":32,"tag":1138,"props":6872,"children":6873},{"style":1302},[6874],{"type":37,"value":1928},{"type":32,"tag":1138,"props":6876,"children":6877},{"style":1145},[6878],{"type":37,"value":6828},{"type":32,"tag":1138,"props":6880,"children":6881},{"style":1151},[6882],{"type":37,"value":64},{"type":32,"tag":1138,"props":6884,"children":6885},{"style":1145},[6886],{"type":37,"value":6837},{"type":32,"tag":1138,"props":6888,"children":6889},{"style":1151},[6890],{"type":37,"value":64},{"type":32,"tag":1138,"props":6892,"children":6893},{"style":1296},[6894],{"type":37,"value":6895},"authority",{"type":32,"tag":1138,"props":6897,"children":6898},{"style":1302},[6899],{"type":37,"value":1938},{"type":32,"tag":1138,"props":6901,"children":6902},{"style":1151},[6903],{"type":37,"value":1676},{"type":32,"tag":1138,"props":6905,"children":6906},{"class":1140,"line":1679},[6907,6912,6916,6920,6924,6928,6932,6936,6940,6945,6949],{"type":32,"tag":1138,"props":6908,"children":6909},{"style":1615},[6910],{"type":37,"value":6911},"      redirectUri",{"type":32,"tag":1138,"props":6913,"children":6914},{"style":1151},[6915],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6917,"children":6918},{"style":1889},[6919],{"type":37,"value":6819},{"type":32,"tag":1138,"props":6921,"children":6922},{"style":1302},[6923],{"type":37,"value":1928},{"type":32,"tag":1138,"props":6925,"children":6926},{"style":1145},[6927],{"type":37,"value":6828},{"type":32,"tag":1138,"props":6929,"children":6930},{"style":1151},[6931],{"type":37,"value":64},{"type":32,"tag":1138,"props":6933,"children":6934},{"style":1145},[6935],{"type":37,"value":6837},{"type":32,"tag":1138,"props":6937,"children":6938},{"style":1151},[6939],{"type":37,"value":64},{"type":32,"tag":1138,"props":6941,"children":6942},{"style":1296},[6943],{"type":37,"value":6944},"redirectUri",{"type":32,"tag":1138,"props":6946,"children":6947},{"style":1302},[6948],{"type":37,"value":1938},{"type":32,"tag":1138,"props":6950,"children":6951},{"style":1151},[6952],{"type":37,"value":1676},{"type":32,"tag":1138,"props":6954,"children":6955},{"class":1140,"line":1724},[6956,6961,6965,6969,6973,6977,6981,6985,6989,6994,6998],{"type":32,"tag":1138,"props":6957,"children":6958},{"style":1615},[6959],{"type":37,"value":6960},"      postLogoutRedirectUri",{"type":32,"tag":1138,"props":6962,"children":6963},{"style":1151},[6964],{"type":37,"value":1593},{"type":32,"tag":1138,"props":6966,"children":6967},{"style":1889},[6968],{"type":37,"value":6819},{"type":32,"tag":1138,"props":6970,"children":6971},{"style":1302},[6972],{"type":37,"value":1928},{"type":32,"tag":1138,"props":6974,"children":6975},{"style":1145},[6976],{"type":37,"value":6828},{"type":32,"tag":1138,"props":6978,"children":6979},{"style":1151},[6980],{"type":37,"value":64},{"type":32,"tag":1138,"props":6982,"children":6983},{"style":1145},[6984],{"type":37,"value":6837},{"type":32,"tag":1138,"props":6986,"children":6987},{"style":1151},[6988],{"type":37,"value":64},{"type":32,"tag":1138,"props":6990,"children":6991},{"style":1296},[6992],{"type":37,"value":6993},"postLogoutRedirectUri",{"type":32,"tag":1138,"props":6995,"children":6996},{"style":1302},[6997],{"type":37,"value":1938},{"type":32,"tag":1138,"props":6999,"children":7000},{"style":1151},[7001],{"type":37,"value":1676},{"type":32,"tag":1138,"props":7003,"children":7004},{"class":1140,"line":1753},[7005,7010],{"type":32,"tag":1138,"props":7006,"children":7007},{"style":1302},[7008],{"type":37,"value":7009},"    }",{"type":32,"tag":1138,"props":7011,"children":7012},{"style":1151},[7013],{"type":37,"value":1676},{"type":32,"tag":1138,"props":7015,"children":7016},{"class":1140,"line":1782},[7017,7022,7026,7030,7035,7039,7043,7047,7051,7055],{"type":32,"tag":1138,"props":7018,"children":7019},{"style":1615},[7020],{"type":37,"value":7021},"    cache",{"type":32,"tag":1138,"props":7023,"children":7024},{"style":1151},[7025],{"type":37,"value":1593},{"type":32,"tag":1138,"props":7027,"children":7028},{"style":1302},[7029],{"type":37,"value":1305},{"type":32,"tag":1138,"props":7031,"children":7032},{"style":1615},[7033],{"type":37,"value":7034},"cacheLocation",{"type":32,"tag":1138,"props":7036,"children":7037},{"style":1151},[7038],{"type":37,"value":1593},{"type":32,"tag":1138,"props":7040,"children":7041},{"style":1151},[7042],{"type":37,"value":1326},{"type":32,"tag":1138,"props":7044,"children":7045},{"style":1162},[7046],{"type":37,"value":1831},{"type":32,"tag":1138,"props":7048,"children":7049},{"style":1151},[7050],{"type":37,"value":1159},{"type":32,"tag":1138,"props":7052,"children":7053},{"style":1302},[7054],{"type":37,"value":1316},{"type":32,"tag":1138,"props":7056,"children":7057},{"style":1151},[7058],{"type":37,"value":1676},{"type":32,"tag":1138,"props":7060,"children":7061},{"class":1140,"line":1795},[7062,7066],{"type":32,"tag":1138,"props":7063,"children":7064},{"style":1302},[7065],{"type":37,"value":1788},{"type":32,"tag":1138,"props":7067,"children":7068},{"style":1151},[7069],{"type":37,"value":1340},{"type":32,"tag":1138,"props":7071,"children":7072},{"class":1140,"line":1812},[7073],{"type":32,"tag":1138,"props":7074,"children":7075},{"emptyLinePlaceholder":1494},[7076],{"type":37,"value":1497},{"type":32,"tag":1138,"props":7078,"children":7079},{"class":1140,"line":1842},[7080,7084,7088,7092,7096,7100,7104,7108],{"type":32,"tag":1138,"props":7081,"children":7082},{"style":1580},[7083],{"type":37,"value":1910},{"type":32,"tag":1138,"props":7085,"children":7086},{"style":1401},[7087],{"type":37,"value":1915},{"type":32,"tag":1138,"props":7089,"children":7090},{"style":1151},[7091],{"type":37,"value":1603},{"type":32,"tag":1138,"props":7093,"children":7094},{"style":1889},[7095],{"type":37,"value":1366},{"type":32,"tag":1138,"props":7097,"children":7098},{"style":1302},[7099],{"type":37,"value":1928},{"type":32,"tag":1138,"props":7101,"children":7102},{"style":1145},[7103],{"type":37,"value":1933},{"type":32,"tag":1138,"props":7105,"children":7106},{"style":1302},[7107],{"type":37,"value":1938},{"type":32,"tag":1138,"props":7109,"children":7110},{"style":1151},[7111],{"type":37,"value":1340},{"type":32,"tag":1138,"props":7113,"children":7114},{"class":1140,"line":1854},[7115,7119,7123,7127,7131,7135],{"type":32,"tag":1138,"props":7116,"children":7117},{"style":1967},[7118],{"type":37,"value":1970},{"type":32,"tag":1138,"props":7120,"children":7121},{"style":1145},[7122],{"type":37,"value":1915},{"type":32,"tag":1138,"props":7124,"children":7125},{"style":1151},[7126],{"type":37,"value":64},{"type":32,"tag":1138,"props":7128,"children":7129},{"style":1889},[7130],{"type":37,"value":1983},{"type":32,"tag":1138,"props":7132,"children":7133},{"style":1302},[7134],{"type":37,"value":1897},{"type":32,"tag":1138,"props":7136,"children":7137},{"style":1151},[7138],{"type":37,"value":1340},{"type":32,"tag":1138,"props":7140,"children":7141},{"class":1140,"line":1867},[7142],{"type":32,"tag":1138,"props":7143,"children":7144},{"emptyLinePlaceholder":1494},[7145],{"type":37,"value":1497},{"type":32,"tag":1138,"props":7147,"children":7148},{"class":1140,"line":1875},[7149,7153,7157,7161,7165,7169,7173,7177],{"type":32,"tag":1138,"props":7150,"children":7151},{"style":1580},[7152],{"type":37,"value":1910},{"type":32,"tag":1138,"props":7154,"children":7155},{"style":1401},[7156],{"type":37,"value":2021},{"type":32,"tag":1138,"props":7158,"children":7159},{"style":1151},[7160],{"type":37,"value":1603},{"type":32,"tag":1138,"props":7162,"children":7163},{"style":1145},[7164],{"type":37,"value":1915},{"type":32,"tag":1138,"props":7166,"children":7167},{"style":1151},[7168],{"type":37,"value":64},{"type":32,"tag":1138,"props":7170,"children":7171},{"style":1889},[7172],{"type":37,"value":2038},{"type":32,"tag":1138,"props":7174,"children":7175},{"style":1302},[7176],{"type":37,"value":1897},{"type":32,"tag":1138,"props":7178,"children":7179},{"style":1151},[7180],{"type":37,"value":1340},{"type":32,"tag":1138,"props":7182,"children":7183},{"class":1140,"line":1904},[7184,7188,7192,7196,7200,7204,7209,7213,7217,7221,7225,7229,7233,7237,7241],{"type":32,"tag":1138,"props":7185,"children":7186},{"style":1401},[7187],{"type":37,"value":2055},{"type":32,"tag":1138,"props":7189,"children":7190},{"style":1302},[7191],{"type":37,"value":972},{"type":32,"tag":1138,"props":7193,"children":7194},{"style":1145},[7195],{"type":37,"value":2064},{"type":32,"tag":1138,"props":7197,"children":7198},{"style":1302},[7199],{"type":37,"value":2119},{"type":32,"tag":1138,"props":7201,"children":7202},{"style":1669},[7203],{"type":37,"value":2124},{"type":32,"tag":1138,"props":7205,"children":7206},{"style":1302},[7207],{"type":37,"value":7208},"]) ",{"type":32,"tag":1138,"props":7210,"children":7211},{"style":1145},[7212],{"type":37,"value":2817},{"type":32,"tag":1138,"props":7214,"children":7215},{"style":1151},[7216],{"type":37,"value":64},{"type":32,"tag":1138,"props":7218,"children":7219},{"style":1889},[7220],{"type":37,"value":2106},{"type":32,"tag":1138,"props":7222,"children":7223},{"style":1302},[7224],{"type":37,"value":1928},{"type":32,"tag":1138,"props":7226,"children":7227},{"style":1145},[7228],{"type":37,"value":2064},{"type":32,"tag":1138,"props":7230,"children":7231},{"style":1302},[7232],{"type":37,"value":2119},{"type":32,"tag":1138,"props":7234,"children":7235},{"style":1669},[7236],{"type":37,"value":2124},{"type":32,"tag":1138,"props":7238,"children":7239},{"style":1302},[7240],{"type":37,"value":2129},{"type":32,"tag":1138,"props":7242,"children":7243},{"style":1151},[7244],{"type":37,"value":1340},{"type":32,"tag":1138,"props":7246,"children":7247},{"class":1140,"line":1945},[7248],{"type":32,"tag":1138,"props":7249,"children":7250},{"emptyLinePlaceholder":1494},[7251],{"type":37,"value":1497},{"type":32,"tag":1138,"props":7253,"children":7254},{"class":1140,"line":1953},[7255,7259,7263,7267,7271,7275,7279,7283],{"type":32,"tag":1138,"props":7256,"children":7257},{"style":1145},[7258],{"type":37,"value":2168},{"type":32,"tag":1138,"props":7260,"children":7261},{"style":1151},[7262],{"type":37,"value":64},{"type":32,"tag":1138,"props":7264,"children":7265},{"style":1889},[7266],{"type":37,"value":2177},{"type":32,"tag":1138,"props":7268,"children":7269},{"style":1302},[7270],{"type":37,"value":2182},{"type":32,"tag":1138,"props":7272,"children":7273},{"style":2185},[7274],{"type":37,"value":2188},{"type":32,"tag":1138,"props":7276,"children":7277},{"style":1302},[7278],{"type":37,"value":2193},{"type":32,"tag":1138,"props":7280,"children":7281},{"style":1401},[7282],{"type":37,"value":2198},{"type":32,"tag":1138,"props":7284,"children":7285},{"style":1302},[7286],{"type":37,"value":1608},{"type":32,"tag":1138,"props":7288,"children":7289},{"class":1140,"line":1963},[7290,7294,7298,7302,7306,7310,7314,7318,7322,7326,7330,7334,7338,7342],{"type":32,"tag":1138,"props":7291,"children":7292},{"style":1401},[7293],{"type":37,"value":2211},{"type":32,"tag":1138,"props":7295,"children":7296},{"style":1302},[7297],{"type":37,"value":972},{"type":32,"tag":1138,"props":7299,"children":7300},{"style":1145},[7301],{"type":37,"value":2188},{"type":32,"tag":1138,"props":7303,"children":7304},{"style":1151},[7305],{"type":37,"value":64},{"type":32,"tag":1138,"props":7307,"children":7308},{"style":1296},[7309],{"type":37,"value":2228},{"type":32,"tag":1138,"props":7311,"children":7312},{"style":1401},[7313],{"type":37,"value":2233},{"type":32,"tag":1138,"props":7315,"children":7316},{"style":1145},[7317],{"type":37,"value":2238},{"type":32,"tag":1138,"props":7319,"children":7320},{"style":1151},[7321],{"type":37,"value":64},{"type":32,"tag":1138,"props":7323,"children":7324},{"style":1669},[7325],{"type":37,"value":2247},{"type":32,"tag":1138,"props":7327,"children":7328},{"style":1401},[7329],{"type":37,"value":2252},{"type":32,"tag":1138,"props":7331,"children":7332},{"style":1145},[7333],{"type":37,"value":2257},{"type":32,"tag":1138,"props":7335,"children":7336},{"style":1151},[7337],{"type":37,"value":64},{"type":32,"tag":1138,"props":7339,"children":7340},{"style":1296},[7341],{"type":37,"value":2266},{"type":32,"tag":1138,"props":7343,"children":7344},{"style":1302},[7345],{"type":37,"value":2088},{"type":32,"tag":1138,"props":7347,"children":7348},{"class":1140,"line":1994},[7349,7353,7357,7361,7365,7369,7373,7377,7381],{"type":32,"tag":1138,"props":7350,"children":7351},{"style":1580},[7352],{"type":37,"value":2279},{"type":32,"tag":1138,"props":7354,"children":7355},{"style":1401},[7356],{"type":37,"value":2284},{"type":32,"tag":1138,"props":7358,"children":7359},{"style":1151},[7360],{"type":37,"value":1603},{"type":32,"tag":1138,"props":7362,"children":7363},{"style":1145},[7364],{"type":37,"value":2257},{"type":32,"tag":1138,"props":7366,"children":7367},{"style":1151},[7368],{"type":37,"value":64},{"type":32,"tag":1138,"props":7370,"children":7371},{"style":1296},[7372],{"type":37,"value":2266},{"type":32,"tag":1138,"props":7374,"children":7375},{"style":1151},[7376],{"type":37,"value":2305},{"type":32,"tag":1138,"props":7378,"children":7379},{"style":1145},[7380],{"type":37,"value":1422},{"type":32,"tag":1138,"props":7382,"children":7383},{"style":1151},[7384],{"type":37,"value":1340},{"type":32,"tag":1138,"props":7386,"children":7387},{"class":1140,"line":2002},[7388,7392,7396,7400,7404,7408,7412,7416,7420],{"type":32,"tag":1138,"props":7389,"children":7390},{"style":1145},[7391],{"type":37,"value":2322},{"type":32,"tag":1138,"props":7393,"children":7394},{"style":1151},[7395],{"type":37,"value":64},{"type":32,"tag":1138,"props":7397,"children":7398},{"style":1889},[7399],{"type":37,"value":2106},{"type":32,"tag":1138,"props":7401,"children":7402},{"style":1302},[7403],{"type":37,"value":1928},{"type":32,"tag":1138,"props":7405,"children":7406},{"style":1145},[7407],{"type":37,"value":2266},{"type":32,"tag":1138,"props":7409,"children":7410},{"style":1151},[7411],{"type":37,"value":64},{"type":32,"tag":1138,"props":7413,"children":7414},{"style":1296},[7415],{"type":37,"value":2347},{"type":32,"tag":1138,"props":7417,"children":7418},{"style":1302},[7419],{"type":37,"value":1938},{"type":32,"tag":1138,"props":7421,"children":7422},{"style":1151},[7423],{"type":37,"value":1340},{"type":32,"tag":1138,"props":7425,"children":7426},{"class":1140,"line":2011},[7427],{"type":32,"tag":1138,"props":7428,"children":7429},{"style":1302},[7430],{"type":37,"value":2364},{"type":32,"tag":1138,"props":7432,"children":7433},{"class":1140,"line":2049},[7434,7438],{"type":32,"tag":1138,"props":7435,"children":7436},{"style":1302},[7437],{"type":37,"value":2373},{"type":32,"tag":1138,"props":7439,"children":7440},{"style":1151},[7441],{"type":37,"value":1340},{"type":32,"tag":1138,"props":7443,"children":7444},{"class":1140,"line":2091},[7445],{"type":32,"tag":1138,"props":7446,"children":7447},{"emptyLinePlaceholder":1494},[7448],{"type":37,"value":1497},{"type":32,"tag":1138,"props":7450,"children":7451},{"class":1140,"line":2136},[7452,7457,7461,7466,7470,7474,7478,7482,7486,7490,7494],{"type":32,"tag":1138,"props":7453,"children":7454},{"style":1145},[7455],{"type":37,"value":7456},"  nuxtApp",{"type":32,"tag":1138,"props":7458,"children":7459},{"style":1151},[7460],{"type":37,"value":64},{"type":32,"tag":1138,"props":7462,"children":7463},{"style":1296},[7464],{"type":37,"value":7465},"vueApp",{"type":32,"tag":1138,"props":7467,"children":7468},{"style":1151},[7469],{"type":37,"value":64},{"type":32,"tag":1138,"props":7471,"children":7472},{"style":1889},[7473],{"type":37,"value":2442},{"type":32,"tag":1138,"props":7475,"children":7476},{"style":1302},[7477],{"type":37,"value":1928},{"type":32,"tag":1138,"props":7479,"children":7480},{"style":1145},[7481],{"type":37,"value":1356},{"type":32,"tag":1138,"props":7483,"children":7484},{"style":1151},[7485],{"type":37,"value":1361},{"type":32,"tag":1138,"props":7487,"children":7488},{"style":1145},[7489],{"type":37,"value":1915},{"type":32,"tag":1138,"props":7491,"children":7492},{"style":1302},[7493],{"type":37,"value":1938},{"type":32,"tag":1138,"props":7495,"children":7496},{"style":1151},[7497],{"type":37,"value":1340},{"type":32,"tag":1138,"props":7499,"children":7500},{"class":1140,"line":2145},[7501,7505],{"type":32,"tag":1138,"props":7502,"children":7503},{"style":1302},[7504],{"type":37,"value":4482},{"type":32,"tag":1138,"props":7506,"children":7507},{"style":1151},[7508],{"type":37,"value":1340},{"type":32,"tag":33,"props":7510,"children":7511},{},[7512,7514,7520,7522,7528,7530,7535,7536,7541,7543,7548,7550,7557],{"type":37,"value":7513},"The server plugin, ",{"type":32,"tag":218,"props":7515,"children":7517},{"className":7516},[],[7518],{"type":37,"value":7519},"msal.server.ts",{"type":37,"value":7521},", gives ",{"type":32,"tag":218,"props":7523,"children":7525},{"className":7524},[],[7526],{"type":37,"value":7527},"$msal",{"type":37,"value":7529}," a stub with an empty account list, so ",{"type":32,"tag":218,"props":7531,"children":7533},{"className":7532},[],[7534],{"type":37,"value":2711},{"type":37,"value":2833},{"type":32,"tag":218,"props":7537,"children":7539},{"className":7538},[],[7540],{"type":37,"value":3607},{"type":37,"value":7542}," work during SSR and the page renders signed out. The auth middleware skips the server, which can't see the ",{"type":32,"tag":218,"props":7544,"children":7546},{"className":7545},[],[7547],{"type":37,"value":1831},{"type":37,"value":7549}," cache, and checks the accounts after hydration. Both files are in ",{"type":32,"tag":55,"props":7551,"children":7554},{"href":7552,"rel":7553},"https://github.com/DulanDev/vue3-msal/tree/main/samples/sample-with-nuxt/app",[59],[7555],{"type":37,"value":7556},"the sample",{"type":37,"value":64},{"type":32,"tag":33,"props":7559,"children":7560},{},[7561],{"type":37,"value":7562},"The trade-off is that the server always renders the signed-out state, so a signed-in user sees it briefly before the page hydrates. Avoiding that means sharing auth state with the server, usually through an httpOnly cookie that server middleware reads.",{"type":32,"tag":66,"props":7564,"children":7566},{"id":7565},"trade-offs",[7567],{"type":37,"value":7568},"Trade-offs",{"type":32,"tag":33,"props":7570,"children":7571},{},[7572,7574,7579],{"type":37,"value":7573},"For a single sign-in button, ",{"type":32,"tag":218,"props":7575,"children":7577},{"className":7576},[],[7578],{"type":37,"value":899},{"type":37,"value":7580}," on its own is enough. The plugin is worth adding once your templates need to react to auth state. It gives you the reactive account list, the interaction status, a signed-in flag, and the silent-then-interactive token flow, which you'd otherwise wire up yourself.",{"type":32,"tag":33,"props":7582,"children":7583},{},[7584,7586,7591,7593,7598,7600,7605],{"type":37,"value":7585},"It doesn't hide MSAL. ",{"type":32,"tag":218,"props":7587,"children":7589},{"className":7588},[],[7590],{"type":37,"value":2817},{"type":37,"value":7592}," is the real ",{"type":32,"tag":218,"props":7594,"children":7596},{"className":7595},[],[7597],{"type":37,"value":907},{"type":37,"value":7599},", the config is MSAL's own ",{"type":32,"tag":218,"props":7601,"children":7603},{"className":7602},[],[7604],{"type":37,"value":1413},{"type":37,"value":7606}," type, and every MSAL method is available, so the MSAL docs still apply. The flip side is that MSAL's breaking changes reach your code too.",{"type":32,"tag":33,"props":7608,"children":7609},{},[7610,7612,7617,7619,7625],{"type":37,"value":7611},"It isn't a security layer. It doesn't validate tokens, so your API still has to. ",{"type":32,"tag":218,"props":7613,"children":7615},{"className":7614},[],[7616],{"type":37,"value":4681},{"type":37,"value":7618}," only covers ",{"type":32,"tag":218,"props":7620,"children":7622},{"className":7621},[],[7623],{"type":37,"value":7624},"/me",{"type":37,"value":7626},", and there's no server-side token handling yet, which is why the Nuxt setup renders signed out first. A Nuxt module that handles that is what I plan to build next.",{"type":32,"tag":33,"props":7628,"children":7629},{},[7630,7632,7639,7640,7647,7648,7653],{"type":37,"value":7631},"It's MIT-licensed with one maintainer (me), so weigh it like any small dependency. There are working samples for ",{"type":32,"tag":55,"props":7633,"children":7636},{"href":7634,"rel":7635},"https://github.com/DulanDev/vue3-msal/tree/main/samples/sample-with-pinia",[59],[7637],{"type":37,"value":7638},"Vue 3 with Pinia",{"type":37,"value":4530},{"type":32,"tag":55,"props":7641,"children":7644},{"href":7642,"rel":7643},"https://github.com/DulanDev/vue3-msal/tree/main/samples/sample-with-quasar",[59],[7645],{"type":37,"value":7646},"Quasar",{"type":37,"value":4538},{"type":32,"tag":55,"props":7649,"children":7651},{"href":6496,"rel":7650},[59],[7652],{"type":37,"value":15},{"type":37,"value":64},{"type":32,"tag":66,"props":7655,"children":7657},{"id":7656},"faqs",[7658],{"type":37,"value":7659},"FAQs",{"type":32,"tag":444,"props":7661,"children":7663},{"class":7662},"faq-list",[7664,7727,7811,7875,7909,7950,8014,8034,8103,8143,8220],{"type":32,"tag":7665,"props":7666,"children":7668},"details",{"class":7667},"faq-item",[7669,7680],{"type":32,"tag":7670,"props":7671,"children":7672},"summary",{},[7673],{"type":32,"tag":7674,"props":7675,"children":7677},"h3",{"id":7676},"what-is-vue3-msal-plugin",[7678],{"type":37,"value":7679},"What is vue3-msal-plugin?",{"type":32,"tag":444,"props":7681,"children":7683},{"class":7682},"faq-answer",[7684],{"type":32,"tag":33,"props":7685,"children":7686},{},[7687,7692,7694,7699,7701,7706,7707,7712,7713,7718,7720,7725],{"type":32,"tag":218,"props":7688,"children":7690},{"className":7689},[],[7691],{"type":37,"value":925},{"type":37,"value":7693}," is an open-source (MIT) Vue 3 plugin that wraps Microsoft's ",{"type":32,"tag":218,"props":7695,"children":7697},{"className":7696},[],[7698],{"type":37,"value":899},{"type":37,"value":7700}," library in composables: ",{"type":32,"tag":218,"props":7702,"children":7704},{"className":7703},[],[7705],{"type":37,"value":2940},{"type":37,"value":4530},{"type":32,"tag":218,"props":7708,"children":7710},{"className":7709},[],[7711],{"type":37,"value":3540},{"type":37,"value":4538},{"type":32,"tag":218,"props":7714,"children":7716},{"className":7715},[],[7717],{"type":37,"value":4066},{"type":37,"value":7719},". It gives Vue components reactive sign-in state and access tokens for Microsoft Entra ID (formerly Azure AD), and it ships TypeScript types. It's published on ",{"type":32,"tag":55,"props":7721,"children":7723},{"href":917,"rel":7722},[59],[7724],{"type":37,"value":1249},{"type":37,"value":7726},", and I maintain it.",{"type":32,"tag":7665,"props":7728,"children":7729},{"class":7667},[7730,7739],{"type":32,"tag":7670,"props":7731,"children":7732},{},[7733],{"type":32,"tag":7674,"props":7734,"children":7736},{"id":7735},"how-do-i-add-microsoft-entra-id-sign-in-to-a-vue-3-app",[7737],{"type":37,"value":7738},"How do I add Microsoft Entra ID sign-in to a Vue 3 app?",{"type":32,"tag":444,"props":7740,"children":7741},{"class":7682},[7742],{"type":32,"tag":33,"props":7743,"children":7744},{},[7745,7747,7752,7753,7758,7760,7765,7767,7773,7775,7781,7783,7788,7789,7794,7796,7801,7803,7809],{"type":37,"value":7746},"Register the app in Entra ID as a single-page application, install ",{"type":32,"tag":218,"props":7748,"children":7750},{"className":7749},[],[7751],{"type":37,"value":925},{"type":37,"value":2833},{"type":32,"tag":218,"props":7754,"children":7756},{"className":7755},[],[7757],{"type":37,"value":899},{"type":37,"value":7759},", create the MSAL instance, and ",{"type":32,"tag":218,"props":7761,"children":7763},{"className":7762},[],[7764],{"type":37,"value":2592},{"type":37,"value":7766}," before passing it to ",{"type":32,"tag":218,"props":7768,"children":7770},{"className":7769},[],[7771],{"type":37,"value":7772},"app.use(msalPlugin, instance)",{"type":37,"value":7774},". Then call ",{"type":32,"tag":218,"props":7776,"children":7778},{"className":7777},[],[7779],{"type":37,"value":7780},"instance.loginPopup(loginRequest)",{"type":37,"value":7782}," from a click handler, with ",{"type":32,"tag":218,"props":7784,"children":7786},{"className":7785},[],[7787],{"type":37,"value":2817},{"type":37,"value":2833},{"type":32,"tag":218,"props":7790,"children":7792},{"className":7791},[],[7793],{"type":37,"value":2847},{"type":37,"value":7795}," from ",{"type":32,"tag":218,"props":7797,"children":7799},{"className":7798},[],[7800],{"type":37,"value":2711},{"type":37,"value":7802},". The ",{"type":32,"tag":55,"props":7804,"children":7806},{"href":7805},"#registering-the-app-in-entra-id",[7807],{"type":37,"value":7808},"registration step",{"type":37,"value":7810}," is where most setups go wrong.",{"type":32,"tag":7665,"props":7812,"children":7813},{"class":7667},[7814,7823],{"type":32,"tag":7670,"props":7815,"children":7816},{},[7817],{"type":32,"tag":7674,"props":7818,"children":7820},{"id":7819},"which-versions-of-vue-and-msal-browser-does-vue3-msal-plugin-support",[7821],{"type":37,"value":7822},"Which versions of Vue and MSAL Browser does vue3-msal-plugin support?",{"type":32,"tag":444,"props":7824,"children":7825},{"class":7682},[7826],{"type":32,"tag":33,"props":7827,"children":7828},{},[7829,7831,7836,7838,7844,7845,7851,7853,7859,7860,7866,7868,7873],{"type":37,"value":7830},"Vue 3.5 or newer, ",{"type":32,"tag":218,"props":7832,"children":7834},{"className":7833},[],[7835],{"type":37,"value":899},{"type":37,"value":7837}," 4.x, and Node.js 20 or newer. Those are the plugin's declared ranges: ",{"type":32,"tag":218,"props":7839,"children":7841},{"className":7840},[],[7842],{"type":37,"value":7843},"vue@^3.5.0",{"type":37,"value":2833},{"type":32,"tag":218,"props":7846,"children":7848},{"className":7847},[],[7849],{"type":37,"value":7850},"@azure/msal-browser@^4.0.0",{"type":37,"value":7852}," as peer dependencies, and ",{"type":32,"tag":218,"props":7854,"children":7856},{"className":7855},[],[7857],{"type":37,"value":7858},">=20",{"type":37,"value":6441},{"type":32,"tag":218,"props":7861,"children":7863},{"className":7862},[],[7864],{"type":37,"value":7865},"engines.node",{"type":37,"value":7867},". ",{"type":32,"tag":218,"props":7869,"children":7871},{"className":7870},[],[7872],{"type":37,"value":899},{"type":37,"value":7874}," 5 is outside the peer range.",{"type":32,"tag":7665,"props":7876,"children":7877},{"class":7667},[7878,7887],{"type":32,"tag":7670,"props":7879,"children":7880},{},[7881],{"type":32,"tag":7674,"props":7882,"children":7884},{"id":7883},"does-vue3-msal-plugin-support-vue-2",[7885],{"type":37,"value":7886},"Does vue3-msal-plugin support Vue 2?",{"type":32,"tag":444,"props":7888,"children":7889},{"class":7682},[7890],{"type":32,"tag":33,"props":7891,"children":7892},{},[7893,7895,7900,7902,7907],{"type":37,"value":7894},"No. ",{"type":32,"tag":218,"props":7896,"children":7898},{"className":7897},[],[7899],{"type":37,"value":925},{"type":37,"value":7901}," requires Vue 3.5 or newer and is built on the Composition API. A Vue 2 app has to call ",{"type":32,"tag":218,"props":7903,"children":7905},{"className":7904},[],[7906],{"type":37,"value":899},{"type":37,"value":7908}," directly or use a different wrapper.",{"type":32,"tag":7665,"props":7910,"children":7911},{"class":7667},[7912,7921],{"type":32,"tag":7670,"props":7913,"children":7914},{},[7915],{"type":32,"tag":7674,"props":7916,"children":7918},{"id":7917},"does-vue3-msal-plugin-work-with-nuxt",[7919],{"type":37,"value":7920},"Does vue3-msal-plugin work with Nuxt?",{"type":32,"tag":444,"props":7922,"children":7923},{"class":7682},[7924],{"type":32,"tag":33,"props":7925,"children":7926},{},[7927,7929,7934,7936,7941,7942,7948],{"type":37,"value":7928},"Yes. Use a client plugin that sets up MSAL and a server plugin that gives SSR an empty account list, as in the ",{"type":32,"tag":55,"props":7930,"children":7932},{"href":6496,"rel":7931},[59],[7933],{"type":37,"value":6500},{"type":37,"value":7935},". The server renders the signed-out state until the page hydrates, because it can't read the browser's ",{"type":32,"tag":218,"props":7937,"children":7939},{"className":7938},[],[7940],{"type":37,"value":1831},{"type":37,"value":7802},{"type":32,"tag":55,"props":7943,"children":7945},{"href":7944},"#nuxt",[7946],{"type":37,"value":7947},"Nuxt section",{"type":37,"value":7949}," above has the details.",{"type":32,"tag":7665,"props":7951,"children":7952},{"class":7667},[7953,7962],{"type":32,"tag":7670,"props":7954,"children":7955},{},[7956],{"type":32,"tag":7674,"props":7957,"children":7959},{"id":7958},"is-vue3-msal-plugin-an-official-microsoft-library",[7960],{"type":37,"value":7961},"Is vue3-msal-plugin an official Microsoft library?",{"type":32,"tag":444,"props":7963,"children":7964},{"class":7682},[7965],{"type":32,"tag":33,"props":7966,"children":7967},{},[7968,7970,7976,7978,7984,7986,7991,7993,7998,8000,8006,8007,8012],{"type":37,"value":7969},"No, it's a community plugin. Microsoft publishes MSAL wrappers for React (",{"type":32,"tag":218,"props":7971,"children":7973},{"className":7972},[],[7974],{"type":37,"value":7975},"@azure/msal-react",{"type":37,"value":7977},") and Angular (",{"type":32,"tag":218,"props":7979,"children":7981},{"className":7980},[],[7982],{"type":37,"value":7983},"@azure/msal-angular",{"type":37,"value":7985},") but none for Vue. ",{"type":32,"tag":218,"props":7987,"children":7989},{"className":7988},[],[7990],{"type":37,"value":925},{"type":37,"value":7992}," doesn't replace ",{"type":32,"tag":218,"props":7994,"children":7996},{"className":7995},[],[7997],{"type":37,"value":899},{"type":37,"value":7999},": it depends on it, and ",{"type":32,"tag":218,"props":8001,"children":8003},{"className":8002},[],[8004],{"type":37,"value":8005},"useMsal().instance",{"type":37,"value":7592},{"type":32,"tag":218,"props":8008,"children":8010},{"className":8009},[],[8011],{"type":37,"value":907},{"type":37,"value":8013},", so every MSAL method and the MSAL docs still apply.",{"type":32,"tag":7665,"props":8015,"children":8016},{"class":7667},[8017,8026],{"type":32,"tag":7670,"props":8018,"children":8019},{},[8020],{"type":32,"tag":7674,"props":8021,"children":8023},{"id":8022},"should-i-use-popup-or-redirect-sign-in-with-msal-in-vue",[8024],{"type":37,"value":8025},"Should I use popup or redirect sign-in with MSAL in Vue?",{"type":32,"tag":444,"props":8027,"children":8028},{"class":7682},[8029],{"type":32,"tag":33,"props":8030,"children":8031},{},[8032],{"type":37,"value":8033},"Use popup for most single-page apps, because the app stays mounted and keeps its state. Use redirect when popups are blocked, or in browsers with strict third-party storage rules. Call popup only from a user action such as a click, and don't mix the two flows in one app.",{"type":32,"tag":7665,"props":8035,"children":8036},{"class":7667},[8037,8054],{"type":32,"tag":7670,"props":8038,"children":8039},{},[8040],{"type":32,"tag":7674,"props":8041,"children":8043},{"id":8042},"why-do-i-get-uninitialized_public_client_application",[8044,8046,8052],{"type":37,"value":8045},"Why do I get ",{"type":32,"tag":218,"props":8047,"children":8049},{"className":8048},[],[8050],{"type":37,"value":8051},"uninitialized_public_client_application",{"type":37,"value":8053},"?",{"type":32,"tag":444,"props":8055,"children":8056},{"class":7682},[8057],{"type":32,"tag":33,"props":8058,"children":8059},{},[8060,8062,8067,8069,8074,8075,8080,8081,8086,8088,8094,8096,8101],{"type":37,"value":8061},"Something called an MSAL API before ",{"type":32,"tag":218,"props":8063,"children":8065},{"className":8064},[],[8066],{"type":37,"value":2615},{"type":37,"value":8068}," resolved. ",{"type":32,"tag":218,"props":8070,"children":8072},{"className":8071},[],[8073],{"type":37,"value":899},{"type":37,"value":2602},{"type":32,"tag":218,"props":8076,"children":8078},{"className":8077},[],[8079],{"type":37,"value":1831},{"type":37,"value":2609},{"type":32,"tag":218,"props":8082,"children":8084},{"className":8083},[],[8085],{"type":37,"value":2615},{"type":37,"value":8087},", which is why tutorials written for v2 don't mention it. Await ",{"type":32,"tag":218,"props":8089,"children":8091},{"className":8090},[],[8092],{"type":37,"value":8093},"instance.initialize()",{"type":37,"value":8095}," before any other MSAL call, whether that's in ",{"type":32,"tag":218,"props":8097,"children":8099},{"className":8098},[],[8100],{"type":37,"value":6513},{"type":37,"value":8102},", a Nuxt plugin, or a router guard.",{"type":32,"tag":7665,"props":8104,"children":8105},{"class":7667},[8106,8121],{"type":32,"tag":7670,"props":8107,"children":8108},{},[8109],{"type":32,"tag":7674,"props":8110,"children":8112},{"id":8111},"what-causes-interaction_in_progress",[8113,8115,8120],{"type":37,"value":8114},"What causes ",{"type":32,"tag":218,"props":8116,"children":8118},{"className":8117},[],[8119],{"type":37,"value":3509},{"type":37,"value":8053},{"type":32,"tag":444,"props":8122,"children":8123},{"class":7682},[8124],{"type":32,"tag":33,"props":8125,"children":8126},{},[8127,8129,8134,8136,8141],{"type":37,"value":8128},"Two interactive calls overlapping, or an earlier one that never finished and left its state behind. Check the ",{"type":32,"tag":218,"props":8130,"children":8132},{"className":8131},[],[8133],{"type":37,"value":2839},{"type":37,"value":8135}," ref from ",{"type":32,"tag":218,"props":8137,"children":8139},{"className":8138},[],[8140],{"type":37,"value":2711},{"type":37,"value":8142}," before starting a new sign-in, make sure the redirect promise from an earlier attempt was handled, and don't mix popup and redirect in the same app.",{"type":32,"tag":7665,"props":8144,"children":8145},{"class":7667},[8146,8155],{"type":32,"tag":7670,"props":8147,"children":8148},{},[8149],{"type":32,"tag":7674,"props":8150,"children":8152},{"id":8151},"how-do-i-protect-routes-with-vue-router-and-msal",[8153],{"type":37,"value":8154},"How do I protect routes with Vue Router and MSAL?",{"type":32,"tag":444,"props":8156,"children":8157},{"class":7682},[8158],{"type":32,"tag":33,"props":8159,"children":8160},{},[8161,8163,8169,8171,8177,8179,8184,8185,8191,8193,8198,8200,8205,8206,8211,8213,8218],{"type":37,"value":8162},"Mark the routes with ",{"type":32,"tag":218,"props":8164,"children":8166},{"className":8165},[],[8167],{"type":37,"value":8168},"meta: { requiresAuth: true }",{"type":37,"value":8170},", then in a ",{"type":32,"tag":218,"props":8172,"children":8174},{"className":8173},[],[8175],{"type":37,"value":8176},"router.beforeEach",{"type":37,"value":8178}," guard await ",{"type":32,"tag":218,"props":8180,"children":8182},{"className":8181},[],[8183],{"type":37,"value":8093},{"type":37,"value":2833},{"type":32,"tag":218,"props":8186,"children":8188},{"className":8187},[],[8189],{"type":37,"value":8190},"instance.handleRedirectPromise()",{"type":37,"value":8192}," before checking ",{"type":32,"tag":218,"props":8194,"children":8196},{"className":8195},[],[8197],{"type":37,"value":2623},{"type":37,"value":8199},". If there are no accounts, call ",{"type":32,"tag":218,"props":8201,"children":8203},{"className":8202},[],[8204],{"type":37,"value":3150},{"type":37,"value":446},{"type":32,"tag":218,"props":8207,"children":8209},{"className":8208},[],[8210],{"type":37,"value":6047},{"type":37,"value":8212}," set to the requested route. Without those awaits, the guard runs before MSAL has processed the redirect response and sends signed-in users back to the home page. See ",{"type":32,"tag":55,"props":8214,"children":8216},{"href":8215},"#protecting-routes",[8217],{"type":37,"value":5460},{"type":37,"value":8219}," for the code.",{"type":32,"tag":7665,"props":8221,"children":8222},{"class":7667},[8223,8239],{"type":32,"tag":7670,"props":8224,"children":8225},{},[8226],{"type":32,"tag":7674,"props":8227,"children":8229},{"id":8228},"is-localstorage-safe-for-msal-tokens",[8230,8232,8237],{"type":37,"value":8231},"Is ",{"type":32,"tag":218,"props":8233,"children":8235},{"className":8234},[],[8236],{"type":37,"value":1831},{"type":37,"value":8238}," safe for MSAL tokens?",{"type":32,"tag":444,"props":8240,"children":8241},{"class":7682},[8242,8261],{"type":32,"tag":33,"props":8243,"children":8244},{},[8245,8247,8252,8254,8259],{"type":37,"value":8246},"MSAL's ",{"type":32,"tag":218,"props":8248,"children":8250},{"className":8249},[],[8251],{"type":37,"value":1831},{"type":37,"value":8253}," cache keeps users signed in across tabs and reloads, but any script on your origin can read it, so an XSS bug could expose tokens. That's one reason access tokens are short-lived and scoped. Keep third-party scripts under control, set a strict Content Security Policy, and validate every token on the server. ",{"type":32,"tag":218,"props":8255,"children":8257},{"className":8256},[],[8258],{"type":37,"value":2690},{"type":37,"value":8260}," reduces the exposure, but the session no longer carries across tabs.",{"type":32,"tag":8262,"props":8263,"children":8264},"style",{},[8265],{"type":37,"value":8266},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",{"title":7,"searchDepth":392,"depth":392,"links":8268},[8269,8270,8271,8272,8273,8274,8275,8276,8277,8278,8279],{"id":942,"depth":392,"text":945},{"id":983,"depth":392,"text":986},{"id":1231,"depth":392,"text":1234},{"id":2716,"depth":392,"text":2719},{"id":3514,"depth":392,"text":3517},{"id":4052,"depth":392,"text":4055},{"id":4662,"depth":392,"text":4665},{"id":5457,"depth":392,"text":5460},{"id":6467,"depth":392,"text":15},{"id":7565,"depth":392,"text":7568},{"id":7656,"depth":392,"text":7659,"children":8280},[8281,8282,8283,8284,8285,8286,8287,8288,8290,8292,8293],{"id":7676,"depth":1393,"text":7679},{"id":7735,"depth":1393,"text":7738},{"id":7819,"depth":1393,"text":7822},{"id":7883,"depth":1393,"text":7886},{"id":7917,"depth":1393,"text":7920},{"id":7958,"depth":1393,"text":7961},{"id":8022,"depth":1393,"text":8025},{"id":8042,"depth":1393,"text":8289},"Why do I get uninitialized_public_client_application?",{"id":8111,"depth":1393,"text":8291},"What causes interaction_in_progress?",{"id":8151,"depth":1393,"text":8154},{"id":8228,"depth":1393,"text":8294},"Is localStorage safe for MSAL tokens?","content:blog:msal-authentication-in-vue-3.md","blog/msal-authentication-in-vue-3.md",[8298,8300,8302,8304,8306,8308,8310,8311,8313,8315,8317],{"question":7679,"answer":8299},"vue3-msal-plugin is an open-source (MIT) Vue 3 plugin that wraps Microsoft's @azure/msal-browser library in composables: useMsal, useIsAuthenticated, and useMsalAuthentication. It gives Vue components reactive sign-in state and access tokens for Microsoft Entra ID (formerly Azure AD), and it ships TypeScript types. It's published on npm, and I maintain it.",{"question":7738,"answer":8301},"Register the app in Entra ID as a single-page application, install vue3-msal-plugin and @azure/msal-browser, create the MSAL instance, and await instance.initialize() before passing it to app.use(msalPlugin, instance). Then call instance.loginPopup(loginRequest) from a click handler, with instance and loginRequest from useMsal(). The registration step is where most setups go wrong.",{"question":7822,"answer":8303},"Vue 3.5 or newer, @azure/msal-browser 4.x, and Node.js 20 or newer. Those are the plugin's declared ranges: vue@^3.5.0 and @azure/msal-browser@^4.0.0 as peer dependencies, and >=20 in engines.node. @azure/msal-browser 5 is outside the peer range.",{"question":7886,"answer":8305},"No. vue3-msal-plugin requires Vue 3.5 or newer and is built on the Composition API. A Vue 2 app has to call @azure/msal-browser directly or use a different wrapper.",{"question":7920,"answer":8307},"Yes. Use a client plugin that sets up MSAL and a server plugin that gives SSR an empty account list, as in the Nuxt sample. The server renders the signed-out state until the page hydrates, because it can't read the browser's localStorage. The Nuxt section above has the details.",{"question":7961,"answer":8309},"No, it's a community plugin. Microsoft publishes MSAL wrappers for React (@azure/msal-react) and Angular (@azure/msal-angular) but none for Vue. vue3-msal-plugin doesn't replace @azure/msal-browser: it depends on it, and useMsal().instance is the real PublicClientApplication, so every MSAL method and the MSAL docs still apply.",{"question":8025,"answer":8033},{"question":8289,"answer":8312},"Something called an MSAL API before initialize() resolved. @azure/msal-browser has required it since v3, and in v4 the localStorage cache only loads during initialize(), which is why tutorials written for v2 don't mention it. Await instance.initialize() before any other MSAL call, whether that's in main.ts, a Nuxt plugin, or a router guard.",{"question":8291,"answer":8314},"Two interactive calls overlapping, or an earlier one that never finished and left its state behind. Check the inProgress ref from useMsal() before starting a new sign-in, make sure the redirect promise from an earlier attempt was handled, and don't mix popup and redirect in the same app.",{"question":8154,"answer":8316},"Mark the routes with meta: { requiresAuth: true }, then in a router.beforeEach guard await instance.initialize() and instance.handleRedirectPromise() before checking getAllAccounts(). If there are no accounts, call loginRedirect with redirectStartPage set to the requested route. Without those awaits, the guard runs before MSAL has processed the redirect response and sends signed-in users back to the home page. See Protecting routes for the code.",{"question":8294,"answer":8318},"MSAL's localStorage cache keeps users signed in across tabs and reloads, but any script on your origin can read it, so an XSS bug could expose tokens. That's one reason access tokens are short-lived and scoped. Keep third-party scripts under control, set a strict Content Security Policy, and validate every token on the server. sessionStorage reduces the exposure, but the session no longer carries across tabs.\n\nhtml .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}",1793144636876]