Single Page Application with Azure Entra ID authentication using MSAL
npm install spa-entra-idA modern Single Page Application (SPA) built with TypeScript and Vite that implements Azure Entra ID authentication using the Microsoft Authentication Library (MSAL).
- š Azure Entra ID authentication with MSAL
- šØ Modern, responsive UI design
- š± TypeScript for type safety
- š Fast development with Vite
- š¤ Microsoft Graph API integration for user profiles
- š Automatic token refresh handling
- š¦ Available as an npx package for easy deployment
You can run this application directly with npx (once published):
``bash`
npx spa-entra-id
This will:
- Automatically build the application if needed
- Start the server on https://localhost:5001
- Open your browser (if configured)
Before running this application, you need to:
1. Create an Azure App Registration:
- Go to Azure Portal
- Navigate to "Azure Active Directory" > "App registrations"
- Click "New registration"
- Set the redirect URI to: https://localhost:5001/auth.html
- Note down the Application (client) ID and Directory (tenant) ID
2. Configure API permissions:
- In your app registration, go to "API permissions"
- Add Microsoft Graph > Delegated permissions > User.Read
1. Clone and install dependencies:
`bash`
git clone
cd spa-entra-id
npm install
2. Configure authentication:
- Open src/config.tsYOUR_CLIENT_ID
- Replace with your Application (client) IDYOUR_TENANT_ID
- Replace with your Directory (tenant) ID
3. Start the development server:
`bash`
npm run dev
4. Access the application:
- Open your browser to https://localhost:5001
- The application will prompt you to sign in with your Azure credentials
To publish this as an npx package:
1. Build the application:
`bash`
npm run build
2. Update package.json:
- Set a unique name for your package
- Update the version number
- Add your author information
3. Publish to npm:
`bash`
npm publish
4. Users can then run:
`bash`
npx your-package-name
- npm run dev - Start development server on port 5001npm run build
- - Build the application for productionnpm run preview
- - Preview the built applicationnpx spa-entra-id
- - Run the built application (when published)
`
src/
āāā config.ts # MSAL configuration and settings
āāā authService.ts # Authentication service class
āāā uiManager.ts # UI management and state handling
āāā main.ts # Main application entry point
āāā auth.ts # Authentication callback handler
auth.html # Authentication redirect URI page
index.html # Main application page
vite.config.ts # Vite configuration
`
The application is configured to use:
- Port: 5001
- Redirect URI: https://localhost:5001/auth.html/me
- Authentication Method: Popup flow
- Token Storage: Session storage
- Graph API Endpoint: User profile ()
- All authentication tokens are stored in session storage
- The application implements proper CSRF protection through MSAL
- Tokens are automatically refreshed when needed
- Proper error handling for authentication failures
To customize the application:
1. Modify authentication scopes in src/config.tssrc/authService.ts
2. Add new Graph API calls in src/uiManager.ts
3. Update UI components in vite.config.ts
4. Configure additional settings in
`bash`
npm run build
The built files will be in the dist/` directory.
- Authentication fails: Check your client ID and tenant ID in config.ts
- Redirect issues: Ensure the redirect URI matches exactly in Azure and your config
- HTTPS issues: Make sure you're accessing the app via HTTPS in production
- Token issues: Clear browser storage and try signing in again
MIT