How do I setup Interactive Browser Client with nextjs?

Question

I want this nodejs setup into nextjs

const sql = require('mssql');
const odbc = require('odbc');
require("msnodesqlv8");
const azureIdentity = require('@azure/identity');
 

async function myfunc(){
	const interactiveCredential = new azureIdentity.InteractiveBrowserCredential(redirectUri="http://localhost:3000");
	token = await interactiveCredential.getToken(scopes = "https://database.windows.net/.default");

Answer 1

@Micheal Palliparambil , to set up an Interactive Browser Client with Next.js, you can follow these steps:

1. Install the required packages using npm:

npm install @azure/identity

2. Import the required packages in your Next.js page:

import { InteractiveBrowserCredential } from '@azure/identity';

3. Create a new instance of the InteractiveBrowserCredential class:

const interactiveCredential = new InteractiveBrowserCredential({
  redirectUri: 'http://localhost:3000',
});

4. Use the getToken method of the InteractiveBrowserCredential class to get an access token:

const token = await interactiveCredential.getToken('https://database.windows.net/.default');

Here is the complete code for your reference:

import { InteractiveBrowserCredential } from '@azure/identity';

async function myfunc() {
  const interactiveCredential = new InteractiveBrowserCredential({
    redirectUri: 'http://localhost:3000',
  });
  const token = await interactiveCredential.getToken('https://database.windows.net/.default');
  // Use the token to make API calls
}

Note that the InteractiveBrowserCredential class requires a user to sign in interactively, so this approach is not suitable for non-interactive scenarios. If you need to authenticate a service principal, you should use a different credential type, such as ClientSecretCredential.More information can be found here.

Please let me know if you have any questions and I can help you further.

If this answer helps you please mark "Accept Answer" so other users can reference it.

Thank you,

James