Email with password sign-in

Online retail demo

The online retail use case is an end-to-end demonstration that illustrates several of the most common authentication experiences that can be configured for your customer-facing apps. To run the use case, follow these steps:

Select the start the use case button at the bottom of this page.
From the sign-in page select No account? Create one.
Enter your email address, which will be verified and becomes your login ID.
Open your mailbox and copy the verification code sent to you. Then, on the sign-in page enter the verification code and select next.
After the email was verified, enter a password, and re-enter the password, and enter your account details.
Select next to complete the registration.

Start the use case

Learn how we configured the Woodgrove tenant

Learn more about this use case

Sign-up or sign-in with email and password

Create a new Woodgrove account

Select the start the use case button at the bottom of this page.
From the sign-in page select No account? Create one.
Enter your email address, which will be verified and becomes your login ID.
Open your mailbox and copy the verification code sent to you. Then, on the sign-in page enter the verification code and select next.
After the email was verified, enter a password, and re-enter the password, and enter your account details.
Select next to complete the registration.

Sign-in with your Woodgrove account

Select the start the use case button at the bottom of this page.
On the sign-in page, enter your email, and select next.
Enter your password and select sign in.

Start the use case

Learn how we configured the Woodgrove tenant

Company branding

You can create a custom look and feel for users signing in to your apps. With these settings, you can add your own background images, colors, company logos, and text to customize the sign-in experiences across your apps. So that the sign-in page blends seamlessly into woodgrove applications’ look and feel. For more information, learn how to customize the neutral branding in your customer tenant.

Select the start the use case button at the bottom of this page.
On the sign-in page take a look on the header, the header logo, the banner logo, the title, buttons, and the background image which are all customized.
The sign-in text appears with some guidance for the users
The footer contains links to the term of use and privacy policies. Both the links and the text can be customized
Every text on the screen can be localized.

Start the use case

Learn how we configured the Woodgrove tenant

Custom domain

The custom URL domain provides a more seamless user experience. From the user's perspective, they remain in your domain during the sign in process rather than redirecting to the Microsoft Entra external ID default domain {tenant-name}.ciamlogin.com. Note, this feature is currently in private preview and also limited to sign-in with local accounts. Social accounts such as Google or Facebook are not yet supported.

Select the start the use case button at the bottom of this page.
Take a look on the URL in the web browser address bar. It should be login.woodgrovedemo.com
You can sign-up or sign-in with local account. Do NOT use the Facebook or Google options.

Start the use case

Language customization

You can create a personalized sign-in experience for users who sign in using a specific browser language by customizing the branding elements for that browser language. This customization overrides any configurations made to the default branding. For more information, learn how to customize the language of the authentication experience.

Make sure your browser is configure to any language other than German
Select the start the use case button at the bottom of this page.
On the sign-in page take a look on the login text that appears under the login button.
The sign-in text appears with some guidance for the users in English. It will remain in English for other languages as well.
Now, change your browser settings to German and refresh the page
The sign-in text now should appear in German. This is because we configured a special branding for the German language

Start the use case

Learn how we configured the Woodgrove tenant

Preselect a language

Duing the sign-up or sign-in flow, the user's language is dictated by their browser's settings. Application can pass the ui_locales and mkt parameters with a specific language.

Select one a language and start the demo:

Start the use case

Self-service password reset

Self-service password reset (SSPR) gives users the ability to change or reset their password, with no administrator or help desk involvement. If a user's account is locked or they forget their password, they can follow prompts to unblock themselves and get back to work. For more information, learn how to enable self-service password reset.

Before you start, make sure you've created an account with Woodgrove Groceries using the Sign-up or sign-in with email and password flow.

Select the start the use case button at the bottom of this page.
On the sign-in page, enter your email, and select next.
Select the Forgot password? link.
Open your mailbox and copy the verification code sent to you. Then, on the sign-in page enter the verification code and select next.
After your email was verified, enter a password, and re-enter the password and select next to update your password.

Start the use case

Learn how we configured the Woodgrove tenant

Sign-in with social accounts

Users can sign in with their existing social accounts, without having to create a new account. For more information, learn how to add Google and Facebook identity providers.

