finishing auth lesson and exercise for remix

Author: bradwestfall

remix/lessons/05-forms-and-actions/exercise/GUIDE.md

@@ -1,6 +1,4 @@
-# Forms and Fetcher
-
-The goal of this exercise is to practice using forms and formData with Remix
+# Forms and Actions
 
 First, review the loader of `root.tsx`. This loader gets the cart data now. Before in the lecture, the cart data was loaded down lower in the loader of `_products-layout._index.tsx`. By "lifting" the loader data, we have access to the cart in the entire UI of our app, not just in that page. When you are able to add items to the cart, you'll notice the "Cart is Empty" message start to change.
 

remix/lessons/06-authentication/exercise-final/components/MainLayout.tsx

@@ -43,6 +43,9 @@ function SubHeader() {
         <NavLink to="/login" className="inline-block py-3 px-5 -mb-[1px] border-b-2">
           Login
         </NavLink>
+        <NavLink to="/register" className="inline-block py-3 px-5 -mb-[1px] border-b-2">
+          Register
+        </NavLink>
       </nav>
     </CenterContent>
   )

remix/lessons/06-authentication/exercise-final/routes/_index.tsx

@@ -1,18 +1,13 @@
 import { LoaderArgs, json } from '@remix-run/node'
 import { useLoaderData } from '@remix-run/react'
-import { storage } from '../utils/auth.server'
+import { getSessionUser } from '../utils/auth.server'
 
 export const loader = async ({ request }: LoaderArgs) => {
-  // Get the session from the cookie
-  const session = await storage.getSession(request.headers.get('Cookie'))
-
-  // Get the userId from the session if it exists
-  let userId = session.get('userId') as string | undefined
-
-  return json({ userId: userId !== undefined && parseInt(userId) })
+  const user = await getSessionUser(request)
+  return json({ user })
 }
 
 export default function () {
-  const { userId } = useLoaderData<typeof loader>()
-  return userId ? <div>User ID is {userId}</div> : <div>User is not logged in</div>
+  const { user } = useLoaderData<typeof loader>()
+  return user ? <div>User ID is {user.id}</div> : <div>User is not logged in</div>
 }

remix/lessons/06-authentication/exercise-final/routes/register.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react'
+import * as z from 'zod'
+import { json, redirect } from '@remix-run/node'
+import { Form, useActionData } from '@remix-run/react'
+import { FieldWrap } from '~/components/FormFields'
+import { Heading } from '~/components/Heading'
+import type { ActionArgs } from '@remix-run/node'
+import { createUserSession, registerUser, verifyUser } from '../utils/auth.server'
+import { usernameExists } from '~/utils/db.server'
+
+const formSchema = z.object({
+  username: z.string().min(5, { message: 'Must be at least 5 characters' }),
+  password: z.string().min(5, { message: 'Must be at least 5 characters' }),
+})
+
+type FormDataType = z.infer<typeof formSchema>
+type FormErrorType = {
+  [k in keyof FormDataType]?: string[] | undefined
+}
+
+export async function action({ request }: ActionArgs) {
+  const formData = await request.formData()
+  const formValues = Object.fromEntries(formData)
+  const results = formSchema.safeParse(formValues)
+  if (!results.success) return json({ error: 'Invalid Data' }, { status: 400 })
+
+  const { username, password } = results.data
+  const userExists = await usernameExists(username)
+  if (userExists) return json({ error: 'Username already registered' }, { status: 400 })
+
+  const userId = await registerUser(username, password)
+  if (!userId) return json({ error: 'We were not able to register this user' }, { status: 400 })
+
+  return createUserSession(userId, '/')
+}
+
+export default function Login() {
+  const [formErrors, setFormErrors] = useState<FormErrorType>()
+  const { error } = useActionData<typeof action>() || {}
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    const formValues = Object.fromEntries(new FormData(event.currentTarget))
+    const results = formSchema.safeParse(formValues)
+    if (!results.success) {
+      event.preventDefault()
+      setFormErrors(results.error.flatten().fieldErrors)
+    }
+  }
+
+  return (
+    <div className="ml-auto mr-auto max-w-[600px]">
+      <div className="bg-white rounded-md shadow-md p-6 space-y-6">
+        <Heading size={4}>Register</Heading>
+        {error && <div className="notice error">{error}</div>}
+        <Form onSubmit={onSubmit} method="post" className="space-y-3" autoComplete="off">
+          <FieldWrap label="Username" required errors={formErrors?.username}>
+            {(field) => <input {...field} className="form-field" type="text" name="username" />}
+          </FieldWrap>
+          <FieldWrap label="Password" required errors={formErrors?.password}>
+            {(field) => <input {...field} className="form-field" type="password" name="password" />}
+          </FieldWrap>
+          <footer>
+            <button type="submit" className="button">
+              Register
+            </button>
+          </footer>
+        </Form>
+      </div>
+    </div>
+  )
+}

