In the previous article Implicit Flow in SPA with Azure Ad I tried to learn how to use the Azure Ad Implicit flow to login to Single Page Application.
Azure AD B2C documentation on Microsoft is very elaborate and will take you through the steps from Creating a tenant in Azure to running an application.
If you have gone through the previous article, I had use MSAL.js in the client app to implement the login flow.
If you want to follow the steps you can refer the code hosted on Github AzureAd Samples under the SPA_B2C folder.
I have tried to implement only signup and sign-in flow.
If you follow the steps in the documentation you will have an Azure Ad B2c tenant and user flow to sign in and sign up a user.
you would need to create a .env.developement file next to the .env file in the root folder and update the following variables
If you do not know about React environment variables have a read at Adding custom environment variables
Also, I am loading the SPA from the aspnet core web app. So in my case, the redirect URL in the app registration is https://localhost:44321, which can be found in the launchSettings.json
If you run the aspnet core web app and navigate to https://localhost:44321 on your favorite browser. you will see an empty page with a Sign-in button.
There are 2 flows that can be used
- Popup flow where a separate popup window will open to login
- Redirect flow
If you just check out the repo you will see the redirect flow and if you wanna see the popup action you need to be on the corresponding commit
There are some known issues with IE.
If everything is configured properly you should see your custom ui page after clicking the login button
You can hit sign up to register a new user.
Note: The order of the fields on the signup page will be what is set in the Page layouts in the Azure Ad B2C. If, you want to chage the order you can do in Azure
Also, you can set which fields are optional or not.
You will need a real email for verification. This is the first step in the registration process.
After you get the email with verification code you can finish the registration process.
If the user is created successfully and logged in you will see the next page in the app.
logout button does not work at the time when I am writing this article but it may be in when you are reading :)
Next article I will be doing how to access the API and get the weather summaries.
Cheers
Happy coding.
Azure AD B2C documentation on Microsoft is very elaborate and will take you through the steps from Creating a tenant in Azure to running an application.
Currently, you cannot create an Azure B2C tenant in Australia
If you have gone through the previous article, I had use MSAL.js in the client app to implement the login flow.
If you want to follow the steps you can refer the code hosted on Github AzureAd Samples under the SPA_B2C folder.
I have tried to implement only signup and sign-in flow.
If you follow the steps in the documentation you will have an Azure Ad B2c tenant and user flow to sign in and sign up a user.
you would need to create a .env.developement file next to the .env file in the root folder and update the following variables
REACT_APP_CLIENT_ID=
REACT_APP_TENANT_ID=
REACT_APP_TENANT_NAME=
REACT_APP_SUSI_FLOW_ID=
If you do not know about React environment variables have a read at Adding custom environment variables
Also, I am loading the SPA from the aspnet core web app. So in my case, the redirect URL in the app registration is https://localhost:44321, which can be found in the launchSettings.json
If you run the aspnet core web app and navigate to https://localhost:44321 on your favorite browser. you will see an empty page with a Sign-in button.
There are 2 flows that can be used
- Popup flow where a separate popup window will open to login
- Redirect flow
If you just check out the repo you will see the redirect flow and if you wanna see the popup action you need to be on the corresponding commit
There are some known issues with IE.
If everything is configured properly you should see your custom ui page after clicking the login button
Note: The order of the fields on the signup page will be what is set in the Page layouts in the Azure Ad B2C. If, you want to chage the order you can do in Azure
Also, you can set which fields are optional or not.
You will need a real email for verification. This is the first step in the registration process.
If the user is created successfully and logged in you will see the next page in the app.
Next article I will be doing how to access the API and get the weather summaries.
Cheers
Happy coding.
