search

AzureAD / microsoft-authentication-library-for-js

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

Add Next.js sample that utilises the new App Router (and potentially make TypeScript first too) #6012

Open jenewland1999 opened 1 year ago

jenewland1999 commented 1 year ago

Core Library

MSAL.js v2 (@azure/msal-browser)

Wrapper Library

MSAL React (@azure/msal-react)

Public or Confidential Client?

Public

Description

Next.js recently promoted their new app router from beta to stable and fundamentally changes the way the framework works by using React Server Components (RSC) to be a server-rendered-first framework.

The existing sample docs for Next.js use the traditional Pages Router and while these are still helpful, it would be great if there were docs for the new App Router model too.

Also, TypeScript-first samples would be great as it's a lot easier to remove TypeScript syntax than it is to add it (as you have to figure out what the correct types are for various things).

https://nextjs.org/docs

Source

External (Customer)

hectormmg commented 1 year ago

cc: @EmLauber can we track this sample request internally please? Thanks!

EmLauber commented 1 year ago

Tracking the request and hopefully we can get it addressed via the community submitted sample linked.

sakgoyal commented 10 months ago

any updates?

kletse commented 10 months ago

Any updates on this? Would love a working sample of this as I'm just starting on a new project with Next.js and MSAL...

spacecat commented 10 months ago

Next.js 14 was announced last thurday. Vercel also made a fantastic job of creating an entirely new 16 chapter tutorial using the new App Router. Nextjs.org/learn They have a dedicated chapter for authentication. They use nextauth.js. In their main docs they mention Clerk, Auth0, etc but no MSAL React. I think that in order for you to complete with these 3rd party auth services you need to create a sample based on nextjs.org/learn, add ALL real world features, or at least the most common ones, and on top, create a tutorial with lots of images and easy to follow text.

I think if you did that the community would be very happy and at the same time MSAL would become even more popular and Azure AD B2C a more interesting alternative.

What is the status btw on the latest Next.js msal samples?

tobi1220 commented 7 months ago

Any news on this?

spacecat commented 7 months ago

One of the reasons I'm slowly moving away from Azure and the .NET stack (been working professionally with .NET for 15 years), in particular when it comes to the front-end, is because of this exact very thing; the DX is just not there, at least not for React/Next.js. I have a feeling this is due to the much smaller React team/interest/investments at Microsoft compared to e.g. Vercel. And that's totally understandable, Microsoft is not best known for its front-end efforts. But that's also why Microsoft should be open and transparent about it. Because for us developers we live in a fast paced stressful ever changing environment, and we need to make decisions quickly, and having this type of information is crucial for us. And especially when it comes to complex things such as auth. If we choose the wrong auth it's going to have severe consequences.

I guess what I'm really trying to say is that it would be nice to see a more comprehensive set of learning material and a clear roadmap, real world examples, best practices etc going forward when it comes to React and Next.js and auth. Make it the best DX possible.

Tasin5541 commented 4 months ago

Almost a year since the issue was raised, kind of surprised that this has not been addressed yet.

I work on enterprise grade applications and SSO with Azure B2C is a must. We are being forced to still keep using react the old way and keep accumulating tech debt.

jenewland1999 commented 4 months ago

Almost a year since the issue was raised, kind of surprised that this has not been addressed yet.

I work on enterprise grade applications and SSO with Azure B2C is a must. We are being forced to still keep using react the old way and keep accumulating tech debt.

While it's not a guarantee, perhaps the release of React 19 will prompt the MSAL team to revisit this. 🤞🏻

spacecat commented 4 months ago

