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 http://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=http://localhost:3000
POSTLOGOUT_REDIRECT_URI=http://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.