msal-nux3.mp4
- 🔁 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.
# Using npm
$ npm install --save @azure/msal-browser
# Using yarn
$ yarn add @azure/msal-browser
- Go to https://portal.azure.com/
- Search for Azure Active Directory in your organization and select
App Registrations
from the left panel and click onNew registration
.
- Register the application by giving your name, selecting supported account types (who can use this application) based on requirements, and clicking register.
- Register redirect URL https://yourapplication.com/ or for development https://localhost:3000/
Step 2 :
Step 3 :
- 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.
CLIENTID=
AUTHORITY=https://login.microsoftonline.com
REDIRECT_URI=https://localhost:3000
POSTLOGOUT_REDIRECT_URI=https://localhost:3000
Run development server
npm run dev
📦
├─ .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.
-
Import the
PublicClientApplication
and other necessary modules from@azure/msal-browser
. -
Configure the
msalConfig
object with your authentication settings. -
Create an instance of
PublicClientApplication
using themsalConfig
. -
Implement the various methods and functionalities described in the code snippet.
-
Optionally, provide the
msal
object to the Nuxt.js application using theprovide
option. -
Use the provided functionality methods for authentication and token management in your Nuxt.js application.
This project is licensed under the MIT License.