Skip to content
Draft
Show file tree
Hide file tree
Changes from 24 commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
7ab3ca5
Add non-OTP E2E tests
yongdiw Jun 29, 2025
691f7fe
Update readme and cors local proxy
yongdiw Jun 30, 2025
f3f09cd
Update readme
yongdiw Jun 30, 2025
df68348
Update readme
yongdiw Jun 30, 2025
ec8919c
Merge branch 'dev' into yongdi/e2e-test-non-otp
yongdiw Aug 7, 2025
9952463
Update unit tests
yongdiw Aug 7, 2025
fb9649a
Merge branch 'yongdi/e2e-test-non-otp' of https://github.com/AzureAD/…
yongdiw Aug 7, 2025
476470a
Revert testConfig
yongdiw Aug 7, 2025
e1d505b
Rename variables, umd build file
yongdiw Aug 8, 2025
133e442
Change files
yongdiw Aug 8, 2025
e94a00a
Rename incorrect pwd
yongdiw Aug 8, 2025
53e1798
Rename incorrect pwd 2
yongdiw Aug 8, 2025
c3efce6
Invalid Password
yongdiw Aug 8, 2025
4d9938d
Update JIT, MFA test cases
yongdiw Aug 8, 2025
70af04d
Update sign up test cases
yongdiw Aug 10, 2025
9650831
Merge branch 'dev' into yongdi/e2e-test-non-otp
yongdiw Aug 19, 2025
54d0520
Update config parser and tests
yongdiw Aug 22, 2025
4c0c3f0
Merge branch 'dev' into yongdi/e2e-test-non-otp
yongdiw Aug 22, 2025
23358a8
Merge branch 'dev' into yongdi/e2e-test-non-otp
yongdiw Aug 25, 2025
0385773
Fix redirect error message
yongdiw Aug 25, 2025
af5af15
Merge branch 'dev' into yongdi/e2e-test-non-otp
yongdiw Nov 24, 2025
d28e9c4
Update ps script
yongdiw Nov 26, 2025
bcea048
Update email provider, sign up tests and local test script
yongdiw Dec 2, 2025
2df12e7
Update all tests
yongdiw Dec 2, 2025
8a59a62
Update owner file
yongdiw Dec 3, 2025
fcd2417
All other updates
yongdiw Dec 3, 2025
bfd360d
Merge branch 'dev' into yongdi/e2e-test-non-otp
yongdiw Dec 3, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .pipelines/3p-e2e.yml
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,7 @@ extends:
- "onPageLoad"
- "pop"
- "customizable-e2e-test"
- "nativeAuthSample"
- "ExpressSample"
debug: ${{ parameters.debug }}
npmInstallTimeout: ${{ parameters.npmInstallTimeout }}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "patch",
"comment": "Add non-OTP E2E tests",
"packageName": "@azure/msal-browser",
"email": "[email protected]",
"dependentChangeType": "patch"
}
31 changes: 31 additions & 0 deletions lib/msal-browser/rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -182,4 +182,35 @@ export default [
}),
],
},
{
// Custom Auth - UMD build
input: "src/custom_auth/index.ts",
output: [
{
dir: "lib/custom-auth-path",
format: "umd",
name: "msalCustomAuth",
banner: fileHeader,
inlineDynamicImports: true,
sourcemap: true,
entryFileNames: "msal-custom-auth.js",
},
],
plugins: [
nodeResolve({
browser: true,
resolveOnly: ["@azure/msal-common", "tslib"],
}),
typescript({
typescript: require("typescript"),
tsconfig: "tsconfig.custom-auth.build.json",
sourceMap: true,
compilerOptions: {
outDir: "lib/custom-auth-path/types",
declaration: false,
declarationMap: false,
},
}),
],
},
];
Original file line number Diff line number Diff line change
@@ -0,0 +1,331 @@
# MSAL Native Auth Sample

This sample demonstrates how to use the Native Authentication capabilities of the Microsoft Authentication Library (MSAL) for JavaScript in a browser environment. Native Authentication provides a customizable and secure way to implement authentication flows directly in your application.

[Previous sections remain unchanged up to Authentication Flow Configurations]

## Authentication Flow Configurations

Each authentication flow requires specific query parameters to configure the correct endpoint:

1. Email + Password Flow:
```
?usePwdConfig=true
```

