Use of AzureADProvider (nuxt-auth) and Sidebase to get appRoles

Question

Good Morning you amazing bunch,

I find myself googled out and struggling here...

I use Nuxt 3 and @sidebase/nuxt-auth as my technologies. And my goal is to log a user in and retrieve the app roles from the user (these are set within the Azure AD Application using the App Roles section).

Currently, I have the following code (server/api/auth/[...].ts):

import AzureADProvider from "next-auth/providers/azure-ad";
import { NuxtAuthHandler } from "#auth";

const config = useRuntimeConfig();

export default NuxtAuthHandler({
  // TODO: SET A STRONG SECRET, SEE https://sidebase.io/nuxt-auth/configuration/nuxt-auth-handler#secret
  secret: config.nuxtSecret,
  // TODO: ADD YOUR OWN AUTHENTICATION PROVIDER HERE, READ THE DOCS FOR MORE: https://sidebase.io/nuxt-auth
  providers: [
    // @ts-expect-error You need to use .default here for it to work during SSR. May be fixed via Vite at some point
    AzureADProvider.default({
      clientId: config.clientId,
      clientSecret: config.clientSecret,
      tenantId: config.tenantId,
      authorization: {
        params: {
          scope: `offline_access openid profile email`,
          appRoles: true,
        },
      },
    }),
  ],
});

Now this works amazingly and logs the user in, however, I am still struggling to get the roles that the user is assigned to, it just returns the user display name, email, etc.

In the front end, I am using this code to parse out the information (pages/protected.vue)

<template>
  <div>
    <div>I'm protected! Session data: {{ data }}</div>
    <button class="rounded-xl shadow-xl p-2 m-2" @click="signOut()">
      sign out
    </button>
  </div>
</template>

<script setup lang="ts">
definePageMeta({ middleware: "auth" });

const { data, signOut } = useSession();
</script>

Does anyone know how I can also get the app roles using this sidebase/nuxt-auth method?

I would greatly appreciate all the help! Thanks guys!