Updates

Author: brophdawg11

examples/auth-router-provider/package-lock.json

@@ -7,7 +7,6 @@
     "serve": "vite preview"
   },
   "dependencies": {
-    "@auth0/auth0-spa-js": "^2.0.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.1"

examples/auth-router-provider/package.json

@@ -122,15 +122,27 @@ function AuthStatus() {
 async function loginAction({ request }: LoaderFunctionArgs) {
   let formData = await request.formData();
   let username = formData.get("username") as string | null;
-  let redirectTo = formData.get("redirectTo") as string | null;
 
+  // Validate our form inputs and return validation errors via useActionData()
   if (!username) {
     return {
       error: "You must provide a username to log in",
     };
   }
 
-  await fakeAuthProvider.signin(username);
+  // Sign in and redirect to the proper destination if successful.
+  try {
+    await fakeAuthProvider.signin(username);
+  } catch (error) {
+    // Unused as of now but this is how you would handle invalid
+    // username/password combinations - just like validating the inputs
+    // above
+    return {
+      error: "Invalid login attempt",
+    };
+  }
+
+  let redirectTo = formData.get("redirectTo") as string | null;
   return redirect(redirectTo || "/");
 }
 
@@ -176,6 +188,9 @@ function PublicPage() {
 }
 
 function protectedLoader({ request }: LoaderFunctionArgs) {
+  // If the user is not logged in and tries to access `/protected`, we redirect
+  // them to `/login` with a `from` parameter that allows login to redirect back
+  // to this page upon successful authentication
   if (!fakeAuthProvider.isAuthenticated) {
     let params = new URLSearchParams();
     params.set("from", new URL(request.url).pathname);

examples/auth-router-provider/src/App.tsx

@@ -1,6 +1,5 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom/client";
-import { BrowserRouter } from "react-router-dom";
 
 import "./index.css";
 import App from "./App";