2. Email + OTP Flow:
```
?useOtpConfig=true
```

3. Email + Password Redirect Flow:
```
?useOtpConfig=true&useRedirectConfig=true
```

## All E2E Tests

### Sign In Tests (`signin.spec.ts`)

#### 1. Password-based Authentication

2. **Install dependencies**:

```bash
npm install
```

3. **Build project**:

Build msal-browser package

```bash
npm run build:package
```

Build msal-node package

```bash
cd ../../../lib/msal-node && npm run build:all
```

4. **Configure the application**:

Open `app/authConfig.js` and update with your settings:

```javascript
const msalConfig = {
customAuth: {
challengeTypes: ["password", "oob", "redirect"],
authApiProxyUrl: "YOUR_AUTH_PROXY_URL",
},
auth: {
clientId: "YOUR_CLIENT_ID",
authority: "https://YOUR_TENANT.ciamlogin.com",
redirectUri: "/",
},
// Additional configuration...
};
```

5. **Locate folder VanillaJSTestApp2.0 folder and start the development server**:

```bash
npm start -- --port 30670 --sample nativeAuthSample
```

6. **Open your browser**:

Navigate to [http://localhost:30670](http://localhost:30670)

## Authentication Flows

### Sign In

The sample supports multiple sign-in methods:

1. **Email/Password Authentication**:
- Enter email/username
- Provide password
- Submit for authentication

2. **Email OTP Authentication**:
- Enter email address
- Receive one-time code via email
- Enter the code to complete authentication

3. **Redirect Authentication**:
- Enter email address, show redirect error

### Sign Up

The sign-up flow includes:

1. **Email/Password**:
- Enter email address and user attributes
- Verify email with a verification code
- Create a password
- Complete account creation

2. **Email OTP Authentication**:
- Enter email address and user attributes
- Verify email with a verification code
- Complete account creation

### Password Reset

The password reset flow allows users to:

1. Request a password reset using their email
2. Receive a verification code via email
3. Verify the code
4. Create a new password
5. Complete password reset

## Project Structure

The sample application is organized into the following structure:

```
nativeAuthSample/
├── app/ # Application source code
│ ├── app.js # Main application logic
│ ├── authConfig.js # MSAL configuration
│ ├── ui.js # UI handling functions
│ ├── utilities.js # Helper functions
│ ├── UserAccountAttributes.js # User account management
│ ├── signin/ # Sign-in implementation
│ ├── signup/ # Sign-up implementation
│ └── resetPassword/ # Password reset implementation
├── test/ # Test files
│ ├── proxyUtils.ts # Test proxy utilities
│ ├── signin.spec.ts # Sign-in tests
│ ├── signup.spec.ts # Sign-up tests
│ ├── signout.spec.ts # Sign-out tests
│ ├── resetpassword.spec.ts # Password reset tests
│ └── screenshots/ # Test result screenshots
├── index.html # Application entry point
├── styles.css # Application styles
├── cors.js # CORS configuration
├── jest.config.cjs # Jest test configuration
└── package-lock.json # Dependencies lock file
```

## Key Components

### CustomAuthPublicClientApplication

The core class that provides Native Authentication capabilities:

- `signIn(signInInputs)`: Initiates sign-in flow
- `getCurrentAccount(accountInputs)`: Retrieves current account
- `signUp(signUpInputs)`: Initiates sign-up flow
- `resetPassword(resetPasswordInputs)`: Initiates password reset

### Configuration

The `CustomAuthConfiguration` object includes:

- Standard MSAL configuration (`auth`, `cache`, `system`)
- Custom auth configuration (`customAuth.authApiProxyUrl`, `customAuth.challengeTypes`)

## E2E test

1. **Execute init.ps file to set up env variables**

Under microsoft-authentication-library-for-js:
```bash
gen_env.ps1
```

2. **Locate VanillaJSTestApp2.0 folder and run below command**

```bash
npm run test:e2e -- --sample=nativeAuthSample --detectOpenHandles --forceExit --reporters=default --reporters=jest-junit
```

## Authentication Flow Configurations

Each authentication flow requires specific query parameters to configure the correct endpoint:

1. Email + Password Flow:
```
?usePwdConfig=true
```

2. Email + OTP Flow:
```
?useOtpConfig=true
```

3. Email + Password Redirect Flow:
```
?useOtpConfig=true&useRedirectConfig=true
```

## End-to-End Test Cases

### 1. Sign Up Tests

#### Email + Password Authentication

##### Positive Cases

* User inputs new email and user attributes, verifies code, creates password meeting requirements, completes sign up flow, then automatically sign-in.
* User inputs new email and user attributes, enters incorrect verification code, resend code, verifies code, creates password meeting requirements, completes sign up flow, then automatically sign-in.
* User inputs new email, verifies code, creates password meeting requirements, give user attributes, completes sign up flow, then automatically sign-in.
* User inputs new email and password, verifies code, give user attributes, completes sign up flow, then automatically sign-in.
* User inputs new email, password and user attributes, verifies code, completes sign up flow, then automatically sign-in.

##### Negative Cases

* User makes a request with invalid format email address, receives invalid email error.
* User inputs new email, verifies code, creates invalid password (does not meet requirements), receives sign up error.
* User inputs existing email (registered with email + Password), receives user existed error.
* User inputs new email and invalid attributes, receives validation error.
* User signs in an existing email, then try to sign up, receives error to sign out first.

##### Email + OTP Authentication

##### Positive Cases

* User enters new email and user attributes, verifies code successfully, completes sign up flow, then automatically sign-in.
* User enters new email and user attributes, uses invalid OTP, requests new code, completes sign up flow, then automatically sign-in.
* User enters new email, verifies code successfully, gives and user attributes, completes sign up flow, then automatically sign-in.

##### Negative Cases

* User makes a request with invalid format email address, receives invalid email error.
* User inputs new email and invalid attributes, receives validation error.

#### Redirect

* Server requires password authentication, which is not supported by the developer (aka redirect flow)

### 2. Sign In Tests

#### Email + Password Authentication

##### Positive Cases

* User inputs registered email, then provides correct password, signs in successfully, check cache tokens use getCurrentAccount.
* User inputs registered email, then provides correct password, signs in successfully, use getCurrentAccount with forceRefresh=true to force refresh tokens, ensure the access token is updated.
* User inputs registered email and password, signs in successfully
* Ability to provide scope to control auth strength of the token

##### Negative Cases

* User inputs non-registered email, receives account not found error
* User inputs registered email, provides incorrect password, receives error
* User signs in with account A, while data for account A already exists
* User email is registered with email OTP auth method, which is supported by the developer

#### Email + OTP Authentication

##### Positive Cases

* User inputs registered email, then receives OTP, verifies successfully
* User inputs registered email and OTP, signs in successfully
* User inputs registered email, enters incorrect OTP code, requests new OTP, enters valid code, signs in successfully

##### Negative Cases

* User inputs non-registered email, receives account not found error

#### Redirct

* User email is registered with email OTP auth method, which is not supported by the developer (aka redirect flow), sign in with pop up login.
* User email is registered with password method, which is not supported by client (aka redirect flow), sign in with pop up login.

### 3. Password Reset Tests

#### Email + Password Authentication

##### Positive Cases

* User requests reset inputs emails, receives code, sets new valid password, completes reset, auto-signs in
* User requests reset inputs emails, provides incorrect verification code, resend code, validates code, sets new valid password, completes reset, auto-signs in

##### Negative Cases

* User submits non-existing email, receives account not found error
* User submits existing email, but email does not linked to any password (registered as email + OTP)
* User submits existing email, receives code, creates invalid password (doesn’t meet password complexity requirements), receives requirements error

#### Redirect

* When SSPR requires a challenge type not supported by the client, redirect to web-fallback

### 4. Sign Out Tests

* User sign in with either email + OTP or email + password flow, click sign out, cache cleared.

### 5. JIT

#### Email + Password Authentication only

##### Positive Cases

* JIT is triggered in continue sign in after sign up - preverified, same email as strong auth method
* JIT is triggered in continue sign in after sign up - use a second email as strong auth method, and use code validation
* JIT is triggered in continue sign in after sign up - use a second email as strong auth method, resend code
* JIT is triggered in sign in flow

##### Negative Cases

* Do not send registration_required capability and receive browserRequired

### 6. MFA

#### Email + Password Authentication only

##### Positive Cases

* Sign in using password with MFA Get Auth Methods then complete successfully
* Sign in Authentication Context Claim Flow is Triggered and access token contains claims

##### Negative Cases

* Do not send mfa_required capability and receive browserRequired
Loading