I just wanted to give you an update of what I've been doing for the past one and half year since I started moving away from .NET (at least for all the front-end parts). I've been slowly getting better at both JavaScript, React, Next.js (14), TailwindCSS and now Clerk that I'm using as auth. If you've never heard of it, it's the complete auth package for IMO a very affordable price. The way you add auth to your Next.js app is by simply adding components. You can literally get up and running in minutes instead of weeks/month using MSAL or any other IMO complex auth solution. And no, I don't work for Clerk, I just wanted to share my experience about this whole auth situation. So to summarise, don't bother with MSAL; as I mentioned earlier, the UX is just not there. Instead, look for other alternatives.

jenewland1999 commented 4 months ago

I just wanted to give you an update of what I've been doing for the past one and half year since I started moving away from .NET (at least for all the front-end parts). I've been slowly getting better at both JavaScript, React, Next.js (14), TailwindCSS and now Clerk that I'm using as auth. If you've never heard of it, it's the complete auth package for IMO a very affordable price. The way you add auth to your Next.js app is by simply adding components. You can literally get up and running in minutes instead of weeks/month using MSAL or any other IMO complex auth solution. And no, I don't work for Clerk, I just wanted to share my experience about this whole auth situation. So to summarise, don't bother with MSAL; as I mentioned earlier, the UX is just not there. Instead, look for other alternatives.

@spacecat While this is a great suggestion, Clerk is awesome imho, it's worth noting that they don't currently support anything other than the common tenant for Entra ID. Though I believe its on their roadmap.

nikhilpsathyanathan commented 3 months ago

Can we use next auth with msal?

spacecat commented 3 months ago

Can we use next auth with msal?

why would you want to do that? You should either use one or the other, but not both. You can use either MSAL, nextjs auth (it's got a new name, don't remember what it is), Clerk, or any other auth solution for React/Next.js.

Personally I'm only using Azure for back-end services. For front-end I'm using Vercel and Next.js as platform. Clerk is a great choice for the Vercel/Next.js combo.

h3rmanj commented 3 months ago

Can we use next auth with msal?

As of right now, the options for msal-first apps would be

This is the current client approach. To use with next you should basically mark every page or layout "use client", set the output mode to export, and deploy a static site. The downside here is you're basically using next as a router only, losing out on many of the features that probably made you look into next.

Go-to for general next apps. Works fine with a single app registration that contains the roles, and if your app can directly call the database, or downstream apis with client credentials. In my experience though, this approach doesn't work as well with on-behalf-of flow, which is a common use case for enterprise apps.

If you both want to use the full capabilities of next, and on-behalf-of flow, you're left with manually integrating msal-node. But you'll have to integrate it yourself however, which is where the out of the box developer experience falls a bit short. It is doable though, if you look into the authentication guides from nextjs docs, look through the samples in this repo, you should be able to combine msal-node with iron-session yourself.

nikhilpsathyanathan commented 3 months ago

Thanks for the info

nikhilpsathyanathan commented 3 months ago

I was a bit confused, and now I'm very clear.

spacecat commented 3 months ago

Don't overcomplicate things - just use Vercel + Next.js for your entire front-end :) And .NET/Azure for your back-end stuff.

IT21305900 commented 1 month ago

Can we use next auth with msal?

As of right now, the options for msal-first apps would be

  • @azure/msal-react

This is the current client approach. To use with next you should basically mark every page or layout "use client", set the output mode to export, and deploy a static site. The downside here is you're basically using next as a router only, losing out on many of the features that probably made you look into next.

  • next-auth beta

Go-to for general next apps. Works fine with a single app registration that contains the roles, and if your app can directly call the database, or downstream apis with client credentials. In my experience though, this approach doesn't work as well with on-behalf-of flow, which is a common use case for enterprise apps.

  • msal-node

If you both want to use the full capabilities of next, and on-behalf-of flow, you're left with manually integrating msal-node. But you'll have to integrate it yourself however, which is where the out of the box developer experience falls a bit short. It is doable though, if you look into the authentication guides from nextjs docs, look through the samples in this repo, you should be able to combine msal-node with iron-session yourself.

Hi do you have a example with rolebase access control on next-auth-beta I didn't found any reference code in the internet