Demo code

samples/msal-custom-auth-samples/react-demo/challenge.tsx

@@ -0,0 +1,55 @@
+// Challenge component for verification code
+const SignInChallenge = () => {
+    const [code, setCode] = useState("");
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const navigate = useNavigate();
+
+    const { submitCode, status, errorCode, errorMessage } = useCustomAuth();
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+
+        try {
+            const result = await submitCode(code);
+
+            if (result === "SignIn.Completed") {
+                navigate("/success");
+            }
+            // If not successful, the form will show again with the error message
+        } catch (error) {
+            console.error("Code submission error:", error);
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <div className="challenge-container">
+            <h2>Verification Required</h2>
+
+            <p>Please enter the verification code sent to your device.</p>
+
+            {errorMessage && (
+                <div className="error-message">{errorMessage}</div>
+            )}
+
+            <form onSubmit={handleSubmit}>
+                <div className="form-group">
+                    <label htmlFor="code">Verification Code</label>
+                    <input
+                        type="text"
+                        id="code"
+                        value={code}
+                        onChange={(e) => setCode(e.target.value)}
+                        required
+                    />
+                </div>
+
+                <button type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? "Verifying..." : "Submit Code"}
+                </button>
+            </form>
+        </div>
+    );
+};

samples/msal-custom-auth-samples/react-demo/index.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import { Routes, Route, Navigate } from "react-router-dom";
+
+const App = () => {
+    return (
+        <div className="app">
+            <Routes>
+                <Route path="/signin" element={<SignIn />} />
+                <Route path="/challenge" element={<SignInChallenge />} />
+                <Route
+                    path="/success"
+                    element={
+                        <ProtectedRoute>
+                            <SuccessPage />
+                        </ProtectedRoute>
+                    }
+                />
+                <Route path="*" element={<Navigate to="/signin" />} />
+            </Routes>
+        </div>
+    );
+};
+
+export default App;

samples/msal-custom-auth-samples/react-demo/signIn.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { useCustomAuth } from "./hooks/useCustomAuth"; // Assuming this hook is in this path
+
+export const SignIn = () => {
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const navigate = useNavigate();
+
+    const { startSignIn, status, errorCode, errorMessage } = useCustomAuth();
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+
+        try {
+            const result = await startSignIn(username, password);
+
+            if (result === "SignIn.Completed") {
+                navigate("/success");
+            } else if (result === "SignIn.ChallengeRequired") {
+                navigate("/challenge");
+            }
+        } catch (error) {
+            console.error("Sign in error:", error);
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <div className="sign-in-container">
+            <h2>Sign In</h2>
+
+            {errorMessage && (
+                <div className="error-message">{errorMessage}</div>
+            )}
+
+            <form onSubmit={handleSubmit}>
+                <div className="form-group">
+                    <label htmlFor="username">Username</label>
+                    <input
+                        type="text"
+                        id="username"
+                        value={username}
+                        onChange={(e) => setUsername(e.target.value)}
+                        required
+                    />
+                </div>
+
+                <div className="form-group">
+                    <label htmlFor="password">Password</label>
+                    <input
+                        type="password"
+                        id="password"
+                        value={password}
+                        onChange={(e) => setPassword(e.target.value)}
+                        required
+                    />
+                </div>
+
+                <button type="submit" disabled={isSubmitting}>
+                    {isSubmitting ? "Signing in..." : "Sign In"}
+                </button>
+            </form>
+        </div>
+    );
+};

samples/msal-custom-auth-samples/react-demo/success.tsx

@@ -0,0 +1,53 @@
+import React from "react";
+import { useCustomAuth } from "./hooks/useCustomAuth"; // Assuming this hook is in this path
+
+export const SuccessPage = () => {
+    const { user } = useCustomAuth();
+
+    if (!user) {
+        return <div className="loading">Loading user data...</div>;
+    }
+
+    return (
+        <div className="success-container">
+            <h2>Sign In Successful!</h2>
+            <p>Welcome, {user.displayName || user.username}!</p>
+
+            <div className="user-profile">
+                <h3>User Profile</h3>
+                {user.profileImage && (
+                    <div className="profile-image">
+                        <img src={user.profileImage} alt="Profile" />
+                    </div>
+                )}
+
+                <div className="user-details">
+                    <p>
+                        <strong>Username:</strong> {user.username}
+                    </p>
+                    {user.email && (
+                        <p>
+                            <strong>Email:</strong> {user.email}
+                        </p>
+                    )}
+                    {user.fullName && (
+                        <p>
+                            <strong>Full Name:</strong> {user.fullName}
+                        </p>
+                    )}
+                    {user.accountType && (
+                        <p>
+                            <strong>Account Type:</strong> {user.accountType}
+                        </p>
+                    )}
+                    {user.memberSince && (
+                        <p>
+                            <strong>Member Since:</strong>{" "}
+                            {new Date(user.memberSince).toLocaleDateString()}
+                        </p>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};