Select the start the use case button at the bottom of this page.
From the sign-in page, select Google. Then you will be redirected to Google sign-in page.
If asked, consent to grant the permissions that Microsoft Entra external ID is requesting.
Upon first sign-in, complete the registration by entering your account details.
Select next to create the Woodgrove account.

Start the use case

Learn how we configured the Woodgrove tenant

Prepopulate the sign in name

During a sign-in an application may target a specific user. When targeting a user, an application can specify, in the authorization request, the 'login_hint' query parameter with the user sign-in name. Microsoft Entra external ID automatically populates the sign-in name, while the user only needs to provide the password.

Enter a username: Make sure you enter an account that exists in the directory.
Select the start the use case button at the bottom of this page.
From the sign-in page, notice that the username aleardy entered.
Enter your password and sign-in.

Start the use case

Sign-up with email one-time passcode

Email with one-time passcode is an option in your local account identity provider settings. With this option, the customer signs in with a temporary passcode instead of a stored password each time they sign in.

Create a new Woodgrove account

Select the start the use case button at the bottom of this page.
From the sign-in page select No account? Create one.
Enter your email address, which will be verified and becomes your login ID.
Open your mailbox and copy the verification code sent to you. Then, on the sign-in page enter the verification code and select next.
After the email was verified, enter your account details.
Select next to complete the registration.

Sign-in with your email

Select the start the use case button at the bottom of this page.
On the sign-in page, enter your email, and select next.
Open your mailbox and copy the verification code sent to you. Then, on the sign-in page enter the verification code and select next.

Start the use case

Conditional Access and Multifactor authentication (MFA)

Microsoft Entra Conditional Access brings signals together, to make decisions, and enforce security policies. Multifactor authentication (MFA) protects customers identity by prompting them for a second verification method. For more information, learn how to add MFA.

In this demo a Conditional Access policy that's targeted to all users when the sign-in risk level is medium or high, prompts for MFA.

Select the start the use case button at the bottom of this page.
Sign-up or sign-in with your email, or a social account.
As a secdond factor authenticate, Microsoft Entra ID will send you a verification code to your email or phone that you need to complete.

Start the use case

Learn how we configured the Woodgrove tenant

Restrict app to a set of users

Applications registered in a Microsoft Entra tenant are, by default, available to all users of the tenant who authenticate successfully. You can configure your application to be restricted to a certain set of users or apps.

In this demo only selected users (Woodgrove partners) can sign-in to the Woodgrove partners portal. Other users are not allowed to sign-in.

Select the start the use case button at the bottom of this page.
Sign-up or sign-in with your email, or a social account.
After you completed the sign-in, you will get an error message that you can't sign-in to the Woodgrove partners portal

Note, in this demo you can't assing youself to the Woodgrove partners portal app. If you are intrested in app assignment, check out the Role based access controll demo

Start the use case

Learn how we configured the Woodgrove tenant

Conditional Access

Microsoft Entra Conditional Access brings signals together, to make decisions, and enforce security policies. Multifactor authentication (MFA) protects customers identity by prompting them for a second verification method. For more information, learn how to add MFA.

In this demo a Conditional Access policy that's targeted to all users when the sign-in risk level is medium or high, prompts for MFA.

Select the start the use case button at the bottom of this page. Sign-up or sign-in with your account.
After you signed-in, proceed to the next step.
For this demo, download and run the Tor Browse. It's an open-source web browser that helps people use the internet anonymously. Therefore, Microsoft Entra ID may consider your sign-in request as suspicious.
In the Tor browser Navigate to https://woodgrovedemo.com
Select the sign-in button.
Sign-in with the same account.
This time you should complete the MFA.

Start the use case

Learn how we configured the Woodgrove tenant

Step-up authentication upon risky action (MFA)

Use the Microsoft Entra Conditional Access engine's authentication context to trigger a demand for step-up authentication from within your application.

This demo allows customer to access the app and purchase items. However, upon risky action, for example When a Woodgrove customer finishes shopping and proceeds to the checkout. If the sum of the items in the shopping cart is higher than usual it requires the customer to sign-in with a strong factor authentication.

Select the start the use case button at the bottom of this page. Sign-in with your account. Note, if you create a new account, you fulfill the MFA requirement since the email is already verified. Therefore, make sure you sign-in with an existing account.
After you singed-in, select this use-case again.

