search

AzureAD / microsoft-authentication-library-for-js

Microsoft Authentication Library (MSAL) for JS
http://aka.ms/aadv2
MIT License
3.63k stars 2.64k forks source link

Next.Js SSR support example #5038

Open gitmurali opened 2 years ago

gitmurali commented 2 years ago

Core Library

MSAL.js v2 (@azure/msal-browser), MSAL.js v1 (@azure/msal or msal), MSAL Node (@azure/msal-node)

Wrapper Library

MSAL React (@azure/msal-react)

Description

I was using msal-node library and I was trying to make it work with Next.JS SSR following these docs here https://github.com/AzureAD/microsoft-authentication-library-for-js/tree/dev/lib/msal-node

but unfortunately I'm getting different errors for example like 

ClientAuthError: invalid_client_credential: Client credential (secret, certificate, or assertion) must not be empty when creating a confidential client. An application should at most have one credential

I would like to request to include an example which shows how to use MSAL on Server side rendering with Next.Js.

Source

External (Customer)

tnorling commented 2 years ago

@gitmurali We unfortunately do not support token acquisition during server-side rendering for SPA apps today. I've added a feature to our backlog to take this under consideration.

gitmurali commented 2 years ago

@tnorling does msal-node package not support on SSR on SPA's ?

gitmurali commented 2 years ago

@tnorling can we not use this as example app in my nextjs app ? https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-nodejs-webapp-msal

tnorling commented 2 years ago

If you are purely acquiring tokens server-side I suppose you could use msal-node but that would defeat the purpose of SSR, no? When I think about SSR support I'm thinking that you would like the ability to acquire tokens server-side when the app (or a new page) is first loaded and then client-side thereafter. This is a scenario we do not support today.

cherealnice commented 1 year ago

I'm also getting the same error with nextjs using msal-node with purely server side authentication. @gitmurali did you find a fix for this?

tnorling commented 1 year ago

If you're doing purely server side auth you should set up msal as a Confidential Client

cherealnice commented 1 year ago

@tnorling Yes I have set up msal as a Confidential Client and I am still seeing this error. The only fix for now is to create a new instance of the ConfidentialClientApplication for each requests, but that does not allow for caching the token, and has a negative impact on performance.

gitmurali commented 1 year ago

I'm also getting the same error with nextjs using msal-node with purely server side authentication. @gitmurali did you find a fix for this?

@cherealnice I tried with confidential client but I was not successful..

cherealnice commented 1 year ago

I was able to resolve the issue. For me, the problem was I was mixing client-side imports with server-side imports in an index.ts file. I resolved this by removing the index.ts file and importing directly from the correct file. I generally followed this example https://github.com/Azure-Samples/ms-identity-javascript-nodejs-console

johnnieskywalker commented 5 days ago

@tnorling have you picked up SSR support from your backlog