Custom auth/alban/react next sample app signin

samples/msal-custom-auth-samples/react-sample-nextjs/.editorconfig

@@ -0,0 +1,20 @@
+# Editor configuration, see http://editorconfig.org
+[*]
+indent_style = space
+indent_size = 4
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+max_line_length = 120
+
+[*.json]
+indent_size = 2
+
+[*.md]
+max_line_length = 140
+trim_trailing_whitespace = false
+
+[*.html]
+max_line_length = 200
+trim_trailing_whitespace = false

samples/msal-custom-auth-samples/react-sample-nextjs/cors.js

@@ -0,0 +1,73 @@
+const http = require("http");
+const https = require("https");
+const url = require("url");
+const proxyConfig = require("./proxy.config");
+
+const extraHeaders = [
+    "x-client-SKU",
+    "x-client-VER",
+    "x-client-OS",
+    "x-client-CPU",
+    "x-client-current-telemetry",
+    "x-client-last-telemetry",
+    "client-request-id",
+];
+http.createServer((req, res) => {
+    const reqUrl = url.parse(req.url);
+    const domain = url.parse(proxyConfig.proxy).hostname;
+
+    // Set CORS headers for all responses including OPTIONS
+    const corsHeaders = {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
+        "Access-Control-Allow-Headers": "Content-Type, Authorization, " + extraHeaders.join(", "),
+        "Access-Control-Allow-Credentials": "true",
+        "Access-Control-Max-Age": "86400", // 24 hours
+    };
+
+    // Handle preflight OPTIONS request
+    if (req.method === "OPTIONS") {
+        res.writeHead(204, corsHeaders);
+        res.end();
+        return;
+    }
+
+    if (reqUrl.pathname.startsWith(proxyConfig.localApiPath)) {
+        const targetUrl = proxyConfig.proxy + reqUrl.pathname?.replace(proxyConfig.localApiPath, "") + (reqUrl.search || "");
+
+        console.log("Incoming request -> " + req.url + " ===> " + reqUrl.pathname);
+
+        const proxyReq = https.request(
+            targetUrl,
+            {
+                method: req.method,
+                headers: {
+                    ...req.headers,
+                    host: domain,
+                },
+            },
+            (proxyRes) => {
+                res.writeHead(proxyRes.statusCode, {
+                    ...proxyRes.headers,
+                    ...corsHeaders,
+                });
+
+                proxyRes.pipe(res);
+            }
+        );
+
+        proxyReq.on("error", (err) => {
+            console.error("Error with the proxy request:", err);
+            res.writeHead(500, { "Content-Type": "text/plain" });
+            res.end("Proxy error.");
+        });
+
+        req.pipe(proxyReq);
+    } else {
+        res.writeHead(404, { "Content-Type": "text/plain" });
+        res.end("Not Found");
+    }
+}).listen(proxyConfig.port, () => {
+    console.log("CORS proxy running on http://localhost:3001");
+    console.log("Proxying from " + proxyConfig.localApiPath + " ===> " + proxyConfig.proxy);
+});

samples/msal-custom-auth-samples/react-sample-nextjs/package.json

@@ -6,20 +6,22 @@
         "dev": "next dev --turbopack",
         "build": "next build",
         "start": "next start",
-        "lint": "next lint"
+        "lint": "next lint",
+        "cors": "node cors.js"
     },
     "dependencies": {
+        "@azure/msal-custom-auth": "^0.0.1",
+        "next": "15.1.7",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0",
-        "next": "15.1.7"
+        "react-dom": "^19.0.0"
     },
     "devDependencies": {
-        "typescript": "^5",
+        "@eslint/eslintrc": "^3",
         "@types/node": "^20",
         "@types/react": "^19",
         "@types/react-dom": "^19",
         "eslint": "^9",
         "eslint-config-next": "15.1.7",
-        "@eslint/eslintrc": "^3"
+        "typescript": "^5"
     }
 }

samples/msal-custom-auth-samples/react-sample-nextjs/proxy.config.js

@@ -0,0 +1,13 @@
+/**
+ * Proxy configuration for local development
+ * entryPath: The path to the API on the react app ex. /api
+ * proxy: The URL to proxy the requests
+ */
+const config = {
+    localApiPath: "/api",
+    port: 3001,
+    proxy: "",
+};
+
+module.exports = config;
+// This file is used to configure the proxy for the local development server.

samples/msal-custom-auth-samples/react-sample-nextjs/src/app/page.tsx

@@ -1,14 +1,14 @@
-'use client';
+"use client";
 
 export default function Home() {
-  return (
-    <main>
-      <div className="auth-container">
-        <h1 style={{ fontSize: '2rem', marginBottom: '1rem' }}>MSAL Custom Auth</h1>
-        <p style={{ textAlign: 'center', color: '#4B5563' }}>
-          Welcome to the custom authentication sample. Please sign in or create an account to continue.
-        </p>
-      </div>
-    </main>
-  );
+    return (
+        <main>
+            <div className="auth-container">
+                <h1 style={{ fontSize: "2rem", marginBottom: "1rem" }}>MSAL Custom Auth</h1>
+                <p style={{ textAlign: "center", color: "#4B5563" }}>
+                    Welcome to the custom authentication sample. Please sign in or create an account to continue.
+                </p>
+            </div>
+        </main>
+    );
 }