Start the use case

Learn how we configured the Woodgrove tenant

Custom security attribute based conditional access

Application filters for Conditional Access allow you to tag your application with custom attributes. These custom attributes are then added to their Conditional Access policies. Filters for applications are evaluated at token issuance runtime.

In this demo a conditional access block access to all applications tagged as BlockGuestsUsers.

Select the start the use case button at the bottom of this page.
Sign-up or sign-in with your email, or a social account.
Upon successful sign-in you will get an error message that you don't have access to the app.

Start the use case

Learn how we configured the Woodgrove tenant

Add claims to security tokens

When users authenticate to your application with Microsoft Entra External ID, a security token is return to your application. The security token contains claims that are statements about the user, such as name, unique identifier, or application roles. Beyond the default set of claims that are contained in the security token you can add more claims.

This demo shows how to add addtinal attributes to the access and ID tokens.

Select the start the use case button at the bottom of this page.
Sign-up your email, or a social account.
After you validate your email, or sign-in with your social account, complete the registration by providing your details. The special diet is a custom attribute you can provide. For the demo enter, Egg allergy This attribute will be included in the security token that return to the Woodgrove application.
From the Woodgrove header, select your name, which will take you to the security token page. The security token page contains the claims that return by Microsoft Entra External ID. Look for the special diet claim

Start the use case

Add claims to security tokens from a REST API

When users authenticate to your application with Microsoft Entra External ID, a security token is return to your application. The security token contains claims that are statements about the user, such as name, unique identifier, or application roles.

Beyond the default set of claims that are contained in the security token you can add custom claims from external systems using a REST API you develop. For more information, learn how to configure a custom claim provider token issuance event.

Select the start the use case button at the bottom of this page.
Sign-up or sign-in with your email, or a social account.
From the Woodgrove header, select your name, which will take you to the security token page.
The security token page contains the claims that return by Microsoft Entra External ID. Locate the loyaltyNumber, loyaltySince, and loyaltyTier claims and check their value. These claims were returned by a custom authentication extension REST API with some random values.

Start the use case

Learn how we configured the Woodgrove tenant

OAuth 2.0 On-Behalf-Of flow

The on-behalf-of (OBO) flow describes the scenario of a web API using an identity other than its own to call another downstream web API. For the middle-tier web API to make authenticated requests to the downstream web API it needs a different audience and another set of scopes (permissions). For more information, Microsoft identity platform and OAuth 2.0 On-Behalf-Of flow

This demo shows how the Account web API makes authenticated requests to a downstream Payment web API. To call the Payment web API, the Account web API acquires an access token for the Payment web API (audience or aud claim) and another set of scopes (permissions) that require by the Payment web API.

Select the start the use case button at the bottom of this page.
Sign-up or sign-in with your email, or a social account.
After you sign-in you will be redirected to the token page. You can also select your name from the header.
Then, select the Access token to call a web API button.
It shows you two links to the https://jwt.ms app with the corresponding access tokens. The first access token is the one returned to the Woodgrove demo application and used to call the first web API (Account). The second one shows the access token the Account web API acquires to call the Payment web API.
Compare the access tokens to understand the on-behalf-of flow.

Start the use case

Learn how we configured the Woodgrove tenant

Prepopulate sign-up attributes

The custom authentication extension supports the on attribute collection start event. This event occurs at the beginning of the attribute collection step, before the attribute collection page renders. You can add actions such as prefilling values and displaying a blocking error. This demo shows how to prepopulate some of the values, including pre selecting the country attribute with spain and generating and set the value of the promo code attribute.

To start the demo:

Select the start the use case button at the bottom of this page.
Sign-up with your email, or a social account. For more information, sign-up or sign-in with email and password. If you already have an account, delete it.
After you validate your email, or sign-in first time with your social account, you will be taken to the sign-up page.
On the sign-up page notice that the Spain country was selected for you. Also at the bottom of the page you can see that the promo code was generated and entered for you. Both values were provided by a custom authentication extension.

Start the use case

Learn how we configured the Woodgrove tenant

Validate sign-up attributes

