Build the login form: requireUserId()

https://remix.run/docs/en/v1/tutorials/jokes#build-the-login-form

Author: zainfathoni

app/routes/jokes/new.tsx

@@ -1,7 +1,7 @@
 import { ActionFunction, useActionData } from 'remix'
 import { redirect } from 'remix'
 import { db } from '~/utils/db.server'
-import { getUserId } from '~/utils/session.server'
+import { requireUserId } from '~/utils/session.server'
 
 function validateJokeName(name: string) {
   if (name.length < 3) {
@@ -28,10 +28,7 @@ type ActionData = {
 }
 
 export let action: ActionFunction = async ({ request }) => {
-  let userId = await getUserId(request)
-  if (!userId) {
-    return redirect('/login?redirectTo=/jokes/new')
-  }
+  let userId = await requireUserId(request)
   let form = await request.formData()
   let name = form.get('name')
   let content = form.get('content')

app/utils/session.server.ts

@@ -51,6 +51,20 @@ export async function getUserId(request: Request) {
   return userId;
 }
 
+export async function requireUserId(
+  request: Request,
+  redirectTo: string = new URL(request.url).pathname
+) {
+  let userId = await getUserId(request);
+  if (!userId) {
+    let searchParams = new URLSearchParams([
+      ["redirectTo", redirectTo]
+    ]);
+    throw redirect(`/login?${searchParams}`);
+  }
+  return userId;
+}
+
 export async function createUserSession(userId: string, redirectTo: string) {
   let session = await storage.getSession();
   session.set("userId", userId);