samples/msal-custom-auth-samples/react-sample-nextjs/src/app/reset-password/components/CodeForm.tsx

@@ -0,0 +1,26 @@
+import { styles } from "../styles/styles";
+
+interface CodeFormProps {
+    onSubmit: (e: React.FormEvent) => Promise<void>;
+    code: string;
+    setCode: (value: string) => void;
+    loading: boolean;
+}
+
+export function CodeForm({ onSubmit, code, setCode, loading }: CodeFormProps) {
+    return (
+        <form onSubmit={onSubmit} style={styles.form}>
+            <input
+                type="text"
+                placeholder="Enter verification code"
+                value={code}
+                onChange={(e) => setCode(e.target.value)}
+                style={styles.input}
+                required
+            />
+            <button type="submit" style={styles.button} disabled={loading}>
+                {loading ? "Verifying..." : "Verify Code"}
+            </button>
+        </form>
+    );
+}

samples/msal-custom-auth-samples/react-sample-nextjs/src/app/reset-password/components/InitialForm.tsx

@@ -0,0 +1,26 @@
+import { styles } from "../styles/styles";
+
+interface InitialFormProps {
+    onSubmit: (e: React.FormEvent) => Promise<void>;
+    email: string;
+    setEmail: (value: string) => void;
+    loading: boolean;
+}
+
+export function InitialForm({ onSubmit, email, setEmail, loading }: InitialFormProps) {
+    return (
+        <form onSubmit={onSubmit} style={styles.form}>
+            <input
+                type="email"
+                placeholder="Email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                style={styles.input}
+                required
+            />
+            <button type="submit" style={styles.button} disabled={loading}>
+                {loading ? "Sending..." : "Reset Password"}
+            </button>
+        </form>
+    );
+}

samples/msal-custom-auth-samples/react-sample-nextjs/src/app/reset-password/components/NewPasswordForm.tsx

@@ -0,0 +1,29 @@
+import { styles } from "../styles/styles";
+
+interface NewPasswordFormProps {
+    onSubmit: (e: React.FormEvent) => Promise<void>;
+    newPassword: string;
+    setNewPassword: (value: string) => void;
+    loading: boolean;
+}
+
+export function NewPasswordForm({ onSubmit, newPassword, setNewPassword, loading }: NewPasswordFormProps) {
+    return (
+        <form onSubmit={onSubmit} style={styles.form}>
+            <input
+                type="password"
+                placeholder="Enter new password"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                style={styles.input}
+                required
+                minLength={8}
+                pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$"
+                title="Password must be at least 8 characters long and contain at least one uppercase letter, one lowercase letter, one number, and one special character"
+            />
+            <button type="submit" style={styles.button} disabled={loading}>
+                {loading ? "Setting password..." : "Set New Password"}
+            </button>
+        </form>
+    );
+}

samples/msal-custom-auth-samples/react-sample-nextjs/src/app/reset-password/components/ResetPasswordResult.tsx

@@ -0,0 +1,66 @@
+import { useRouter } from "next/navigation";
+
+interface ResetPasswordResultProps {
+    result: any;
+}
+
+export function ResetPasswordResult({ result }: ResetPasswordResultProps) {
+    const router = useRouter();
+
+    return (
+        <div
+            style={{
+                padding: "20px",
+                border: "1px solid #ddd",
+                borderRadius: "4px",
+                marginTop: "20px",
+            }}
+        >
+            <h3>Password Reset Successful</h3>
+
+            <div style={{ marginTop: "15px" }}>
+                <div style={{ marginBottom: "10px" }}>
+                    Your password has been successfully reset. You can now sign in with your new password.
+                </div>
+                <div style={{ marginBottom: "10px" }}>
+                    <strong>Email:</strong> {result.email}
+                </div>
+                <div style={{ marginBottom: "10px" }}>
+                    <strong>Reset Completed:</strong> {new Date(result.timestamp).toLocaleString()}
+                </div>
+            </div>
+
+            <div style={{ marginTop: "20px" }}>
+                <button
+                    style={{
+                        padding: "10px",
+                        backgroundColor: "#0078d4",
+                        color: "white",
+                        border: "none",
+                        borderRadius: "4px",
+                        cursor: "pointer",
+                        fontSize: "16px",
+                    }}
+                    onClick={() => router.push("/sign-in")}
+                >
+                    Go to Sign In
+                </button>
+            </div>
+
+            <details style={{ marginTop: "20px" }}>
+                <summary style={{ cursor: "pointer", color: "#666" }}>Technical Details</summary>
+                <pre
+                    style={{
+                        background: "#f5f5f5",
+                        padding: "15px",
+                        borderRadius: "4px",
+                        overflowX: "auto",
+                        marginTop: "10px",
+                    }}
+                >
+                    {JSON.stringify(result, null, 2)}
+                </pre>
+            </details>
+        </div>
+    );
+}