The custom authentication extension supports the on attribute collection submit event. This event allows you to perform validation on attributes collected from the user during sign-up. This demo validates the city name against a list of cities and countries compiled in the Woodgrove custom authentication extension REST API.

Select the start the use case button at the bottom of this page.
Sign-up with your email, or a social account. If you already have an account, delete it.
After you validate your email, or sign-in with your social account, complete the registration by providing your details. For the country, leave the Spain selected, and then for the city Berlin (Berlin is not a city in Spain).
Select next to create a Woodgrove online identity. And you should get an error message that Woodgrove doesn’t operate in this city. Because Berlin is a city in Germany, not in Spain.
Corrects the city name. For example, enter Madrid and try to complete the registration again.

Start the use case

Learn how we configured the Woodgrove tenant

Modify sign-up's attribute values

The custom authentication extension supports the on attribute collection submit event. These event allows you to modify and override attributes provided by the user. This example shows how to modify the display name and the name of the city.

Select the start the use case button at the bottom of this page.
Sign-up with your email, or a social account. If you already have an account, delete it.
After you validate your email, or sign-in with your social account, enter a display name in upper case. For example, DAVID
For the city attribute, enter modify.
Select next to try to create a Woodgrove online identity. At this time the custom authentication extension will capitalize the dispaly name (only first leter in upper case). The city will be modified to Madrid.
Select your name from the header, it shows the content of the access token.

Start the use case

Learn how we configured the Woodgrove tenant

Block a user from continuing the sign-up process

The custom authentication extension supports the on attribute collection submit event. These event allows you to block the user from continuing the sign-up process. For example, you could use an identity verification service or external identity data source to verify the user's email address. This demo validates uses the on attribute collection submit even to check the value of the city attribute and block the process.

Select the start the use case button at the bottom of this page.
Sign-up with your email, or a social account. If you already have an account, delete it.
After you validate your email, or sign-in with your social account, complete the registration by providing your details.
For the city attribute, enter block.
Select next to try to create a Woodgrove online identity. At this time the sign-up process will be canceled all together. This is because the custom authentication extension checks the city value. If it contains block, it returns the show block page action.

Start the use case

Learn how we configured the Woodgrove tenant

Role-based access control

Role-based access control is a popular mechanism to enforce authorization in applications. It helps you manage who has access to your application and what they can do in the application. In this demo, you assign yourself to application roles which are automatically approved.

To start the demo:

