Search code examples
azure-active-directoryazure-storageazure-functionssingle-page-applicationserverless

Azure AD - How might I link a SPA's custom sign-up and sign-in components to Azure AD's underlying process

I am in the early stages of designing a Serverless application with the following components:

  1. A SPA using React, for which I plan to run the static assets in Azure Storage.

  2. A back-end API driven by Azure Functions.

  3. Potentially a CosmosDB database, if we can get away with avoiding a full-fledged SQL Server. This is going to depend on how complex our schema ends up being.

There are several other components in play in the backend, but they are not relevant to this question.

Basically, what I'm attempting to figure out is how I can have sign-up and sign-in forms, buttons, etc. in my React SPA that hook into an Azure-driven User Pool.

The problem that I'm running into in the early design stages is my understanding of the Azure solutions for what I need. My background is in AWS. In AWS, I would have simply created a Cognito User Pool and hooked my app's sign-up/sign-in process into said User Pool using the AWS SDK.

That process makes sense to me. However, in the Azure world, it doesn't appear to be that straight forward. I've read articles/whitepapers about Azure AD, Azure AD B2C, etc., etc. The processes that are being described in those articles never seem to mention the relationship between forms that I build in my SPA and how to trigger authentication from there to Azure AD. Basically, I want the fact that Azure AD is in play to be invisible to the user; they should only ever have to interact with my front-end application (i.e. no redirects to Microsoft or Azure sign-up/sign-in pages, etc.).

So far, what I've come up with has included the following (again, I'm still in the design phase):

  1. Azure Storage to host the static assets.
  2. Azure Functions w/ Azure Function Proxies for routing between the front-end and API.
  3. It seems like an Azure AD User Flow might be the way to go hear; however, I'm still uncertain on if there are SDKs that the SPA can use to interact with functionality like signin, forgotPassword, signout, etc. I want to avoid re-eventing the wheel as much as possible.

I haven't yet begun to write code, as I am currently still in the pencil/paper design phase. What I have come up with are concerns such as:

  1. Does it make sense to run the React application in Blob storage vs. having an Azure Web App? What I mean by this is will I still be able to hook into the Authentication process that Azure AD provides without having an actual server running.

  2. A fully expect that once I implement a Sign-up/Sign-In User Flow, I will be able to trigger the AAD processes and gain a JWT to use with subsequent calls to the back-end API. I'm not yet sure if it's this straight-forward.

I'm not looking for any code or anything, just mainly clarification on some of the uncertainties that I have and confirmation that my current path makes sense.

Solution

  • You are right. Azure AD B2C is exactly what you are looking for.

    To answer your questions -

    1. Yes. You can host on blob storage and setup static website hosting as well. You might also want to look into Azure CDN or Azure Frontdoor to speed up delivery on your static assets.

      But if you require Server Side Rendering and/or Azure AD authentication for you UI as well, you will have to use a Web App.

    2. The recommended way to perform authentications according to OAuth / OpenID Connect specifications is the flow where you the user logs into the authentication server (here Azure AD) which redirects them to the client application passing along an authorization code which later exchanged for an access token and refresh token.

      Another option is the Implicit Flow which is usually used in Single Page Applications where the app directly gets the tokens from Azure AD.

      And the requirement where you want your users to login from your app itself, you would use the Resource Owner Password Credentials flow where you directly call the Azure AD endpoint with the username and password to get the access token in return.

    You can read more about the different OAuth 2.0 and OpenID Connect protocols supported by Azure AD in the docs.