remix/lessons/06-authentication/exercise-final/utils/auth.server.ts

@@ -1,5 +1,5 @@
 import { createCookieSessionStorage, redirect } from '@remix-run/node'
-import { createUser, getUser, getUserPasswordHash } from './db.server'
+import { createUser, getUser, getUserPasswordHash } from '~/utils/db.server'
 import bcrypt from 'bcryptjs'
 
 /****************************************

remix/lessons/06-authentication/exercise/GUIDE.md

@@ -0,0 +1,20 @@
+# Forms and Fetcher
+
+First, review `utils/auth.server.ts` where we have lots of utility functions to help you manage your sessions
+
+# Task 1
+
+Work on the home page: `routes/_index.tsx` and get the message to correctly show the user's login status. It currently is hard-coded to always say the user is not logged in.
+
+You can use the real login page to log into a user with:
+
+username: admin
+password: admin
+
+If you need to remove a login session, you can do so in Chrome DevTools under Application > Cookies and remove the `react_training_remix_auth` cookie.
+
+# Task 2
+
+Copy the login page and all it's code to make a `routes/register.tsx` page. Almost all the code is the same but you'll probably want to update the header and button label to say "Register" instead of "Login".
+
+The only real difference between login and register will be in the action. Instead of verifying a user before you create the user session, you'll see if the username exists already with `usernameExists(username)`. If it does you should respond with a 400 status code. Then you use `registerUser(username, password)` to register the user and then create the session. Both of those functions can be found in the `auth.server.ts` file.

remix/lessons/06-authentication/exercise/components/MainLayout.tsx

@@ -0,0 +1,65 @@
+import { NavLink } from '@remix-run/react'
+import { SelectedLesson } from '~/state/LessonContext'
+import { Logo } from '~/components/Logo'
+
+type MainLayoutProps = {
+  children: React.ReactNode
+}
+
+export function MainLayout({ children }: MainLayoutProps) {
+  return (
+    <div>
+      <Header />
+      <SubHeader />
+      <CenterContent className="pt-6 pb-20">{children}</CenterContent>
+    </div>
+  )
+}
+
+function Header() {
+  return (
+    <header className="d bg-gradient-to-r from-sky-400 to-indigo-950">
+      <CenterContent className="border-b py-3">
+        <div className="flex justify-between items-center">
+          <div className="">
+            <Logo />
+          </div>
+          <div className="text-white/60">
+            <SelectedLesson />
+          </div>
+        </div>
+      </CenterContent>
+    </header>
+  )
+}
+
+function SubHeader() {
+  return (
+    <CenterContent className="bg-white border-b">
+      <nav className="primary-nav">
+        <NavLink to="/" className="inline-block py-3 px-5 -mb-[1px] border-b-2">
+          Home
+        </NavLink>
+        <NavLink to="/login" className="inline-block py-3 px-5 -mb-[1px] border-b-2">
+          Login
+        </NavLink>
+        <NavLink to="/register" className="inline-block py-3 px-5 -mb-[1px] border-b-2">
+          Register
+        </NavLink>
+      </nav>
+    </CenterContent>
+  )
+}
+
+type CenterContentProps = {
+  className?: string
+  children: React.ReactNode
+}
+
+export function CenterContent({ children, className }: CenterContentProps) {
+  return (
+    <div className={className}>
+      <div className="ml-auto mr-auto max-w-[1200px] pl-3 pr-3">{children}</div>
+    </div>
+  )
+}

remix/lessons/06-authentication/exercise/root.tsx

@@ -0,0 +1,89 @@
+import { PropsWithChildren } from 'react'
+import {
+  Links,
+  LiveReload,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  isRouteErrorResponse,
+  useLoaderData,
+  useRouteError,
+} from '@remix-run/react'
+import { type LinksFunction, json } from '@remix-run/node'
+import stylesheet from '~/styles/app.css'
+import { MainLayout } from './components/MainLayout'
+import { LessonProvider } from '~/state/LessonContext'
+import { CenterContent } from '~/components/CenterContent'
+import { Heading } from '~/components/Heading'
+
+export const links: LinksFunction = () => [{ rel: 'stylesheet', href: stylesheet }]
+
+export async function loader() {
+  const lesson = process.env.REMIX_APP_DIR?.split('/').slice(-2).join('/') || ''
+  return json({ lesson })
+}
+
+export default function App() {
+  const { lesson } = useLoaderData<typeof loader>()
+
+  return (
+    <Document>
+      <LessonProvider selectedLesson={lesson}>
+        <MainLayout>
+          <Outlet />
+        </MainLayout>
+      </LessonProvider>
+    </Document>
+  )
+}
+
+export function ErrorBoundary() {
+  const error = useRouteError()
+
+  let heading = 'Unknown Error'
+  let message = ''
+
+  if (isRouteErrorResponse(error)) {
+    heading = error.status + ' ' + error.statusText
+    message = error.data
+  } else if (error instanceof Error) {
+    heading = 'Page Error'
+    message = error.message
+  }
+
+  return (
+    <Document>
+      <CenterContent className="pt-6 pb-20">
+        <div className="bg-white p-6 rounded-md space-y-6">
+          <Heading size={1}>{heading}</Heading>
+          <p>{message}</p>
+        </div>
+      </CenterContent>
+    </Document>
+  )
+}
+
+export function Document({ children }: PropsWithChildren) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <Meta />
+        <Links />
+        <link rel="preconnect" href="https://fonts.googleapis.com" />
+        <link
+          href="https://fonts.googleapis.com/css2?&family=Inter:wght@400;700&display=swap"
+          rel="stylesheet"
+        />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+        <LiveReload />
+      </body>
+    </html>
+  )
+}

remix/lessons/06-authentication/exercise/routes/_index.tsx

@@ -0,0 +1,14 @@
+import { LoaderArgs, json } from '@remix-run/node'
+import { useLoaderData } from '@remix-run/react'
+// import { ??? } from '../utils/auth.server'
+
+export const loader = async ({ request }: LoaderArgs) => {
+  // Get the session user. Look in ../utils/auth.server
+  return null
+}
+
+export default function () {
+  const user = false // Use useLoaderData instead:
+  // const { user } = useLoaderData<typeof loader>()
+  return user ? <div>User ID is {user.id}</div> : <div>User is not logged in</div>
+}

remix/lessons/06-authentication/exercise/routes/login.tsx

@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import * as z from 'zod'
+import { json, redirect } from '@remix-run/node'
+import { Form, useActionData } from '@remix-run/react'
+import { FieldWrap } from '~/components/FormFields'
+import { Heading } from '~/components/Heading'
+import type { ActionArgs } from '@remix-run/node'
+import { createUserSession, verifyUser } from '../utils/auth.server'
+
+const formSchema = z.object({
+  username: z.string().min(5, { message: 'Must be at least 5 characters' }),
+  password: z.string().min(5, { message: 'Must be at least 5 characters' }),
+})
+
+type FormDataType = z.infer<typeof formSchema>
+type FormErrorType = {
+  [k in keyof FormDataType]?: string[] | undefined
+}
+
+export async function action({ request }: ActionArgs) {
+  const formData = await request.formData()
+  const formValues = Object.fromEntries(formData)
+  const results = formSchema.safeParse(formValues)
+  if (!results.success) return json({ error: 'Invalid Data' }, { status: 400 })
+
+  const { username, password } = results.data
+  const userId = await verifyUser(username, password)
+  if (!userId) return json({ error: 'User not found' }, { status: 400 })
+
+  const redirectPath = '/'
+  return createUserSession(userId, redirectPath)
+}
+
+export default function Login() {
+  const [formErrors, setFormErrors] = useState<FormErrorType>()
+  const { error } = useActionData<typeof action>() || {}
+
+  function onSubmit(event: React.FormEvent<HTMLFormElement>) {
+    const formValues = Object.fromEntries(new FormData(event.currentTarget))
+    const results = formSchema.safeParse(formValues)
+    if (!results.success) {
+      event.preventDefault()
+      setFormErrors(results.error.flatten().fieldErrors)
+    }
+  }
+
+  return (
+    <div className="ml-auto mr-auto max-w-[600px]">
+      <div className="bg-white rounded-md shadow-md p-6 space-y-6">
+        <Heading size={4}>Login</Heading>
+        {error && <div className="notice error">{error}</div>}
+        <Form onSubmit={onSubmit} method="post" className="space-y-3" autoComplete="off">
+          <FieldWrap label="Username" required errors={formErrors?.username}>
+            {(field) => <input {...field} className="form-field" type="text" name="username" />}
+          </FieldWrap>
+          <FieldWrap label="Password" required errors={formErrors?.password}>
+            {(field) => <input {...field} className="form-field" type="password" name="password" />}
+          </FieldWrap>
+          <footer>
+            <button type="submit" className="button">
+              Login
+            </button>
+          </footer>
+        </Form>
+      </div>
+    </div>
+  )
+}