Select the start the use case button at the bottom of this page.
Sign-up or sign-in with your email, or a social account.
From the Woodgrove header, select the profile button.
In profile page add yourself the Products.Contributor and Orders.Manager roles.
To reflect the changes in the security token, sign-in again with the same account (you won't be asked to enter the credentials).
After you sign-in, the Manage products and Orders buttons appear in the header.
Select your name from the header to show the security token. It should contain the role claims you assigned to.

Start the use case

Learn how we configured the Woodgrove tenant

Group-based access control

Group-based access control is a popular mechanism to enforce authorization in applications. It helps you manage who has access to your application and what they can do in the application. You can also alter the UI based on the user's membership.

In this demo, you add yourself to the Commercial Accounts security group and you will get a discount for some of the products.

To start the demo:

Select the start the use case button at the bottom of this page.
Sign-up or sign-in with your email, or a social account.
From the Woodgrove header, select the profile button.
In profile page, add yourself to the Commercial Accounts security group and update your account.
To reflect the changes in the security token, sign-in again with the same account (you won't be asked to enter the credentials).
Now that you are a member of the Commercial Accounts security group, you get a discount to some of the products.

Start the use case

Learn how we configured the Woodgrove tenant

Note, if you select your name from the header, it shows the content of the access token issued by Microsoft Entra External ID that was returned to the application. It should contain the groups claims. This demo application checks the claim’s value and gives you the discounts.

Collect user attributes during sign-up

User attributes are values collected from the user during self-service sign-up. In the user flow settings, you can select from a set of built-in user attributes you want to collect from customers. You can also create custom user attributes and add them to your sign-up user flow. For more information, learn how to collect user attributes during sign-up.

On the sign-up page the user enters the information, and it's stored with their profile in your directory. This demo shows the use of built-in attribute and custom attribute called special diet. To start the demo:

Select the start the use case button at the bottom of this page.
Sign-up with your email, or a social account. For more information, sign-up or sign-in with email and password. If you already have an account, delete it.
After you validate your email, or sign-in with your social account, complete the registration by providing your details. The special diet is a custom attribute you can provide. For the demo enter, Egg allergy This attribute will be included in the security token that return to the Woodgrove application.
Select next to create a Woodgrove online identity.
After you successfully sign-in, in the home page, the Eggs product will show an allergy warning.

Start the use case

Learn how we configured the Woodgrove tenant

Add links to terms of use and privacy policies

Terms of use, also known as terms and conditions or terms of service, are rules, specifications, and requirements for the use of your app. Microsoft Entra external ID allows you to add a custom attribute (type of Boolean) to the sign-up page. Before completing the sign-up, users should read and accept your policies. For more information, learn how to collect user attributes during sign-up and configure a single-select checkbox.

This demo shows to add links to terms of use and privacy policies. To start the demo:

Select the start the use case button at the bottom of this page.
Sign-up with your email, or a social account. For more information, sign-up or sign-in with email and password. If you already have an account, delete it.
After you validate your email, or sign-in with your social account, complete the registration by providing your details.
Select the terms of use and privacy policies links which will be opened in a new browser tab. Then, close the tabs and go back to the sign-up page, and select the checkbox.
Select next to create a Woodgrove online identity.

Start the use case

Learn how we configured the Woodgrove tenant

Single sign-on (SSO)

Single sign-on (SSO) adds security and convenience when users sign-in across multiple applications in Microsoft Entra ID. With single sign-on, users sign-in once with a single account and get access to multiple applications. When the user initially signs-in to an application, Microsoft Entra ID initiates a single sign-on session. Upon subsequent authentication requests, Microsoft Entra ID validates the session, and issues a security token without prompting the user to sign in again.

Follow these steps to check out the SSO feature:

Start by signing-in to this application. You may need use the InPrivate mode in Microsoft Edge.
Select the start the use case button at the bottom of this page.
After you sign-in, come back to this dialog page and follow the instructions.

Start the use case

Token lifetime (not confirmed)

For tests only! You can specify the lifetime of an access token, ID token, or SAML token issued by the Microsoft Entra ID. You can set token lifetimes for all apps in your tenant, or for service principals. You cannot set token lifetime policies for refresh tokens and session tokens.

Select the start the use case button at the bottom of this page.
Sign-up or sign-in with your email, or a social account.
Select your name from the header to show the security token. Scroll down to check your token expiration.

Start the use case

Learn how we configured the Woodgrove tenant

Force sign-in

Single sign-on (SSO) adds security and convenience when users sign-in across multiple applications in Microsoft Entra ID. With single sign-on, users sign-in once with a single account and get access to multiple applications. When the user initially signs-in to an application, Microsoft Entra ID initiates a single sign-on session. Upon subsequent authentication requests, Microsoft Entra ID validates the session, and issues a security token without prompting the user to sign in again.

You can force the user to enter their credentials on a sign-in request, negating single-sign on session. To do so, select the start the use case button at the bottom of this page.

Start the use case

Learn how we configured the Woodgrove tenant

Input constrained devices (Kiosk)

Input-constrained devices are devices that their screen or monitor is limited to text-only and they don't have a web browser. For example, smart TV, IoT device, robot, gaming console, printers. Or applications with limited user interface, such as a command line application.

These devices are connected to the internet, but due to the input constrains, the authentication should be done on another device. The input constrained device gets a device code from Microsoft Entra External ID and asks the user to visit a webpage in a browser on a second (rich device), such as smartphone, tablets, or PCs.

In this use case, from the Kiosk page select sign-in. Use the second device, such as smartphone and scan the QR code. On the sign-in page enters the device code, and completes the sign-in. Once you signed in, the Kiosk (input-constrained device) is able to get security tokens and authenticate you. Your name should be presented on the top-right corner of the page.

Start the use case

Finance

The Woodgrove Bank demo application illustrates the sign-up and sign-in authentication experiences for financial scenarios. It also demonstrates the SAML protocol federation with Microsoft Entra External ID.

Start the use case

Edit your account

Profile editing lets you manage you profile attributes, like display name, surname, given name, city, and others.

Select the start the use case button at the bottom of this page.
After you update your profile, sign-in again to refresh the security token.

Edit your account

Learn how we configured the Woodgrove tenant

Delete your account

If you would like to delete your account and personal information, visit the delete my account page. You won't be able to reactivate your account. In a couple of minutes you will be able to sign-up again with the same credentials.

Delete your account

Learn how we configured the Woodgrove tenant

Disable an account

Disabling an account can be a critical step for businesses in managing their security and operational efficiency. When an account is disabled, it prevents unauthorized access to your application. This demo allows you to disable your account. Keep in mind that you will not be able to sign-in and enabled your account. Therefore, use a temporary email for this use case.

Select the start the use case button at the bottom of this page.
Sign-up or sign-in with your email, or a social account.
After you sign-in, you will be taken to the profile page.
Uncheck the Enable checkbox and select Save.
Wait for a couple of seconds and try to sign-in again.

Start the use case

Learn how we configured the Woodgrove tenant

Your last activity

Find information about your last activity, including: when your account was created, last time you sign-in and last time you reset your password.

Select the start the use case button at the bottom of this page.
Sign-up or sign-in with your email, or a social account.
From the Woodgrove header select the profile icon, or select the Check your activity button below which will take you to the edit profile page.
Scroll down to the Sign-in activity to check your activity information.

Start the use case

Learn how we configured the Woodgrove tenant

Application user activity insights

The user insights provides data analytics into user activity and engagement for your registered applications within your customer tenant.

Use Microsoft Graph and the Microsoft Entra Admin Center to view, query and analyze user activity data. For more information, learn Gain insights into your app users’ activity.

This demo uses Microsoft Graph API to query the usage & insights (daily and monthly) to uncover valuable insights that can aid strategic decisions and drive business growth.

Start the use case

Sing-in logs

Microsoft Entra ID emits sign-in logs containing activity information. Each sign-in attempt contains details associated with those three main components:
Who: The identity (User) doing the sign-in. How: The client (Application) used for the access. And What: The target (Resource) accessed by the identity.

You can use the sign-in logs to answer questions such as: How many users signed into a particular application this week? How many failed sign-in attempts occurred in the last 24 hours? Are users signing in from specific browsers or operating systems?

Learn how we configured the Woodgrove tenant

Automation with GitHub Workflows

Microsoft Graph PowerShell is a robust solution for automating tasks, executing batch operations, maintaining and ensuring consistency across different stages such as test, preproduction, and production environments.

With GitHub workflow you can automate process that will run one or more jobs. Their benefits in accelerating and stabilizing the deployment process to Microsoft Entra's external ID. It leads to a significant reduction in integration issues, faster release cycles, enhance change management, and consistency that are crucial for maintaining data integrity and smooth and seamless deployment during updates and modifications.

Learn how to use GitHub workflow

Enable email with password sign-in

Prerequisites

Well done!

About the demo

Sign-in

Sign-up

User profile

Security

Access management

User experience

Token and session

Reports and auditing

Advanced scenarios

Woodgrove Groceries live demo

Online retail demo

Sign-up or sign-in with email and password

Create a new Woodgrove account

Sign-in with your Woodgrove account

Company branding

Custom domain

Language customization

Preselect a language

Self-service password reset

Sign-in with social accounts

Prepopulate the sign in name

Sign-up with email one-time passcode

Create a new Woodgrove account

Sign-in with your email

Conditional Access and Multifactor authentication (MFA)

Restrict app to a set of users

Conditional Access

Step-up authentication upon risky action (MFA)

Custom security attribute based conditional access

Add claims to security tokens

Add claims to security tokens from a REST API

OAuth 2.0 On-Behalf-Of flow

Prepopulate sign-up attributes

Validate sign-up attributes

Modify sign-up's attribute values

Block a user from continuing the sign-up process

Role-based access control

Group-based access control

Collect user attributes during sign-up

Add links to terms of use and privacy policies

Single sign-on (SSO)

Token lifetime (not confirmed)

Force sign-in

Input constrained devices (Kiosk)

Finance

Edit your account

Delete your account

Disable an account

Your last activity

Application user activity insights

Sing-in logs

Automation with GitHub Workflows