Generated with sparks and insights from 89 sources

img10

img11

img12

img13

img14

img15

Introduction

  • Step 1: Create an App in Azure Active Directory (Azure AD). Log in to the Azure portal, select your Azure AD tenant, and register a new application.

  • Step 2: Understand the Authorization Code Flow. This involves redirecting the user to Azure AD for authentication and then exchanging the authorization code for tokens.

  • Step 3: Create a SvelteKit App. Use the Skeleton project as a starting point and install necessary dependencies.

  • Step 4: Update Project Structure. Organize your project to include protected routes and a callback route for handling authentication responses.

  • Step 5: Implement Authentication Logic. Use hooks.server.ts to handle authentication checks and redirect users to Azure AD if they are not authenticated.

  • Step 6: Configure MSAL. Install @azure/msal-node and set up configuration files to manage authentication tokens.

  • Step 7: Handle Tokens. Implement logic to handle the tokens returned by Azure AD and store them securely.

  • Step 8: Enhance Security. Use state parameters and CSRF tokens to protect against attacks and ensure secure redirection.

Creating Azure AD App

  • Log in to the Azure portal and select your Azure AD tenant.

  • Navigate to 'App registrations' and click 'New registration'.

  • Provide a name for the app and select 'Web' as the application type.

  • Enter the Redirect URI, which is the URL where Azure AD will redirect the user after authentication.

  • Click 'Register' to create the app.

  • Go to 'Certificates and Secrets' and create a new client secret.

  • Note down the Application (client) ID, Directory (tenant) ID, and Client Secret.

img10

img11

img12

img13

img14

img15

Authorization Code Flow

  • The client app redirects the user to Azure AD with parameters like client ID and Redirect URI.

  • The user logs in and consents to the requested permissions.

  • Azure AD redirects the user back to the client app with an authorization code.

  • The client app exchanges the authorization code for an access token and a refresh token.

  • The client app uses the access token to access protected resources on behalf of the user.

img10

img11

img12

img13

img14

img15

Setting Up SvelteKit [1]

  • Ensure you have the latest version of Node.js installed.

  • Create a new SvelteKit app using the Skeleton project.

  • Navigate to the project folder and install dependencies using npm.

  • Open the project in your preferred text editor.

img10

img11

img12

img13

img14

img15

Project Structure [1]

  • Create a '(protected)' folder under routes and move the +page.svelte file into this folder.

  • Create a 'callback' folder under routes and add a +server.ts file.

  • Add a hooks.server.ts file under the src folder to handle server requests.

  • Update the hooks.server.ts file to check if the user is authenticated before serving protected resources.

img10

img11

img12

img13

img14

img15

Authentication Logic [1]

  • Use the hooks.server.ts file to check if the user is authenticated.

  • Redirect unauthenticated users to the Microsoft authentication page.

  • Install @azure/msal-node to handle authentication.

  • Create a .env file to store sensitive information like client ID and client secret.

img10

img11

img12

img13

img14

img15

Configuring MSAL [1]

  • Install the @azure/msal-node package.

  • Create a 'lib' folder under 'src' and add 'auth' folder with 'config.ts' and 'services.ts' files.

  • Configure the msalConfig object with client ID, authority, and client secret.

  • Use the getAuthCodeUrl method to redirect the client to Microsoft's authentication page.

img10

img11

img12

img13

img14

img15

Handling Tokens [1]

  • Retrieve the authorization code from the query parameters.

  • Exchange the authorization code for access and ID tokens using the acquireTokenByCode method.

  • Store the tokens in HTTP-only cookies for security.

  • Redirect the user to the appropriate page based on the authentication response.

img10

img11

img12

img13

img14

img15

Enhancing Security [1]

  • Use state parameters to track the original request and ensure secure redirection.

  • Generate a CSRF token and include it in the state parameter.

  • Verify the CSRF token upon receiving the authentication response.

  • Redirect the user to the original requested resource after successful authentication.

img10

img11

img12

Related Videos

<br><br>

<div class="-md-ext-youtube-widget"> { "title": "User Authentication in SvelteKit", "link": "https://www.youtube.com/watch?v=uZELwsPn6TY", "channel": { "name": ""}, "published_date": "Jan 28, 2023", "length": "" }</div>

<div class="-md-ext-youtube-widget"> { "title": "SvelteKit Auth in 15 Minutes", "link": "https://www.youtube.com/watch?v=xahLLwrxW2Y", "channel": { "name": ""}, "published_date": "Feb 26, 2024", "length": "" }</div>

<div class="-md-ext-youtube-widget"> { "title": "Microsoft Entra ID Application authorization", "link": "https://www.youtube.com/watch?v=ZxHnv7OTzXI", "channel": { "name": ""}, "published_date": "May 24, 2023", "length": "" }</div>