Skip to content

Commit b783673

Browse files
KotaHuskyKotaHusky
committed
feat: login with azure b2c and msal-react
1 parent 9ca6a79 commit b783673

File tree

9 files changed

+74
-29
lines changed

9 files changed

+74
-29
lines changed

‎apps/my-app/.env.local

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
NEXT_PUBLIC_AZURE_AD_CLIENT_ID=bb626b2e-8bd8-44ee-bb90-afc1959a9274
2+
NEXT_PUBLIC_AZURE_AD_TENANT_ID=5e3f37f1-3b80-467a-a949-70b4cd2c4ac0
3+
NEXT_PUBLIC_REDIRECT_URI=/auth

‎apps/my-app/next.config.js

+1
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ const nextConfig = {
1111
// Set this to true if you would like to use SVGR
1212
// See: https://github.com/gregberge/svgr
1313
svgr: false,
14+
// page dir
1415
},
1516
};
1617

‎apps/my-app/src/app/_app.tsx

+7-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,12 @@
1-
import 'tailwindcss/tailwind.css';
21
import { AppProps } from 'next/app';
3-
import { MsalReactProvider } from '@myorg/msal-react';
2+
import { MsalProviderComponent } from '@myorg/msal-react';
43

5-
function CustomApp({ Component, pageProps }: AppProps) {
4+
function MyApp({ Component, pageProps }: AppProps) {
65
return (
7-
<MsalReactProvider>
8-
<Component {...pageProps} />;
9-
</MsalReactProvider>
10-
)
6+
<MsalProviderComponent>
7+
<Component {...pageProps} />
8+
</MsalProviderComponent>
9+
);
1110
}
1211

13-
export default CustomApp;
12+
export default MyApp;

‎apps/my-app/src/app/auth/page.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
'use client'
2+
3+
import { useEffect } from "react";
4+
import { useMsal } from "@azure/msal-react";
5+
6+
export default function AuthPage() {
7+
const { instance } = useMsal();
8+
9+
useEffect(() => {
10+
const handleRedirectPromise = instance.handleRedirectPromise();
11+
handleRedirectPromise.catch((error) => {
12+
console.error(error);
13+
});
14+
}, [instance]);
15+
16+
return null;
17+
}

‎apps/my-app/src/app/layout.tsx

+18-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import 'tailwindcss/tailwind.css';
1+
'use client'
22

3-
export const metadata = {
4-
title: 'Welcome to my-app',
5-
description: 'Generated by create-nx-workspace',
6-
};
3+
import 'tailwindcss/tailwind.css';
4+
import { MsalProviderComponent } from '@myorg/msal-react';
5+
import { Metadata } from 'next'
6+
7+
// export const metadata: Metadata = {
8+
// title: 'Home',
9+
// description: 'Welcome to Next.js',
10+
// }
711

812
export default function RootLayout({
913
children,
@@ -12,7 +16,14 @@ export default function RootLayout({
1216
}) {
1317
return (
1418
<html lang="en">
15-
<body>{children}</body>
19+
<body>
20+
<MsalProviderComponent>
21+
<div id="layout-children">
22+
{children}
23+
</div>
24+
</MsalProviderComponent>
25+
</body>
1626
</html>
27+
1728
);
18-
}
29+
}

‎apps/my-app/src/app/page.tsx

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,27 @@
11
'use client'
2+
23
import React from 'react';
34
import { ButtonLogin, ButtonLogout } from '@myorg/msal-react';
5+
import { AuthenticatedTemplate, UnauthenticatedTemplate } from '@azure/msal-react';
46

57
export default function Page() {
68
return (
79
<div>
8-
<div className="bg-gray-50">
10+
<div className="bg-slate-900 h-screen w-screen">
911
<div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:py-16 lg:px-8 lg:flex lg:items-center lg:justify-between">
10-
<h2 className="text-3xl font-extrabold tracking-tight text-gray-900 sm:text-4xl">
12+
<h2 className="text-3xl font-extrabold tracking-tight text-neutral-300 sm:text-4xl">
1113
<span className="block">Ready to dive in?</span>
1214
<span className="block text-indigo-600">
1315
Start your free trial today.
1416
</span>
1517
</h2>
1618
<div className="mt-8 flex lg:mt-0 lg:flex-shrink-0">
17-
<ButtonLogin />
18-
<ButtonLogout />
19+
<AuthenticatedTemplate>
20+
<ButtonLogout />
21+
</AuthenticatedTemplate>
22+
{/* <UnauthenticatedTemplate> */}
23+
<ButtonLogin />
24+
{/* </UnauthenticatedTemplate> */}
1925
</div>
2026
</div>
2127
</div>

‎libs/msal-react/src/lib/button-login/button-login.tsx

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
import React from 'react';
22
import { useMsal } from '@azure/msal-react';
3-
import { loginRequest } from '../msal-react';
43

54
export function ButtonLogin() {
65
const { instance } = useMsal();
76

7+
const loginHandler = () => {
8+
instance.loginRedirect();
9+
};
10+
811
return (
912
<div className="inline-flex rounded-md shadow">
1013
<a
1114
href="#"
12-
onClick={() => instance.loginPopup(loginRequest)}
15+
onClick={loginHandler}
1316
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700"
1417
>
1518
Log In

‎libs/msal-react/src/lib/button-logout/button-logout.tsx

+5-1
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,15 @@ import { useMsal } from '@azure/msal-react';
44
export function ButtonLogout() {
55
const { instance } = useMsal();
66

7+
const logoutHandler = () => {
8+
instance.logoutRedirect();
9+
};
10+
711
return (
812
<div className="ml-3 inline-flex rounded-md shadow">
913
<a
1014
href="#"
11-
onClick={() => instance.logoutPopup()}
15+
onClick={logoutHandler}
1216
className="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-indigo-600 bg-white hover:bg-indigo-50"
1317
>
1418
Logout

‎libs/msal-react/src/lib/msal-react.tsx

+8-7
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
'use client'
2+
13
import React from 'react';
24
import { Configuration, PublicClientApplication } from '@azure/msal-browser';
35
import { MsalProvider } from '@azure/msal-react';
@@ -18,12 +20,11 @@ const msalConfig: Configuration = {
1820
// Initialize MSAL instance with your configuration
1921
const msalInstance = new PublicClientApplication(msalConfig);
2022

21-
// Provide a login request
22-
export const loginRequest = {
23-
scopes: ["User.Read"],
24-
};
25-
2623
// Create a component to provide MSAL functionalities
27-
export const MsalReactProvider: React.FC<{children: React.ReactNode}> = ({ children }) => {
28-
return <MsalProvider instance={msalInstance}>{children}</MsalProvider>;
24+
export const MsalProviderComponent: React.FC<{ children: React.ReactNode }> = ({ children }) => {
25+
return (
26+
<div id="msal-provider">
27+
<MsalProvider instance={msalInstance}>{children}</MsalProvider>;
28+
</div>
29+
)
2930
};

0 commit comments

Comments
 (0)