Microsoft Authentication Library (MSAL) with Nuxt 3 🚀

Demo 🔍

msal-nux3.mp4

Features ✨

• 🔁 Handle Redirect Promise: The plugin handles the redirect promise after login or redirect and obtains the response.
• 🎉 Event Callback on Login Success: An event callback is added to detect login success events, triggering the setup of a token expiration timer.
• ⏰ Token Expiration Timer: A timer is set up to automatically refresh the access token upon expiration.
• 🔄 Refresh Access Token: The plugin can refresh the access token silently using the acquireTokenSilent method.
• 🙌 Handle Response: The plugin handles the response after login or redirect and sets up the token expiration timer if the response includes an account.
• 🔑 Acquire Token Silently: The plugin provides a method to acquire the access token silently.
• 🚀 Sign In with Redirect: Users can sign in with redirect using the signIn method.
• 🔍 Get All MSAL Accounts: The plugin provides a method to retrieve all MSAL accounts.
• 🔒 Check Authentication Status: The isAuthenticated method allows checking if the user is authenticated.
• 👋 Sign Out: Users can sign out using the signOut method.

Installation 🛠️

# Using npm
$ npm install --save @azure/msal-browser

# Using yarn
$ yarn add @azure/msal-browser

Usage 🌟

Register the app on the Azure portal

1. Go to https://portal.azure.com/
2. Search for Azure Active Directory in your organization and select App Registrations from the left panel and click on New registration.

3. Register the application by giving your name, selecting supported account types (who can use this application) based on requirements, and clicking register.

4. Register redirect URL https://yourapplication.com/ or for development http://localhost:3000/

Step 1 :

Step 2 :

Step 3 :

5. Copy the app's essential info, create an .env file at the root of your project and set the value of the below .env variables.

Refer to the image above to set the values for CLIENT and Tenet ID in the following ENV.

CLIENTID=
AUTHORITY=https://login.microsoftonline.com
REDIRECT_URI=http://localhost:3000
POSTLOGOUT_REDIRECT_URI=http://localhost:3000

After Configure ENV

Our Final step

Run development server

npm run dev

Official documentation guide for Register an application with the Microsoft identity platform

• https://learn.microsoft.com/en-gb/azure/active-directory/develop/quickstart-register-app

Repo Tree

📦 
├─ .eslintrc.cjs
├─ .gitignore
├─ .npmrc
├─ README.md
├─ assets
│  ├─ Microsoft_logo.svg.png
│  └─ css
│     └─ main.css
├─ components
│  ├─ LoginScreen.vue
│  └─ UserProfile.vue
├─ layouts
│  └─ default.vue
├─ middleware
│  └─ auth.global.ts  // Authentication middleware
├─ nuxt.config.ts
├─ package-lock.json
├─ package.json
├─ pages
│  ├─ index.vue
│  └─ login.vue
├─ plugins
│  └─ msal.ts  // MSAL plugin file
├─ public
│  └─ favicon.ico
├─ stores
│  └─ auth.global.ts
├─ tailwind.config.js
└─ tsconfig.json

Follow the steps below to make your own MSAL plugin. Alternatively, you can use a boilerplate that covers all necessary features in the msal.ts file.

1. Import the PublicClientApplication and other necessary modules from @azure/msal-browser.

2. Configure the msalConfig object with your authentication settings.

3. Create an instance of PublicClientApplication using the msalConfig.

4. Implement the various methods and functionalities described in the code snippet.

5. Optionally, provide the msal object to the Nuxt.js application using the provide option.

6. Use the provided functionality methods for authentication and token management in your Nuxt.js application.

License

This project is licensed under the MIT License.