reactjs - How to fetch subscription details of Azure account when logging in from NextJs? - Stack Overflow

admin管理员组

文章数量:1192815

I am trying to create a nextjs 14 application (app directory) where any user (from their personal account or any other account like Azure account) can log into it using Azure login and fetch their user id details like name, email, tenant details and subscription details in it.

This is AuthProvider.tsx:

"use client"
import React, { ReactNode } from "react";
import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";

const msalConfig = {
  auth: {
    clientId: <myclientid>, 
    authority: ";, 
    redirectUri: "http://localhost:3000",
  },
};

const msalInstance = new PublicClientApplication(msalConfig);

const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => (
  <MsalProvider instance={msalInstance}>{children}</MsalProvider>
);

export default AuthProvider;

This is LoginPage.tsx:

"use client";

import React from "react";
import { useMsal } from "@azure/msal-react";
import axios from "axios";

export default function Login() {
  const { instance } = useMsal();

  const handleLogin = async () => {
    try {
      // Login and acquire token
      const loginResponse: any = await instance.loginPopup({
        scopes: [";],
      });
      console.log("Login Response:", loginResponse);

      // Set the active account after login
      instance.setActiveAccount(loginResponse.account);

      // Fetch subscriptions after inviting the user
      fetchSubscriptions(loginResponse.accessToken);
    } catch (error) {
      console.error("Login Error:", error);
    }
  };

  const fetchSubscriptions = async (accessToken: string) => {
    try {
      const response = await axios.get(
        ";,
        {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        }
      );

      console.log("Subscription Details:", response.data);
    } catch (error: any) {
      console.error("Error fetching subscriptions:", error.response?.data || error.message);
    }
  };

  return (
    <div className="flex flex-col gap-2">
      <button
        onClick={handleLogin}
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        Login with Azure
      </button>
    </div>
  );
}

This code doesn't accept any personal account and asks for work or school ID to use for log in. I have selected multi-tenant and personal account while registering the application in my azure portal and used SPA redirect URI properly. Given all permissions of user_impersonation and granted it by the admin.

Hint: whenever I use this scope of in the login popup only then I get this error. Otherwise if I fetch only name, or email, it retrieves it without any error.

Thanks in advance, asking my first question over stackoverflow.

I am trying to create a nextjs 14 application (app directory) where any user (from their personal account or any other account like Azure account) can log into it using Azure login and fetch their user id details like name, email, tenant details and subscription details in it.

This is AuthProvider.tsx:

"use client"
import React, { ReactNode } from "react";
import { PublicClientApplication } from "@azure/msal-browser";
import { MsalProvider } from "@azure/msal-react";

const msalConfig = {
  auth: {
    clientId: <myclientid>, 
    authority: "https://login.microsoftonline.com/common", 
    redirectUri: "http://localhost:3000",
  },
};

const msalInstance = new PublicClientApplication(msalConfig);

const AuthProvider: React.FC<{ children: ReactNode }> = ({ children }) => (
  <MsalProvider instance={msalInstance}>{children}</MsalProvider>
);

export default AuthProvider;

This is LoginPage.tsx:

"use client";

import React from "react";
import { useMsal } from "@azure/msal-react";
import axios from "axios";

export default function Login() {
  const { instance } = useMsal();

  const handleLogin = async () => {
    try {
      // Login and acquire token
      const loginResponse: any = await instance.loginPopup({
        scopes: ["https://management.azure.com/user_impersonation"],
      });
      console.log("Login Response:", loginResponse);

      // Set the active account after login
      instance.setActiveAccount(loginResponse.account);

      // Fetch subscriptions after inviting the user
      fetchSubscriptions(loginResponse.accessToken);
    } catch (error) {
      console.error("Login Error:", error);
    }
  };

  const fetchSubscriptions = async (accessToken: string) => {
    try {
      const response = await axios.get(
        "https://management.azure.com/subscriptions?api-version=2020-01-01",
        {
          headers: {
            Authorization: `Bearer ${accessToken}`,
          },
        }
      );

      console.log("Subscription Details:", response.data);
    } catch (error: any) {
      console.error("Error fetching subscriptions:", error.response?.data || error.message);
    }
  };

  return (
    <div className="flex flex-col gap-2">
      <button
        onClick={handleLogin}
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        Login with Azure
      </button>
    </div>
  );
}

This code doesn't accept any personal account and asks for work or school ID to use for log in. I have selected multi-tenant and personal account while registering the application in my azure portal and used SPA redirect URI properly. Given all permissions of user_impersonation and granted it by the admin.

Hint: whenever I use this scope of https://management.azure.com/user_impersonation in the login popup only then I get this error. Otherwise if I fetch only name, or email, it retrieves it without any error.

Thanks in advance, asking my first question over stackoverflow.

• reactjs
• azure
• next.js
• azure-active-directory

Share Improve this question Follow edited Jan 24 at 1:28 Ziyang Liu-MSFT 4,95711 gold badge44 silver badges1212 bronze badges asked Jan 23 at 20:16 Vishal SinghVishal Singh 111 bronze badge 7

• learn.microsoft.com/en-us/rest/api/resources/subscriptions/… i want to create something like this where i try it and it shows me the subscription id. I figured the accessToken generated here is different from what i receive in my code after logging in – Vishal Singh Commented Jan 23 at 21:58
• Can you please provide the error message you're getting. – Sirra Sneha Commented Jan 24 at 3:38
• When I try to Login using my gmail account it shows You can't sign in here with a personal account. Use your work or school account instead. the reason is most probably the scope, but without it, I cannot fetch subscription ids. I have also given all permission from API permission with admin consent – Vishal Singh Commented Jan 24 at 7:58
• The issue occurs because you're trying to sign in with a personal account (like Gmail or @outlook.com). Azure AD requires work or school accounts for authentication, as personal accounts aren’t allowed by default. To resolve this, you’ll need to add the user to your Azure AD. – Sirra Sneha Commented Jan 24 at 11:44
• Go to Azure Active Directory → Users → New User, and either invite them or create a new account. Once added, they should be able to authenticate and access subscription details. – Sirra Sneha Commented Jan 24 at 11:45

 |  Show 2 more comments

1 Answer 1

Sorted by: Reset to default 0

When I try to Login using my gmail account it shows You can't sign in here with a personal account. Use your work or school account instead.

• This issue occurs as you're trying to sign in with a personal account (like Gmail or @outlook.com). Azure AD requires work or school accounts for authentication, as personal accounts aren’t allowed by default.
• To resolve this, you’ll need to add the user to your Azure AD as shown below.

Go to Azure Active Directory - > All Users - >select create new or invite external user, once the user is added they should be able to authenticate and access subscription details.

After adding the new user (Kitty)I've successfully logged in.

Now I can fetch the details of the user (Kitty) as shown.

本文标签： reactjsHow to fetch subscription details of Azure account when logging in from NextJsStack Overflow