Authentication

Existing Authentication Code

Since we’re using the standard starter kit, it already has passkey authentication setup.

What is Passkey Authentication?

Passkey authentication is a passwordless authentication method that uses a biometric or device authentication to verify the user’s identity.

How it Works:

A use creates a passkey during the registration process.
A unique public-private key pair is generated.
The private key remains securely stored on the user’s device.
The public key is shared with the service.
When the user logs in, they have to “prove” they have access to the private key.
The service verifies the user’s identity using the public key.

Why Passkey Authentication?

Passkey authentication offers several key advantages:

Enhanced Security: Passkeys are unique, resistant to guessing, and eliminate vulnerabilities associated with traditional passwords. They use biometric authentication like fingerprints, making them much harder to compromise.
User-Friendly: Users can log in quickly using biometric data or device authentication, removing the need to remember complex passwords. This creates a frictionless access experience across different platforms.
Phishing Resistance: Passkeys are tied to specific websites, making them immune to phishing attacks that typically trick users into entering credentials on fake sites.

Let’s start by taking a look at the worker.tsx file. This file sets up our Cloudflare worker, but it also handles all the routing, middleware, and interrupters.


12 collapsed lines
1
import { defineApp, ErrorResponse } from "@redwoodjs/sdk/worker";
2
import { route, render, prefix } from "@redwoodjs/sdk/router";
3
import { Document } from "@/app/Document";
4
import { Home } from "@/app/pages/Home";
5
import { setCommonHeaders } from "@/app/headers";
6
import { userRoutes } from "@/app/pages/user/routes";
7
import { sessions, setupSessionStore } from "./session/store";
8
import { Session } from "./session/durableObject";
9
import { db, setupDb } from "./db";
10
import type { User } from "@prisma/client";
11
import { env } from "cloudflare:workers";
12
export { SessionDurableObject } from "./session/durableObject";
13

14
export type AppContext = {
15
  session: Session | null;
16
  user: User | null;
17
};
18

19
export default defineApp([
20
  setCommonHeaders(),
21
  async ({ ctx, request, headers }) => {
22
    await setupDb(env);
23
    setupSessionStore(env);
24

25
    try {
26
      ctx.session = await sessions.load(request);
27
    } catch (error) {
28
      if (error instanceof ErrorResponse && error.code === 401) {
29
        await sessions.remove(request, headers);
30
        headers.set("Location", "/user/login");
31

32
        return new Response(null, {
33
          status: 302,
34
          headers,
35
        });
36
      }
37

38
      throw error;
39
    }
40

41
    if (ctx.session?.userId) {
42
      ctx.user = await db.user.findUnique({
43
        where: {
44
          id: ctx.session.userId,
45
        },
46
      });
47
    }
48
  },
49
  render(Document, [
50
    route("/", () => new Response("Hello, World!")),
51
    route("/protected", [
52
      ({ ctx }) => {
53
        if (!ctx.user) {
54
          return new Response(null, {
55
            status: 302,
56
            headers: { Location: "/user/login" },
57
          });
58
        }
59
      },
60
      Home,
61
    ]),
62
    prefix("/user", userRoutes),
63
  ]),
64
]);

Let’s break it down, chunk by chunk:

14
export type AppContext = {
15
  session: Session | null;
16
  user: User | null;
17
};

On lines 14-17, we’re setting up the types for our application’s context object. Specifically, we’re defining the session and user properties.
- The Session type is defined in src/session/durableObject.ts. (Imported on line 8.) It contains a userId, challenge, and createdAt.
- The User type comes from our @prisma/client. (Imported on line 10.) That’s right! When Prisma generates our migration files, it also generates types.

20
setCommonHeaders(),

On line 20 we’re setting up our common headers. This is a function inside of app/src/headers.ts. (Imported on line 5.) It creates the Security Policies, Transport Policy, Referrer Policy, and Permissions Policy. You can find additional documentation here.

21
async ({ ctx, request, headers }) => {
22
  await setupDb(env);
23
  setupSessionStore(env);
24

25
  try {
26
    ctx.session = await sessions.load(request);
27
  } catch (error) {
28
    if (error instanceof ErrorResponse && error.code === 401) {
29
      await sessions.remove(request, headers);
30
      headers.set("Location", "/user/login");
31

32
      return new Response(null, {
33
        status: 302,
34
        headers,
35
      });
36
    }
37

38
    throw error;
39
  }
40

41
  if (ctx.session?.userId) {
42
    ctx.user = await db.user.findUnique({
43
      where: {
44
        id: ctx.session.userId,
45
      },
46
    });
47
  }
48
},

On lines 21-48, we’re setting up our middleware. This will run between every request and response cycle.
- First, we’re setting up the database setupDb(env); We’ll use this later, on line 42, to find the logged in user.
- Then, we’re setting up the session store setupSessionStore(env);. We’re using Cloudflare’s Durable Objects to store our session data and loading it. sessions.load(request)
- On lines 27-36, we’re catching unauthorized errors. If there’s an error and the status code is 401, we remove the session and redirect the user to the login page.
- On lines 41-47, we check the ctx for the session object. If it has a userId, we connect to the database and get all the user data. The result gets saved into the ctx.user object.

49
render(Document, [

On line 49, we’re setting up our document. This document is referencing our src/app/Document.tsx file. It contains our html, head, and body tags and wraps all of our pages. RedwoodSDK only supports one document.

49
render(Document, [
50
  route("/", () => new Response("Hello, World!")),

On line 50, we’re setting up our home page route. Here, we’re just returning a standard response.

The router, highlights the request response life cycle. The first parameter is the route we’re requesting and the second parameter is the response. This can be a standard response, or it can be a React component. On line 50, we’re returning a standard response that says Hello World!.

We could change that to return the Home component, by changing the second parameter:

50
route("/", () => Home),

We could also change the home page route to use the index method:

1
import { index, route, render, prefix } from "@redwoodjs/sdk/router";
2
...
3
index([Home]);

The index method is similar to the route method, but instead of taking two parameters, it only takes one, the response.

If we move further down our render method, the next route is a /protected route.

51
route("/protected", [
52
  ({ ctx }) => {
53
    if (!ctx.user) {
54
      return new Response(null, {
55
        status: 302,
56
        headers: { Location: "/user/login" },
57
      });
58
    }
59
  },
60
  Home,
61
]),

Here, we’re using an interrupter to see if the user is logged in. This is a function that takes our ctx object and checks to see if the user object exists on it. If it doesn’t, we redirect the user to the login page (lines 54-57). Otherwise, we return the Home component (line 60).

Middleware

Middleware is a function that runs in the middle, between your request to the server and the server’s response.

It allows you to:

Modify or inspect requests before they reach the main application logic
Perform operations like authentication, logging, error handling
Transform or validate data
Add headers or perform other preprocessing tasks

Interrupters

Interrupters will interrupt the flow. Before, the server returns a response, the interrupter will run.

These sound similar, what’s the difference?

Middleware will run before every single route.
Interrupters will only run on specific routes.

In our code, we’re using middleware to attach the user session to our context object, on every request. But, we’re only checking to see if the user is logged in on the home page.

60
prefix("/user", userRoutes),

On line 62, we’re prefixing all of our auth routes with /user. Meaning, our login route will be /user/login and our logout route will be /user/logout.
- login and logout are defined within the userRoutes file, imported on line 6. One of the cool things about the RedwoodSDK router is the parameter is defined through an array. This means, we can define our route information in a separate file and then import it into our worker.tsx file.

We’re co-locating the file that defines our auth routes with our auth pages.

Let’s take a look at userRoutes. This is coming from src/app/pages/user/routes.tsx.

1
import { route } from "@redwoodjs/sdk/router";
2
import { Login } from "./Login";
3
import { sessions } from "@/session/store";
4

5
export const userRoutes = [
6
  route("/login", [Login]),
7
  route("/logout", async function ({ request }) {
8
    const headers = new Headers();
9
    await sessions.remove(request, headers);
10
    headers.set("Location", "/");
11

12
    return new Response(null, {
13
      status: 302,
14
      headers,
15
    });
16
  }),
17
];

We’re defining 2 routes:

/login - This is displaying our login page (on line 6).
/logout - This is our logout route (on line 7), but instead of returning JSX, we’re removing the session (line 9) and redirecting the user to the home page (line 10). Then, returning the response (line 12-15).

Let’s create a third route for registering a new user, giving sign up a dedicated page.

Inside, our src/app/pages/user directory, create a new file called Signup.tsx. Let’s stub out a simple function, just to make sure it’s working:

1
export const Signup = () => {
2
  return <div>Signup</div>;
3
}

Now, we need to add this route to our userRoutes array (inside of src/app/pages/user/routes.ts):

1
import { route } from "@redwoodjs/sdk/router";
2
import { Login } from "./Login";
3
import { Signup } from "./Signup";
4
import { sessions } from "@/session/store";
5

6
export const userRoutes = [
7
  route("/login", [Login]),
8
  route("/signup", [Signup]),
9
  route("/logout", async function ({ request }) {
10
    const headers = new Headers();
11
    await sessions.remove(request, headers);
12
    headers.set("Location", "/");
13

14
    return new Response(null, {
15
      status: 302,
16
      headers,
17
    });
18
  }),
19
];

Within our browser, let’s go to http://localhost:4321/user/signup and you should see:

Now, let’s move over some of the functionality from our Login.tsx to our Signup.tsx. But first, let’s make sure we understand what’s happening in our Login.tsx.

Full Login.tsx code

1
"use client";
15 collapsed lines
2

3
import { useState, useTransition } from "react";
4
import {
5
  startAuthentication,
6
  startRegistration,
7
} from "@simplewebauthn/browser";
8
import {
9
  finishPasskeyLogin,
10
  finishPasskeyRegistration,
11
  startPasskeyLogin,
12
  startPasskeyRegistration,
13
} from "./functions";
14
import { useTurnstile } from "@redwoodjs/sdk/turnstile";
15
import { Button } from "@/app/components/ui/button";
16
// >>> Replace this with your own Cloudflare Turnstile site key
17
const TURNSTILE_SITE_KEY = "0x4AAAAAABBM92GLK3VnyFAr";
18

19
export function Login() {
20
  const [username, setUsername] = useState("");
21
  const [result, setResult] = useState("");
22
  const [isPending, startTransition] = useTransition();
23
  const turnstile = useTurnstile(TURNSTILE_SITE_KEY);
24

25
  const passkeyLogin = async () => {
26
    // 1. Get a challenge from the worker
27
    const options = await startPasskeyLogin();
28

29
    // 2. Ask the browser to sign the challenge
30
    const login = await startAuthentication({ optionsJSON: options });
31

32
    // 3. Give the signed challenge to the worker to finish the login process
33
    const success = await finishPasskeyLogin(login);
34

35
    if (!success) {
36
      setResult("Login failed");
37
    } else {
38
      setResult("Login successful!");
39
    }
40
  };
41

42
  const passkeyRegister = async () => {
43
    // 1. Get a challenge from the worker
44
    const options = await startPasskeyRegistration(username);
45

46
    // 2. Ask the browser to sign the challenge
47
    const registration = await startRegistration({ optionsJSON: options });
48

49
    const turnstileToken = await turnstile.challenge();
50

51
    // 3. Give the signed challenge to the worker to finish the registration process
52
    const success = await finishPasskeyRegistration(
53
      username,
54
      registration,
55
      turnstileToken,
56
    );
57

58
    if (!success) {
59
      setResult("Registration failed");
60
    } else {
61
      setResult("Registration successful!");
62
    }
63
  };
64

65
  const handlePerformPasskeyLogin = () => {
66
    startTransition(() => void passkeyLogin());
67
  };
68

69
  const handlePerformPasskeyRegister = () => {
70
    startTransition(() => void passkeyRegister());
71
  };
72

73
  return (
74
    <main className="bg-bg">
75
      <h1 className="text-4xl font-bold text-red-500">YOLO</h1>
76
      <div ref={turnstile.ref} />
77
      <input
78
        type="text"
79
        value={username}
80
        onChange={(e) => setUsername(e.target.value)}
81
        placeholder="Username"
82
      />
83
      <Button onClick={handlePerformPasskeyLogin} disabled={isPending}>
84
        {isPending ? <>...</> : "Login with passkey"}
85
      </Button>
86
      <Button onClick={handlePerformPasskeyRegister} disabled={isPending}>
87
        {isPending ? <>...</> : "Register with passkey"}
88
      </Button>
89
      {result && <div>{result}</div>}
90
    </main>
91
  );
92
}

Let’s break it down, chunk by chunk:

1
"use client";

On line 1, we have a use client directive. By default, all components within RedwoodSDK are server components. Here, we're explicitly telling React to render this component on the client side (in the browser). Anytime you want there to be interactivity (clicking on buttons or managing state), you'll need to use a client component.

17
const TURNSTILE_SITE_KEY = "0xXXXXXXXXXXXXXXXXXXXXXX";

On line 17, we're setting up our Turnstile site key. We already set this up.

20
const [username, setUsername] = useState("");
21
const [result, setResult] = useState("");

On lines 20-21, we're setting a couple pieces of state.
- username is tied to our username input value.
- result contains our result message.

22
const [isPending, startTransition] = useTransition();

On line 22, we're using React's useTransition hook to manage our loading state. (More on this later, but you can also find more within the official React documentation.)

23
const turnstile = useTurnstile(TURNSTILE_SITE_KEY);

On line 23, the useTurnstile hook gets our Turnstile instance. This hook is coming from RedwoodSDK and is used to handle the challenge and verify our Turnstile token.

25
const passkeyLogin = async () => {
26
  // 1. Get a challenge from the worker
27
  const options = await startPasskeyLogin();
28

29
  // 2. Ask the browser to sign the challenge
30
  const login = await startAuthentication({ optionsJSON: options });
31

32
  // 3. Give the signed challenge to the worker to finish the login process
33
  const success = await finishPasskeyLogin(login);
34

35
  if (!success) {
36
    setResult("Login failed");
37
  } else {
38
    setResult("Login successful!");
39
  }
40
};

On line 25, we're defining our passkeyLogin function.
The functions startPasskeyLogin, startAuthentication, and finishPasskeyLogin are all defined in the src/app/pages/user/functions.ts file. You can find more information about these functions in the Authentication docs.
We start the Passkey login authentication startPasskeyLogin(), and then determine whether it was successful or not.
If it wasn't successful, we set the result message to "Login failed".
Otherwise, we set the result message to "Login successful!".

42
  const passkeyRegister = async () => {
43
    // 1. Get a challenge from the worker
44
    const options = await startPasskeyRegistration(username);
45

46
    // 2. Ask the browser to sign the challenge
47
    const registration = await startRegistration({ optionsJSON: options });
48

49
    const turnstileToken = await turnstile.challenge();
50

51
    // 3. Give the signed challenge to the worker to finish the registration process
52
    const success = await finishPasskeyRegistration(
53
      username,
54
      registration,
55
      turnstileToken,
56
    );
57

58
    if (!success) {
59
      setResult("Registration failed");
60
    } else {
61
      setResult("Registration successful!");
62
    }
63
  };

On lines 42-63, we're defining our passkeyRegister function. This is similar the passkeyLogin function, but this handles the registration process.
- The functions startPasskeyRegistration, startRegistration, and finishPasskeyRegistration are all defined in the src/app/pages/user/functions.ts file. You can find more information about these functions in the Passkey Authentication docs.
- If the registration isn't successful, we set the result message to "Registration failed".
- Otherwise, we set the result message to "Registration successful!".

65
const handlePerformPasskeyLogin = () => {
66
  startTransition(() => void passkeyLogin());
67
};

On lines 65, thehandlePerformPasskeyLogin function handles the transition and calls the passkeyLogin function.

69
const handlePerformPasskeyRegister = () => {
70
  startTransition(() => void passkeyRegister());
71
};

On lines 60-62, thehandlePerformPasskeyRegister function handles the transition and calls the passkeyRegister function.

77
<input
78
  type="text"
79
  value={username}
80
  onChange={(e) => setUsername(e.target.value)}
81
  placeholder="Username"
82
/>

On lines 77-82, we're rendering an input field. This is tied to our username state (line 20).

74
<Button onClick={handlePerformPasskeyLogin} disabled={isPending}>
75
  {isPending ? <>...</> : "Login with passkey"}
76
</Button>
77
<Button onClick={handlePerformPasskeyRegister} disabled={isPending}>
78
  {isPending ? <>...</> : "Register with passkey"}
79
</Button>

On lines 74-79, we're rendering two buttons. These buttons are tied to our handlePerformPasskeyLogin and handlePerformPasskeyRegister functions.

80
{result && <div>{result}</div>}

On lines 80, we're rendering the result message.

Let’s start by copying all the contents from our Login.tsx and pasting it into our Signup.tsx. Be sure that the component is still named Signup.

20
export function Signup() {

Let’s remove all the pieces that aren’t related to registering.

We don’t need the passkeyLogin function (lines 26-36)
You can delete the handlePerformPasskeyLogin function (originally lines 56-58)
Let’s also remove the “Login with passkey” button (originally lines 74-76)

Now, we need to clean up our unused imports. Within our IDE, these should be grayed out:

Cleaned up Signup.tsx code

1
"use client";
2

3
import { useState, useTransition } from "react";
4
import {
5
  startRegistration,
6
} from "@simplewebauthn/browser";
7
import {
8
  finishPasskeyRegistration,
9
  startPasskeyRegistration,
10
} from "./functions";
11
import { useTurnstile } from "@redwoodjs/sdk/turnstile";
12
import { Button } from "@/app/components/ui/button";
13

14
// >>> Replace this with your own Cloudflare Turnstile site key
15
const TURNSTILE_SITE_KEY = "0x4AAAAAABCpUSmzOt7TgetS";
16

17
export function Signup() {
18
  const [username, setUsername] = useState("");
19
  const [result, setResult] = useState("");
20
  const [isPending, startTransition] = useTransition();
21
  const turnstile = useTurnstile(TURNSTILE_SITE_KEY);
22

23
  const passkeyRegister = async () => {
24
    const options = await startPasskeyRegistration(username);
25
    const registration = await startRegistration({ optionsJSON: options });
26
    const turnstileToken = await turnstile.challenge();
27

28
    const success = await finishPasskeyRegistration(
29
      username,
30
      registration,
31
      turnstileToken,
32
    );
33

34
    if (!success) {
35
      setResult("Registration failed");
36
    } else {
37
      setResult("Registration successful!");
38
    }
39
  };
40

41
  const handlePerformPasskeyRegister = () => {
42
    startTransition(() => void passkeyRegister());
43
  };
44

45
  return (
46
    <main className="bg-bg">
47
      <h1 className="text-4xl font-bold text-red-500">YOLO</h1>
48
      <div ref={turnstile.ref} />
49
      <input
50
        type="text"
51
        value={username}
52
        onChange={(e) => setUsername(e.target.value)}
53
        placeholder="Username"
54
      />
55
      <Button onClick={handlePerformPasskeyRegister} disabled={isPending}>
56
        {isPending ? <>...</> : "Register with passkey"}
57
      </Button>
58
      {result && <div>{result}</div>}
59
    </main>
60
  );
61
}

Now, let’s do the opposite for our Login.tsx.

We can remove the passkeyRegister function (lines 38-54)
and the handlePerformPasskeyRegister function (originally lines 60-62)
We don’t need the Register with passkey button (originally lines 77-79)

Don’t forget to clean up your unused imports, too.

Cleaned up Login.tsx code

1
"use client";
2

3
import { useState, useTransition } from "react";
4
import { startAuthentication } from "@simplewebauthn/browser";
5
import { finishPasskeyLogin, startPasskeyLogin } from "./functions";
6
import { useTurnstile } from "redwoodsdk/turnstile";
7
import { Button } from "@/app/components/ui/button";
8

9
// >>> Replace this with your own Cloudflare Turnstile site key
10
const TURNSTILE_SITE_KEY = "0x4AAAAAABBM92GLK3VnyFAr";
11

12
export function LoginPage() {
13
  const [username, setUsername] = useState("");
14
  const [result, setResult] = useState("");
15
  const [isPending, startTransition] = useTransition();
16
  const turnstile = useTurnstile(TURNSTILE_SITE_KEY);
17

18
  const passkeyLogin = async () => {
19
    const options = await startPasskeyLogin();
20
    const login = await startAuthentication({ optionsJSON: options });
21
    const success = await finishPasskeyLogin(login);
22

23
    if (!success) {
24
      setResult("Login failed");
25
    } else {
26
      setResult("Login successful!");
27
    }
28
  };
29

30
  const handlePerformPasskeyLogin = () => {
31
    startTransition(() => void passkeyLogin());
32
  };
33

34
  return (
35
    <main className="bg-bg">
36
      <h1 className="text-4xl font-bold text-red-500">YOLO</h1>
37
      <div ref={turnstile.ref} />
38
      <input
39
        type="text"
40
        value={username}
41
        onChange={(e) => setUsername(e.target.value)}
42
        placeholder="Username"
43
      />
44
      <Button onClick={handlePerformPasskeyLogin} disabled={isPending}>
45
        {isPending ? <>...</> : "Login with passkey"}
46
      </Button>
47
      {result && <div>{result}</div>}
48
    </main>
49
  );
50
}

Now, let’s test our code:

pnpm run dev

Within the browser, go to http://localhost:2332/user/signup.

Add a username and click “Register with passkey”.

If you’re using a Password Manager, like 1Password, it’s easy to create and manage your passkeys. Of course, there are other tools to choose from. Apple even has their own native solution.

Once you’ve successfully logged in, you should see a successful Cloudflare Turnstile widget. And our result message displayed at the bottom of the form.

You should also be able to see the new user in the database:

And the related entry in the Credential table:

Now, let’s try logging in. Go to http://localhost:2332/user/login, enter your username and click on the Login with passkey button. Then, you should be prompted for the passkey.

Once you’ve successfully logged in, you should see a successful result message displayed below the form.

Now, navigate to http://localhost:2332/. You should see a message that you’re logged in as the user you just created.

Did you realize we haven’t been able to access the home page before because it was protected by an interruptor?

Interruptor code (worker.tsx, lines 35-42)

34
index([
35
  ({ appContext }) => {
36
    if (!appContext.user) {
37
      return new Response(null, {
38
        status: 302,
39
        headers: { Location: "/user/login" },
40
      });
41
    }
42
  },
43
  Home,
44
]),

Try logging out, by going to http://localhost:2332/user/logout. You should be redirected to the login page.

Now, try going to the homepage again: http://localhost:2332/. You should be redirected to the login page.

😎 Cool, right?

Now that we know our authentication code is working, let’s add some styles and make it look good.

If we take a look at the final design within Figma, this is what we’re aiming for:

This is similar to the final sign up page. The only difference is the content on the right side.

Let’s create a layout component, that we can use in both places.

Creating a Layout Component

When we installed shadcn/ui, it added a lot of variables to the bottom of our styles.css file. In CSS, order matters. So, let’s move our @theme definition to the bottom of the file so that it reads as more important and will override any shadcn/ui default values.

Updated styles.css file

1
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');
2
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
3

4
@import "tailwindcss";
5

6
@import "tw-animate-css";
7

8
@custom-variant dark (&:is(.dark *));
9

10
body {
11
  font-family: var(--font-body);
12
}
13

14
:root {
15
  --radius: 0.625rem;
16
  --background: oklch(1 0 0);
17
  --foreground: oklch(0.145 0 0);
18
  --card: oklch(1 0 0);
19
  --card-foreground: oklch(0.145 0 0);
20
  --popover: oklch(1 0 0);
21
  --popover-foreground: oklch(0.145 0 0);
22
  --primary: oklch(0.205 0 0);
23
  --primary-foreground: oklch(0.985 0 0);
24
  --secondary: oklch(0.97 0 0);
25
  --secondary-foreground: oklch(0.205 0 0);
26
  --muted: oklch(0.97 0 0);
27
  --muted-foreground: oklch(0.556 0 0);
28
  --accent: oklch(0.97 0 0);
29
  --accent-foreground: oklch(0.205 0 0);
30
  --destructive: oklch(0.577 0.245 27.325);
31
  --border: oklch(0.922 0 0);
32
  --input: oklch(0.922 0 0);
33
  --ring: oklch(0.708 0 0);
34
  --chart-1: oklch(0.646 0.222 41.116);
35
  --chart-2: oklch(0.6 0.118 184.704);
36
  --chart-3: oklch(0.398 0.07 227.392);
37
  --chart-4: oklch(0.828 0.189 84.429);
38
  --chart-5: oklch(0.769 0.188 70.08);
39
  --sidebar: oklch(0.985 0 0);
40
  --sidebar-foreground: oklch(0.145 0 0);
41
  --sidebar-primary: oklch(0.205 0 0);
42
  --sidebar-primary-foreground: oklch(0.985 0 0);
43
  --sidebar-accent: oklch(0.97 0 0);
44
  --sidebar-accent-foreground: oklch(0.205 0 0);
45
  --sidebar-border: oklch(0.922 0 0);
46
  --sidebar-ring: oklch(0.708 0 0);
47
}
48

49
.dark {
50
  --background: oklch(0.145 0 0);
51
  --foreground: oklch(0.985 0 0);
52
  --card: oklch(0.205 0 0);
53
  --card-foreground: oklch(0.985 0 0);
54
  --popover: oklch(0.205 0 0);
55
  --popover-foreground: oklch(0.985 0 0);
56
  --primary: oklch(0.922 0 0);
57
  --primary-foreground: oklch(0.205 0 0);
58
  --secondary: oklch(0.269 0 0);
59
  --secondary-foreground: oklch(0.985 0 0);
60
  --muted: oklch(0.269 0 0);
61
  --muted-foreground: oklch(0.708 0 0);
62
  --accent: oklch(0.269 0 0);
63
  --accent-foreground: oklch(0.985 0 0);
64
  --destructive: oklch(0.704 0.191 22.216);
65
  --border: oklch(1 0 0 / 10%);
66
  --input: oklch(1 0 0 / 15%);
67
  --ring: oklch(0.556 0 0);
68
  --chart-1: oklch(0.488 0.243 264.376);
69
  --chart-2: oklch(0.696 0.17 162.48);
70
  --chart-3: oklch(0.769 0.188 70.08);
71
  --chart-4: oklch(0.627 0.265 303.9);
72
  --chart-5: oklch(0.645 0.246 16.439);
73
  --sidebar: oklch(0.205 0 0);
74
  --sidebar-foreground: oklch(0.985 0 0);
75
  --sidebar-primary: oklch(0.488 0.243 264.376);
76
  --sidebar-primary-foreground: oklch(0.985 0 0);
77
  --sidebar-accent: oklch(0.269 0 0);
78
  --sidebar-accent-foreground: oklch(0.985 0 0);
79
  --sidebar-border: oklch(1 0 0 / 10%);
80
  --sidebar-ring: oklch(0.556 0 0);
81
}
82

83
@theme inline {
84
  --radius-sm: calc(var(--radius) - 4px);
85
  --radius-md: calc(var(--radius) - 2px);
86
  --radius-lg: var(--radius);
87
  --radius-xl: calc(var(--radius) + 4px);
88
  --color-background: var(--background);
89
  --color-foreground: var(--foreground);
90
  --color-card: var(--card);
91
  --color-card-foreground: var(--card-foreground);
92
  --color-popover: var(--popover);
93
  --color-popover-foreground: var(--popover-foreground);
94
  --color-primary: var(--primary);
95
  --color-primary-foreground: var(--primary-foreground);
96
  --color-secondary: var(--secondary);
97
  --color-secondary-foreground: var(--secondary-foreground);
98
  --color-muted: var(--muted);
99
  --color-muted-foreground: var(--muted-foreground);
100
  --color-accent: var(--accent);
101
  --color-accent-foreground: var(--accent-foreground);
102
  --color-destructive: var(--destructive);
103
  --color-border: var(--border);
104
  --color-input: var(--input);
105
  --color-ring: var(--ring);
106
  --color-chart-1: var(--chart-1);
107
  --color-chart-2: var(--chart-2);
108
  --color-chart-3: var(--chart-3);
109
  --color-chart-4: var(--chart-4);
110
  --color-chart-5: var(--chart-5);
111
  --color-sidebar: var(--sidebar);
112
  --color-sidebar-foreground: var(--sidebar-foreground);
113
  --color-sidebar-primary: var(--sidebar-primary);
114
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
115
  --color-sidebar-accent: var(--sidebar-accent);
116
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
117
  --color-sidebar-border: var(--sidebar-border);
118
  --color-sidebar-ring: var(--sidebar-ring);
119
}
120

121
@layer base {
122
  * {
123
    @apply border-border outline-ring/50;
124
  }
125
  body {
126
    @apply bg-background text-foreground;
127
  }
128
}
129

130
@theme {
131
  --font-display: "Poppins", sans-serif;
132
  --font-body: "Inter", sans-serif;
133

134
  --color-bg: #e4e3d4;
135
  --color-border: #eeeef0;
136

137
  --color-primary: #f7b736;
138
  --color-secondary: #f1f1e8;
139
  --color-destructive: #ef533f;
140

141
  --color-tag-applied: #b1c7c0;
142
  --color-tag-interview: #da9b7c;
143
  --color-tag-new: #db9a9f;
144
  --color-tag-rejected: #e4e3d4;
145
  --color-tag-offer: #aae198;
146
}

If you take a look in the browser, by changing the position of the @theme block, it also changed the button’s background color to yellow, our primary color. Perfect.

Now, let’s start on our layout component. Inside our app directory, create a new folder called layouts. Then, a new file called AuthLayout.tsx:

Directorysrc
- Directoryapp
  - Directorylayouts
    AuthLayout.tsx

Let’s start by stubbing out our component:

1
const AuthLayout = ({ children }: { children: React.ReactNode}) => {
2
  return (
3
    <div className="bg-bg min-h-screen min-w-screen p-12">
4
      {children}
5
    </div>
6
  )
7
}
8

9
export { AuthLayout }

On our wrapping div, I've added a few Tailwind styles.

bg-bg uses the custom background color we set up previously.
min-h-screen and min-w-screen ensures that the background color will take up the full screen.
p-12 adds 48px of padding around the entire screen.

As we continue to make adjustments, we want to be able to see the changes we’re making within the browser.

Inside our Login component let’s replace our main tag with our AuthLayout component.

37
return (
38
  <AuthLayout>
39
  <h1 className="text-4xl font-bold text-red-500">YOLO</h1>
40
    <div ref={turnstile.ref} />
41
    <input
42
      type="text"
43
      value={username}
44
      onChange={(e) => setUsername(e.target.value)}
45
      placeholder="Username"
46
    />
47
    <Button onClick={handlePerformPasskeyLogin} disabled={isPending}>
48
      {isPending ? <>...</> : "Login with passkey"}
49
    </Button>
50
    {result && <div>{result}</div>}
51
  </AuthLayout>
52
)

If we head over to the browser, we should see something like this:

For reference, this was before our AuthLayout component:

Sweet! Let’s keep going.

Inside our wrapping div, let’s set up our two column grid:

3
<div className="bg-bg min-h-screen min-w-screen p-12">
4
  <div className="grid grid-cols-2 min-h-[calc(100vh-96px)] rounded-xl border-2 border-[#D6D5C5]">
5
    {children}
6
  </div>
7
</div>

grid sets the display to grid, then we can specify that there are two columns with grid-cols-2
We want the grid to take up the full height of the screen. If we use min-h-screen, it will set the minimum height to 100vh, but it will also introduce a scrollbar because we gave the wrapping div padding of p-12. There's no way to know exactly what the height of the screen is, but we can have the browser calculate it for us with calc(100vh-96px). p-12 puts 48px of padding on the top and bottom or 96px total. You could also use 6rem if you want to avoid using px units.
rounded-xl adds rounded corners
border-2 border-[#D6D5C5] adds a 2px solid border to our container. The border color we're using is darker than the content border color we established in the styles.css file earlier. Since we're only using this color once, it's not worth creating a CSS property for it. We can set it as an arbitrary value with [].

Inside our grid, we need two divs for our two columns. Our {children} will go in the second column, on the right side.

For the column on the left, we have a repeating background image. You can export this image from Figma yourself, or grab all the image assets for this project here.

Inside the root of our project, create a new folder called public. Inside, I’m going to create another folder called images and drop the image inside.

Directorypublic/
- Directoryimages/
  - bg.png
  - logo.svg
Directorysrc/
- …

While we’re here, let’s also grab the logo. I’m only going to grab the owl. We can use “Apply Wize” text and style it with CSS. This will give us a little more control over the display (horizontal or stacked) without having to use two separate images. You can export the owl as an SVG (or download it directly).

For our left column div:

3
<div className="bg-bg min-h-screen min-w-screen p-12">
4
  <div className="grid grid-cols-2 min-h-[calc(100vh-96px)] rounded-xl border-2 border-[#D6D5C5]">
5
    <div className="bg-[url('/images/bg.png')] bg-repeat rounded-l-xl">
6
      <img src="/images/logo.svg" alt="Apply Wize" />
7
      <div>
8
        Apply Wize
9
      </div>
10
    </div>
11
    <div>
12
      {children}
13
    </div>
14
  </div>
15
</div>

This is the only place we're using our background image, so let's reach for an another arbitrary class, using []. Since we've put our images inside the public/images directory, this will be available from the root and we can access it with an absolute path: /images/bg.png.
We want the background to repeat in the x and y directions with bg-repeat.
rounded-l-xl adds rounded corners to the left side.
I also used a standard img tag to display the logo and added the Apply Wize text with a wrapping div

Let’s check our progress in the browser:

Cool. 😎 We’re almost there, we just need to tighten up a few more things.

I want the content to be centered vertically and horizontally. You can do this by adding a class of flex and items-center and justify-center. But, I do this a lot. So, let’s turn this into a utility function that we can reuse.

Inside our styles.css file, let’s add a new utility function. At the very bottom of the file, add:

@utility center {
  @apply flex items-center justify-center;
}

Within Tailwind v4, you can add custom utility functions with the @utility directive. NOTE: center does not have a . in front, like a class would.

Now, we can use this on both of our columns:

3
<div className="bg-bg min-h-screen min-w-screen p-12">
4
  <div className="grid grid-cols-2 min-h-[calc(100vh-96px)] rounded-xl border-2 border-[#D6D5C5]">
5
    <div className="center bg-[url('/images/bg.png')] bg-repeat rounded-l-xl">
6
      <img src="/images/logo.svg" alt="Apply Wize" />
7
      <div>
8
        Apply Wize
9
      </div>
10
    </div>
11
    <div className="center">
12
      {children}
13
    </div>
14
  </div>
15
</div>

It’s centering our content, but it’s also horizontally aligning everything. Let’s wrap our column content with another div.

3
<div className="bg-bg min-h-screen min-w-screen p-12">
4
  <div className="grid grid-cols-2 min-h-[calc(100vh-96px)] rounded-xl border-2 border-[#D6D5C5]">
5
    <div className="center bg-[url('/images/bg.png')] bg-repeat rounded-l-xl">
6
      <div className="center">
7
        <div>
8
          <img src="/images/logo.svg" alt="Apply Wize" />
9
          <div className="text-5xl text-white font-bold">
10
            Apply Wize
11
          </div>
12
        </div>
13
      </div>
14
    </div>
15
    <div className="center">
16
      <div>{children}</div>
17
    </div>
18
  </div>
19
</div>

To center the owl, we can use the mx-auto class. This will set the left and right margins to auto.

7
<img src="/images/logo.svg" alt="Apply Wize" className="mx-auto" />

Now, let’s style the Apply Wize text.

8
<div className="text-5xl text-white font-bold">
9
  Apply Wize
10
</div>

We'll set the font size 48px with text-5xl
The color to white with text-white
The font weight to bold with font-bold

In our mock-up, we also had a quote in the bottom left corner:

“Transform the job hunt from a maze into a map.”

We want this to be fixed to the bottom of the left column. So, this needs to be inside our left column div, but outside of the div containing our logo.

5
<div className="center bg-[url('/images/bg.png')] bg-repeat rounded-l-xl">
6
  <div>
7
    <img src="/images/logo.svg" alt="Apply Wize" className="mx-auto" />
8
    <div className="text-5xl text-white font-bold">
9
      Apply Wize
10
    </div>
11
  </div>
12
  <div>“Transform the job hunt from a maze into a map.”</div>
13
</div>

To style the text:

12
<div className="text-white text-sm absolute bottom-0 left-0 right-0 p-10">
13
  “Transform the job hunt from a maze into a map.”
14
</div>

We want to it to be white, text-white and small (14px) text-sm
Then, we can position it absolutely to the bottom left corner with absolute bottom-0 left-0
We want to add a little bit of spacing from the edge with p-10 which is 40px of padding

This looks good-ish. The text is styled correctly, but the placement is off. We could adjust our our top and left values, but that’s not the real problem. In CSS, positioning is relative. Meaning, it takes the parent container and it’s positioning into consideration.

Our parent div doesn’t have any positioning applied (by default it’s static). Therefore, it looks to the page. And, yes, our quote is positioned to the bottom left corner of the page, with 40px of padding.

If we add a class of relative to our parent div, then it will position our quote relative to the parent container.

5
<div className="relative center bg-[url('/images/bg.png')] bg-repeat rounded-l-xl">

If you take a look inside the browser:

Notice, this also allows our quote to “live” inside the container and wrap appropriately.

It’s tempting to call the styling for the left side done, but with the quote it looks bottom heavy. Even though the logo is programmatically centered, it’s not optically centered. We can shift it up:

6
<div className="-top-[100px] relative">
7
  <img src="/images/logo.svg" alt="Apply Wize" className="mx-auto" />
8
  <div className="text-5xl text-white font-bold">
9
    Apply Wize
10
  </div>
11
</div>

We moved the logo up 100px with -top-[100px]
In order for top to work, we need also need to add a position of relative, so that the browser knows we're moving it relative to it's current position.

If we take a look in the browser:

The left side is finished! 🎉

Now, let’s style the right side. This is easy!

16
<div className="center bg-white rounded-r-xl">
17
  <div className="w-full">{children}</div>
18
</div>

We want all the content to be centered, with our custom utility center
The background should be white: bg-white
And the corners on the right should be rounded, rounded-r-xl
For the div that wraps {children}, we want it to take the full width of it's container with w-full

The styling for auth layout component is complete, but there’s still one thing bothering me. (And maybe it’s been bothering you too.)

We have a TypeScript error on {children}. It doesn’t know what the type of children is.

This is easy enough to fix. We just need to tell what it what to expect:

1
const AuthLayout = ({ children }: { children: React.ReactNode }) => {

Final src/app/layouts/AuthLayout.tsx code

1
const AuthLayout = ({ children }: { children: React.ReactNode }) => {
2
  return (
3
    <div className="bg-bg min-h-screen min-w-screen p-12">
4
      <div className="grid grid-cols-2 min-h-[calc(100vh-96px)] rounded-xl border-2 border-[#D6D5C5]">
5
        <div className="relative center bg-[url('/images/bg.png')] bg-repeat rounded-l-xl">
6
          <div className="-top-[100px] relative">
7
            <img src="/images/logo.svg" alt="Apply Wize" className="mx-auto" />
8
            <div className="text-5xl text-white font-bold">
9
              Apply Wize
10
            </div>
11
          </div>
12
          <div className="text-white text-sm absolute bottom-0 left-0 right-0 p-10">
13
            “Transform the job hunt from a maze into a map.”
14
          </div>
15
        </div>
16
        <div className="center bg-white rounded-r-xl">
17
          <div>{children}</div>
18
        </div>
19
      </div>
20
    </div>
21
  );
22
};
23

24
export { AuthLayout };

Now, we can jump over to our Login component and style it.

First we can delete our h1, YOLO text. Now, let’s just work from top to bottom.

In the top, right corner, we have a link to the signup page. This is similar to our the quote in our layout component, except this time we want it positioned to the top, right corner.

48
return (
49
  <AuthLayout>
50
    <div className="absolute top-0 right-0 p-10">
51
      <a href="#" className="font-display font-bold text-black text-sm underline underline-offset-8 hover:decoration-primary">
52
        Register
53
      </a>
54
    </div>
55
    ...
56
  </AuthLayout>
57
)

We're positioning the link with absolute to the top right, top-0 right-0 and adding p-10 or 40px of padding
For the Register link, we want to use the font Poppins or font-display, make it bold font-bold, black text-black, and small text-sm
I want to make sure this looks like a link. Let's add a class of underline and offset with underline-offset-8 to give it some space from the text. Then, when we hover, let's just change the underline color with hover:decoration-primary

Now, we have the same positioning “problem” that we had with our quote. We need the link to be positioned relative to the container. Let’s go back to the AuthLayout component and add a class of relative:

16
<div className="center bg-white rounded-r-xl relative">
17
  <div className="w-full">{children}</div>
18
</div>

Next up, let’s wrap all of our form content with a div and add the text at the top of our form:

50
<div className="max-w-[400px] w-full mx-auto px-10">
51
  <h1 className="text-center">Login</h1>
52
  <p className="py-6">Enter your username below to sign-in.</p>
53

54
  <div ref={turnstile.ref} />
55
  <input
56
    type="text"
57
    value={username}
58
    onChange={(e) => setUsername(e.target.value)}
59
    placeholder="Username"
60
  />
61
  <Button onClick={handlePerformPasskeyLogin} disabled={isPending}>
62
    {isPending ? <>...</> : "Login with Passkey"}
63
  </Button>
64
  {result && <div>{result}</div>}
65
</div>

On our wrapping div I don't want the content to be more than 400px wide with max-w-[400px]. But, I want it to take up as much space as possible with w-full.
I want it to be centered with mx-auto.
On smaller screens, I want to ensure there's some horizontal padding with px-10
Our h1 should be centered with text-center
I also want to add some vertical spacing with py-6

Let’s also add some text below our form:

68
<Button onClick={handlePerformPasskeyLogin} disabled={isPending} className="font-display w-full mb-6">
69
    {isPending ? <>...</> : "Login with passkey"}
70
  </Button>
71
  {result && <div>{result}</div>}
72
  <p>By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</p>

I want to add some more styling, but I want to be able to reuse these styles on our Signup page, so let’s stick these updates inside our styles.css file.

In CSS order matters. The @layer CSS at-rule makes it easy to declare a layer and set the order of preference.

I like to order my CSS:

Base styles are at the top. These are for styling generic HTML elements. No classes, just tags.
Component styles. These are for styling classes that get used across multiple components and pages.
Page specific styles. These are for styling elements on a specific page.

Based on this ordering, we get more specific as we move down the file.

At the very bottom of our styles.css file, let’s start by setting up @layer for each grouping:

238
@layer base, components, page;
239

240
@layer base {}
241

242
@layer components {}
243

244
@layer page {}

Did these @layers give you déjà vu. Feels similar to Tailwind v3? It’s the exact same concept! But, because these layers are no longer established in Tailwind, we have to define the order ourselves: @layer base, components, page;

Technically, we could list our layers in any order we want:

@layer page {}
@layer components {}
@layer base {}

It will still be applied in the correct order because we set the ordering, here:

@layer base, components, page;

For all our headings (h1, h2, h3, etc.), we want to use the font Poppins, font-display, and make it bold font-bold. Let’s stick this inside our base layer:

@layer base {
  h1, h2, h3 {
    @apply font-display font-bold;
  }
}

Then, let’s also add some more specific styles for our h1 since it’s a page title:

@layer components {
  .page-title {
    @apply text-3xl
  }
}

We're setting the font size to 30px with text-3xl

Back in our Login component, let’s add the class of page-title to our h1:

47
<h1 className="page-title text-center">Login</h1>

We have a couple of paragraphs of text, but I only want these classes to be applied to our auth forms. Let’s add a class of auth-form to our wrapping div:

46
<div className="auth-form max-w-[400px] w-full mx-auto px-10">
14 collapsed lines
47
  <h1 className="text-center">Login</h1>
48
  <p className="py-6">Enter your username below to sign-in.</p>
49

50
  <div ref={turnstile.ref} />
51
  <input
52
    type="text"
53
    value={username}
54
    onChange={(e) => setUsername(e.target.value)}
55
    placeholder="Username"
56
  />
57
  <Button onClick={handlePerformPasskeyLogin} disabled={isPending}>
58
    {isPending ? <>...</> : "Login with Passkey"}
59
  </Button>
60
  {result && <div>{result}</div>}
61
</div>

In our styles.css file, let’s target the auth-form class:

@layer page {
  /* login page */
  .auth-form {
    p { @apply text-sm text-zinc-500 text-center;
      a { @apply text-zinc-500 hover:text-black underline whitespace-nowrap; }
    }
  }
}

You'll notice I'm using CSS nesting to target the p and a tags inside the auth-form class. This gets rendered as .auth-form p and .auth-form p a.
For the paragraph, I want the text to be small text-sm, gray text-zinc-500 (this is a Tailwind color), and centered text-center.
For a link inside our paragraph, the color should be gray text-zinc-500, but when we hover over it, it should be black hover:text-black.
Let's underline the link so that we it's obvious it's a link.
I'm also going to add a class of whitespace-nowrap to prevent the link from wrapping to a new line. Meaning, "Terms of Service" or "Privacy Policy" will fit on a single line.

If we take a look in the browser, this looks great. The only thing we lack is the input field and button styles. Let’s head back to our styles.css file:

@layer base {
4 collapsed lines
  h1, h2, h3 {
    @apply font-display font-bold;
  }

  /* form elements */
  input[type="text"] {
    @apply border-border border-1 rounded-md px-3 h-9 block w-full mb-2 text-base;
  }
}

Let's target an input with a type of text with input[type="text"]. Since, we're styling a base tag, we can stick this in the base layer.
We want to add a border with a color of border border-border and a width of 1px with border-1.
Let's round the corners with rounded-md
Add some horizontal padding px-3
Set the height to 36px with h-9
Give our input a display of block. This ensure that the input has it's own line.
It should span the entire width of its container w-full.
Let's add some spacing to the bottom with mb-2 (8px)
Set the font size to 16px with text-base

For the button, we’re using the shadcn/ui button component. Let’s crack it open:

9
const buttonVariants = cva(
10
  "font-bold inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
11
  {
12
    variants: {
13
      variant: {
14
        default:
15
          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
22 collapsed lines
16
        destructive:
17
          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
18
        outline:
19
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
20
        secondary:
21
          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
22
        ghost:
23
          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
24
        link: "text-primary underline-offset-4 hover:underline",
25
      },
26
      size: {
27
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
28
        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
29
        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
30
        icon: "size-9",
31
      },
32
    },
33
    defaultVariants: {
34
      variant: "default",
35
      size: "default",
36
    },
37
  }
38
)

Near the top of the file, there's a variable called buttonVariants that contains all the Tailwind styling.
Let's make the button text bold by adding a class of font-bold within the first list of classes. This ensures that all button variants will be bold. You'll also need to remove font-medium from the list. Otherwise, the two classes will conflict.
The first variant is the default variant and has a class of bg-primary. This is why our button is using our yellow, primary color. We've already set --color-primary within our styles.css file.

The button text is appearing white because of the text-primary-foreground class. If you do a quick search within the styles.css file, you can find the --primary-foreground definition nested inside the :root and .dark blocks.

We can override this by adding a class of --color-primary-foreground within our @theme block:

@theme {
  ...
  --color-primary-foreground: #000;

Let’s also add a few specific classes just for login button. I don’t want this to get applied by default to every button we use.

56
<Button onClick={handlePerformPasskeyLogin} disabled={isPending} className="font-display w-full mb-6">
57
  {isPending ? <>...</> : "Login with Passkey"}
58
</Button>

At the end of our Button component, let's add classes to use the font Poppins, font-display, make the button span the full width of its container w-full, and add some spacing to the bottom with mb-6

Let’s take a look at the final result within the browser:

👏 Well done!

But, there’s one more thing. Let’s move the result message above the form and below our text:

46
<div className="auth-form max-w-[400px] w-full mx-auto px-10">
47
  <h1 className="page-title text-center">Login</h1>
48
  <p className="py-6">Enter your username below to sign-in.</p>
49

50
  {result && <div>{result}</div>}
13 collapsed lines
51

52
  <div ref={turnstile.ref} />
53
  <input
54
    type="text"
55
    value={username}
56
    onChange={(e) => setUsername(e.target.value)}
57
    placeholder="Username"
58
  />
59
  <Button onClick={handlePerformPasskeyLogin} disabled={isPending} className="font-display w-full mb-6">
60
    {isPending ? <>...</> : "Login with Passkey"}
61
  </Button>
62

63
  <p>By clicking continue, you agree to our <a href={link('/legal/terms')}>Terms of Service</a> and <a href={link('/legal/privacy')}>Privacy Policy</a>.</p>
64
</div>

We can also style this, using an <Alert /> shadcn/ui component. We just need to import our component at the top and and wrap our {result}.

import { Alert, AlertTitle } from "@/app/components/ui/alert";
import { AlertCircle } from "lucide-react";
...
{result && (
  <Alert variant="destructive" className="mb-5">
    <AlertCircle className="h-4 w-4"/>
    <AlertTitle>{result}</AlertTitle>
  </Alert>
)}

Alert, AlertCircle, and AlertTitle are all from the shadcn/ui Alert component. You can find the full documentation here.
Let's set the variant to destructive
and add some margin to the bottom with mb-5

You’ll need to login (successfully or unsuccessfully) to see the alert.

I know, it feels strange to see a red alert message when we were able to successfully login. But, really, if we were able to login successfully, we want to be redirected to the homepage. We can update the passkeyLogin function (starts on line 30):

30
const passkeyLogin = async () => {
9 collapsed lines
31
  // 1. Get a challenge from the worker
32
  const options = await startPasskeyLogin();
33

34
  // 2. Ask the browser to sign the challenge
35
  const login = await startAuthentication({ optionsJSON: options });
36

37
  // 3. Give the signed challenge to the worker to finish the login process
38
  const success = await finishPasskeyLogin(login);
39

40
  if (!success) {
41
    setResult("Login failed");
42
  } else {
43
    window.location.href = link('/');
44
  }
45
};

If we weren't successful, it will still set the result message to "Login failed."
If we were successful, it will redirect us to the homepage.

🥳 Excellent!

But, there’s one more thing (there’s always one more thing). We need to add links to our Register, Terms of Service, and Privacy Policy pages.

We could make our links “simple” and use something like this:

<a href="/register">Register</a>

This will definitely get us where we want to go. The only problem is, it’s not type safe and prone to typos.

Within our src/app/shared folder, there’s a file inside called links.ts.

1
import { defineLinks } from "redwoodsdk/router";
2

3
export const link = defineLinks(["/"]);

At first glance, this file is a little sparse.

On line 1, we're importing the defineLinks from the RedwoodSDK.
On line 3, we're defining an array of all our links or routes. Right now, there's only one, our home page, at "/".

Let’s add reference links for all our other pages:

3
export const link = defineLinks([
4
  "/",
5
  "/user/login",
6
  "/user/signup",
7
  "/user/logout",
8
  "/legal/privacy",
9
  "/legal/terms",
10
]);

Now, let’s go back to our Login component and update our Register link.

import { link } from "@/app/shared/links";
...
<a href={link('/user/signup')} className="font-display font-bold text-black text-sm underline underline-offset-8 hover:decoration-primary">
  Register
</a>

At the top of our file, let's import our link function.
Then, within our Register a tag, let's set the href to link('/user/signup').

As you type, you should see VS Code make recommendations based on the contents of our links.ts file.

We can make similar changes to our Terms of Service and Privacy Policy links:

70
<p>By clicking continue, you agree to our <a href={link("/legal/terms")}>Terms of Service</a> and <a href={link("/legal/privacy")}>Privacy Policy</a>.</p>

If you check your work in the browser, the register link works great, but our Terms of Service and Privacy Policy links go to a Not Found page. Let’s fix that.

We’ll do a quick “duct tape” solution for now, but we’ll eventually circle back around.

Within our src/worker.tsx file, we’re exporting defineApp. Remember, this includes definitions for all our middleware and routes.

19
export default defineApp([
29 collapsed lines
20
  setCommonHeaders(),
21
  async ({ ctx, request, headers }) => {
22
    await setupDb(env);
23
    setupSessionStore(env);
24

25
    try {
26
      ctx.session = await sessions.load(request);
27
    } catch (error) {
28
      if (error instanceof ErrorResponse && error.code === 401) {
29
        await sessions.remove(request, headers);
30
        headers.set("Location", "/user/login");
31

32
        return new Response(null, {
33
          status: 302,
34
          headers,
35
        });
36
      }
37

38
      throw error;
39
    }
40

41
    if (ctx.session?.userId) {
42
      ctx.user = await db.user.findUnique({
43
        where: {
44
          id: ctx.session.userId,
45
        },
46
      });
47
    }
48
  },
49
  render(Document, [
50
    route("/", Home),
51
    route("/protected", [
52
      ({ ctx }) => {
53
        if (!ctx.user) {
54
          return new Response(null, {
55
            status: 302,
56
            headers: { Location: "/user/login" },
57
          });
58
        }
59
      },
60
      Home,
61
    ]),
62
    prefix("/user", userRoutes),
63
    route("/legal/privacy", () => <h1>Privacy Policy</h1>),
64
    route("/legal/terms", () => <h1>Terms of Service</h1>),
65
  ]),
66
]);

On line 63, let's add a new route definition to our array for our privacy policy page. The route function takes two parameters. The first parameter is the path or the URL. The second parameter is the response. This could be a standard HTML response object or JSX/TSX. For our quick solution, we're inlining JSX.
On line 64, we're doing the exact same thing for our Terms page.

You’ll also need to update the import statement at the top of your file:

2
import { index, layout, prefix, route } from "redwoodsdk/router";

Now, if you check your work in the browser, you should see the Terms of Service and Privacy Policy links working.

When we listed our legal routes, we listed them individually:

18
route("/legal/privacy", () => <h1>Privacy Policy</h1>),
19
route("/legal/terms", () => <h1>Terms of Service</h1>),

But, we could also group them together, with a prefix (similar to our /user routes, but a little different):

18
prefix("/legal", [
19
  route("/privacy", () => <h1>Privacy Policy</h1>),
20
  route("/terms", () => <h1>Terms of Service</h1>),
21
]),

We’ve touched a few files, if you want to see the full code for each:

Final code for our Login.tsx

1
"use client";
2

3
import { useState, useTransition } from "react";
4
import { link } from "@/app/shared/links";
5
import {
6
  startAuthentication,
7
  startRegistration,
8
} from "@simplewebauthn/browser";
9
import {
10
  finishPasskeyLogin,
11
  finishPasskeyRegistration,
12
  startPasskeyLogin,
13
  startPasskeyRegistration,
14
} from "./functions";
15
import { useTurnstile } from "@redwoodjs/sdk/turnstile";
16
import { AuthLayout } from "@/app/layouts/AuthLayout";
17
import { Button } from "@/app/components/ui/button";
18
import { Alert, AlertTitle } from "@/app/components/ui/alert";
19
import { AlertCircle } from "lucide-react";
20

21
// >>> Replace this with your own Cloudflare Turnstile site key
22
const TURNSTILE_SITE_KEY = "1x00000000000000000000AA";
23

24
export function Login() {
25
  const [username, setUsername] = useState("");
26
  const [result, setResult] = useState("");
27
  const [isPending, startTransition] = useTransition();
28
  const turnstile = useTurnstile(TURNSTILE_SITE_KEY);
29

30
  const passkeyLogin = async () => {
31
    // 1. Get a challenge from the worker
32
    const options = await startPasskeyLogin();
33

34
    // 2. Ask the browser to sign the challenge
35
    const login = await startAuthentication({ optionsJSON: options });
36

37
    // 3. Give the signed challenge to the worker to finish the login process
38
    const success = await finishPasskeyLogin(login);
39

40
    if (!success) {
41
      setResult("Login failed");
42
    } else {
43
      setResult("Login successful!");
44
    }
45
  };
46

47
  const handlePerformPasskeyLogin = () => {
48
    startTransition(() => void passkeyLogin());
49
  };
50

51
  return (
52
    <AuthLayout>
53
      <div className="auth-form max-w-[400px] w-full mx-auto px-10">
54
        <h1 className="page-title text-center">Login</h1>
55
        <p className="py-6">Enter your username below to sign-in.</p>
56

57
        {result && (
58
        <Alert variant="destructive" className="mb-5">
59
          <AlertCircle className="h-4 w-4"/>
60
          <AlertTitle>{result}</AlertTitle>
61
        </Alert>
62
        )}
63

64
        <div className="absolute top-0 right-0 p-10">
65
          <a href={link("/user/signup")} className="font-display font-bold text-black text-sm underline underline-offset-8 hover:decoration-primary">
66
            Register
67
          </a>
68
        </div>
69
        <div ref={turnstile.ref} />
70
        <input
71
          type="text"
72
          value={username}
73
          onChange={(e) => setUsername(e.target.value)}
74
          placeholder="Username"
75
        />
76
        <Button onClick={handlePerformPasskeyLogin} disabled={isPending} className="font-display w-full mb-6">
77
          {isPending ? <>...</> : "Login with passkey"}
78
        </Button>
79

80
        <p>By clicking continue, you agree to our <a href={link("/legal/terms")}>Terms of Service</a> and <a href={link("/legal/privacy")}>Privacy Policy</a>.</p>
81
      </div>
82
    </AuthLayout>
83
  );
84
}

Final code for our AuthLayout.tsx

1
const AuthLayout = ({ children }: { children: React.ReactNode}) => {
2
  return (
3
    <div className="bg-bg min-h-screen min-w-screen p-12">
4
      <div className="grid grid-cols-2 min-h-[calc(100vh-96px)] rounded-xl border-2 border-[#D6D5C5]">
5
        <div className="relative center bg-[url('/images/bg.png')] bg-repeat rounded-l-xl">
6
          <div className="-top-[100px] relative">
7
            <img src="/images/logo.svg" alt="Apply Wize" className="mx-auto" />
8
            <div className="text-5xl text-white font-bold">
9
              Apply Wize
10
            </div>
11
          </div>
12
          <div className="text-white text-sm absolute bottom-0 left-0 right-0 p-10">
13
            “Transform the job hunt from a maze into a map.”
14
          </div>
15
        </div>
16
        <div className="center bg-white rounded-r-xl relative">
17
          {children}
18
        </div>
19
      </div>
20
    </div>
21
  )
22
}
23

24
export { AuthLayout }

Final code for our styles.css

1
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');
2
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
3

4
@import "tailwindcss";
5
@import "tw-animate-css";
6

7
@custom-variant dark (&:is(.dark *));
8

9
body {
10
  @apply bg-white;
11
}
12

13
@theme inline {
14

15
  --radius-sm: calc(var(--radius) - 4px);
16

17
  --radius-md: calc(var(--radius) - 2px);
18

19
  --radius-lg: var(--radius);
20

21
  --radius-xl: calc(var(--radius) + 4px);
22

23
  --color-background: var(--background);
24

25
  --color-foreground: var(--foreground);
26

27
  --color-card: var(--card);
28

29
  --color-card-foreground: var(--card-foreground);
30

31
  --color-popover: var(--popover);
32

33
  --color-popover-foreground: var(--popover-foreground);
34

35
  --color-primary: var(--primary);
36

37
  --color-primary-foreground: var(--primary-foreground);
38

39
  --color-secondary: var(--secondary);
40

41
  --color-secondary-foreground: var(--secondary-foreground);
42

43
  --color-muted: var(--muted);
44

45
  --color-muted-foreground: var(--muted-foreground);
46

47
  --color-accent: var(--accent);
48

49
  --color-accent-foreground: var(--accent-foreground);
50

51
  --color-destructive: var(--destructive);
52

53
  --color-border: var(--border);
54

55
  --color-input: var(--input);
56

57
  --color-ring: var(--ring);
58

59
  --color-chart-1: var(--chart-1);
60

61
  --color-chart-2: var(--chart-2);
62

63
  --color-chart-3: var(--chart-3);
64

65
  --color-chart-4: var(--chart-4);
66

67
  --color-chart-5: var(--chart-5);
68

69
  --color-sidebar: var(--sidebar);
70

71
  --color-sidebar-foreground: var(--sidebar-foreground);
72

73
  --color-sidebar-primary: var(--sidebar-primary);
74

75
  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
76

77
  --color-sidebar-accent: var(--sidebar-accent);
78

79
  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
80

81
  --color-sidebar-border: var(--sidebar-border);
82

83
  --color-sidebar-ring: var(--sidebar-ring);
84
}
85

86
:root {
87

88
  --radius: 0.625rem;
89

90
  --background: oklch(1 0 0);
91

92
  --foreground: oklch(0.145 0 0);
93

94
  --card: oklch(1 0 0);
95

96
  --card-foreground: oklch(0.145 0 0);
97

98
  --popover: oklch(1 0 0);
99

100
  --popover-foreground: oklch(0.145 0 0);
101

102
  --primary: oklch(0.205 0 0);
103

104
  --primary-foreground: oklch(0.985 0 0);
105

106
  --secondary: oklch(0.97 0 0);
107

108
  --secondary-foreground: oklch(0.205 0 0);
109

110
  --muted: oklch(0.97 0 0);
111

112
  --muted-foreground: oklch(0.556 0 0);
113

114
  --accent: oklch(0.97 0 0);
115

116
  --accent-foreground: oklch(0.205 0 0);
117

118
  --destructive: oklch(0.577 0.245 27.325);
119

120
  --border: oklch(0.922 0 0);
121

122
  --input: oklch(0.922 0 0);
123

124
  --ring: oklch(0.708 0 0);
125

126
  --chart-1: oklch(0.646 0.222 41.116);
127

128
  --chart-2: oklch(0.6 0.118 184.704);
129

130
  --chart-3: oklch(0.398 0.07 227.392);
131

132
  --chart-4: oklch(0.828 0.189 84.429);
133

134
  --chart-5: oklch(0.769 0.188 70.08);
135

136
  --sidebar: oklch(0.985 0 0);
137

138
  --sidebar-foreground: oklch(0.145 0 0);
139

140
  --sidebar-primary: oklch(0.205 0 0);
141

142
  --sidebar-primary-foreground: oklch(0.985 0 0);
143

144
  --sidebar-accent: oklch(0.97 0 0);
145

146
  --sidebar-accent-foreground: oklch(0.205 0 0);
147

148
  --sidebar-border: oklch(0.922 0 0);
149

150
  --sidebar-ring: oklch(0.708 0 0);
151
}
152

153
.dark {
154

155
  --background: oklch(0.145 0 0);
156

157
  --foreground: oklch(0.985 0 0);
158

159
  --card: oklch(0.205 0 0);
160

161
  --card-foreground: oklch(0.985 0 0);
162

163
  --popover: oklch(0.205 0 0);
164

165
  --popover-foreground: oklch(0.985 0 0);
166

167
  --primary: oklch(0.922 0 0);
168

169
  --primary-foreground: oklch(0.205 0 0);
170

171
  --secondary: oklch(0.269 0 0);
172

173
  --secondary-foreground: oklch(0.985 0 0);
174

175
  --muted: oklch(0.269 0 0);
176

177
  --muted-foreground: oklch(0.708 0 0);
178

179
  --accent: oklch(0.269 0 0);
180

181
  --accent-foreground: oklch(0.985 0 0);
182

183
  --destructive: oklch(0.704 0.191 22.216);
184

185
  --border: oklch(1 0 0 / 10%);
186

187
  --input: oklch(1 0 0 / 15%);
188

189
  --ring: oklch(0.556 0 0);
190

191
  --chart-1: oklch(0.488 0.243 264.376);
192

193
  --chart-2: oklch(0.696 0.17 162.48);
194

195
  --chart-3: oklch(0.769 0.188 70.08);
196

197
  --chart-4: oklch(0.627 0.265 303.9);
198

199
  --chart-5: oklch(0.645 0.246 16.439);
200

201
  --sidebar: oklch(0.205 0 0);
202

203
  --sidebar-foreground: oklch(0.985 0 0);
204

205
  --sidebar-primary: oklch(0.488 0.243 264.376);
206

207
  --sidebar-primary-foreground: oklch(0.985 0 0);
208

209
  --sidebar-accent: oklch(0.269 0 0);
210

211
  --sidebar-accent-foreground: oklch(0.985 0 0);
212

213
  --sidebar-border: oklch(1 0 0 / 10%);
214

215
  --sidebar-ring: oklch(0.556 0 0);
216
}
217

218
@theme {
219
  --font-display: "Poppins", sans-serif;
220
  --font-body: "Inter", sans-serif;
221

222
  --color-bg: #e4e3d4;
223
  --color-border: #eeeef0;
224

225
  --color-primary: #f7b736;
226
  --color-secondary: #f1f1e8;
227
  --color-destructive: #ef533f;
228

229
  --color-tag-applied: #b1c7c0;
230
  --color-tag-interview: #da9b7c;
231
  --color-tag-new: #db9a9f;
232
  --color-tag-rejected: #e4e3d4;
233
  --color-tag-offer: #aae198;
234

235
  --color-primary-foreground: #000;
236
}
237

238
@layer base, components, page;
239

240
@layer base {
241

242
  h1,
243
  h2,
244
  h3 {
245
    @apply font-display font-bold;
246
  }
247
}
248

249
@layer components {
250
  .page-title {
251
    @apply text-3xl
252
  }
253
}
254

255
@layer page {
256

257
  /* login page */
258
  .auth-form {
259
    p {
260
      @apply text-sm text-zinc-500 text-center;
261

262
      a {
263
        @apply text-zinc-500 hover:text-black underline whitespace-nowrap;
264
      }
265
    }
266
  }
267

268
  /* form elements */
269
  input[type="text"] {
270
    @apply border-border border-1 rounded-md px-3 h-9 block w-full mb-2 text-base;
271
  }
272
}
273

274
@utility center {
275
  @apply flex items-center justify-center;
276
}
277

278
@layer base {
279
  * {
280
    @apply border-border outline-ring/50;
281
  }
282

283
  body {
284
    @apply bg-background text-foreground;
285
  }
286
}

Final code for our button.tsx

1
"use client";
2

3
import * as React from "react"
4
import { Slot } from "@radix-ui/react-slot"
5
import { cva, type VariantProps } from "class-variance-authority"
6

7
import { cn } from "@/lib/utils"
8

9
const buttonVariants = cva(
10
  "font-bold inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
11
  {
12
    variants: {
13
      variant: {
14
        default:
15
          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
16
        destructive:
17
          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
18
        outline:
19
          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
20
        secondary:
21
          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
22
        ghost:
23
          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
24
        link: "text-primary underline-offset-4 hover:underline",
25
      },
26
      size: {
27
        default: "h-9 px-4 py-2 has-[>svg]:px-3",
28
        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
29
        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
30
        icon: "size-9",
31
      },
32
    },
33
    defaultVariants: {
34
      variant: "default",
35
      size: "default",
36
    },
37
  }
38
)
39

40
function Button({
41
  className,
42
  variant,
43
  size,
44
  asChild = false,
45
  ...props
46
}: React.ComponentProps<"button"> &
47
  VariantProps<typeof buttonVariants> & {
48
    asChild?: boolean
49
  }) {
50
  const Comp = asChild ? Slot : "button"
51

52
  return (
53
    <Comp
54
      data-slot="button"
55
      className={cn(buttonVariants({ variant, size, className }))}
56
      {...props}
57
    />
58
  )
59
}
60

61
export { Button, buttonVariants }

Final code for our links.ts

1
import { defineLinks } from "redwoodsdk/router";
2

3
export const link = defineLinks([
4
  "/",
5
  "/user/login",
6
  "/user/signup",
7
  "/legal/privacy",
8
  "/legal/terms",
9
]);

Final code for our worker.tsx

1
import { defineApp, ErrorResponse } from "@redwoodjs/sdk/worker";
2
import { route, render, prefix } from "@redwoodjs/sdk/router";
3
import { Document } from "@/app/Document";
4
import { Home } from "@/app/pages/Home";
5
import { setCommonHeaders } from "@/app/headers";
6
import { userRoutes } from "@/app/pages/user/routes";
7
import { sessions, setupSessionStore } from "./session/store";
8
import { Session } from "./session/durableObject";
9
import { db, setupDb } from "./db";
10
import type { User } from "@prisma/client";
11
import { env } from "cloudflare:workers";
12
export { SessionDurableObject } from "./session/durableObject";
13

14
export type AppContext = {
15
  session: Session | null;
16
  user: User | null;
17
};
18

19
export default defineApp([
20
  setCommonHeaders(),
21
  async ({ ctx, request, headers }) => {
22
    await setupDb(env);
23
    setupSessionStore(env);
24

25
    try {
26
      ctx.session = await sessions.load(request);
27
    } catch (error) {
28
      if (error instanceof ErrorResponse && error.code === 401) {
29
        await sessions.remove(request, headers);
30
        headers.set("Location", "/user/login");
31

32
        return new Response(null, {
33
          status: 302,
34
          headers,
35
        });
36
      }
37

38
      throw error;
39
    }
40

41
    if (ctx.session?.userId) {
42
      ctx.user = await db.user.findUnique({
43
        where: {
44
          id: ctx.session.userId,
45
        },
46
      });
47
    }
48
  },
49
  render(Document, [
50
    route("/", Home),
51
    route("/protected", [
52
      ({ ctx }) => {
53
        if (!ctx.user) {
54
          return new Response(null, {
55
            status: 302,
56
            headers: { Location: "/user/login" },
57
          });
58
        }
59
      },
60
      Home,
61
    ]),
62
    prefix("/user", userRoutes),
63
    route("/legal/privacy", () => <h1>Privacy Policy</h1>),
64
    route("/legal/terms", () => <h1>Terms of Service</h1>),
65
  ]),
66
]);

😅 Don’t worry, we’ve already done all the heavy lifting. This will be a breeze.

import { AuthLayout } from "@/app/layouts/AuthLayout";
...
return (
  <AuthLayout>
  ...
  </AuthLayout>
)

Let's import our AuthLayout at the top of our file.
Then, we'll replace our React fragment <> with our AuthLayout component.

Right inside our AuthLayout component, let’s add our Login link:

import { link } from "@/app/shared/links";
...
<AuthLayout>
  <div className="absolute top-0 right-0 p-10">
    <a href={link('/user/login')} className="font-display font-bold text-black text-sm underline underline-offset-8 hover:decoration-primary">
      Login
    </a>
  </div>
  ...
</AuthLayout>

Our Login link is using the exact same styles as the Register link on the Login page. The only difference is we changed the link to point to our /user/login route and the label is Login.

Next, let’s wrap all of our form content with a div:

56
<AuthLayout>
57
  <div className="auth-form max-w-[400px] w-full mx-auto px-10">
58
    ...
59
    <div className="absolute top-0 right-0 p-10">
60
      <a href={link('/user/login')} className="font-display font-bold text-black text-sm underline underline-offset-8 hover:decoration-primary">
61
        Login
62
      </a>
63
    </div>
64
    ...
65
  </div>
66
</AuthLayout>

We're using the same styles as our login page.
We have a class auth-form that will style our p and a tags.
We've set the maximum width of our form to 400px, but we want it to take up as much space as possible min-w-full.
Center it on the page mx-auto.
Added 40px padding to the left and right with px-10.

We can get rid of our red YOLO heading at the top and replace it with:

63
<h1 className="page-title text-center">Create an Account</h1>
64
<p className="py-6">Enter a username to setup an account.</p>

Let’s move our result message to appear below our heading:

import { Alert, AlertTitle } from "@/app/components/ui/alert";
import { AlertCircle } from "lucide-react";
...
<h1 className="page-title text-center">Create an Account</h1>
<p className="py-6">Enter a username to setup an account.</p>

{result && (
  <Alert variant="destructive" className="mb-5">
    <AlertCircle className="h-4 w-4"/>
    <AlertTitle>{result}</AlertTitle>
  </Alert>
)}

Jumping down a little bit, on our Button component, let’s add a few classes to the end:

83
<Button onClick={handlePerformPasskeyRegister} disabled={isPending} className="font-display w-full mb-6">
84
  {isPending ? <>...</> : "Register with Passkey"}
85
</Button>

We want to use the font Poppins, font-display.
Make the button span the entire width of the container, w-full.
Add some spacing to the bottom, mb-6.

Then, right below the button, we can add our legal statement:

87
<p>By clicking continue, you agree to our <a href={link('/legal/terms')}>Terms of Service</a> and <a href={link('/legal/privacy')}>Privacy Policy</a>.</p>

See, I told you! Easy peasy. 🍋

Final code for our Signup.tsx

1
"use client";
2

3
import { useState, useTransition } from "react";
4
import {
5
  startRegistration,
6
} from "@simplewebauthn/browser";
7
import {
8
  finishPasskeyRegistration,
9
  startPasskeyRegistration,
10
} from "./functions";
11
import { useTurnstile } from "redwoodsdk/turnstile";
12
import { Button } from "@/app/components/ui/button";
13
import { AuthLayout } from "@/app/layouts/AuthLayout";
14
import { Alert, AlertTitle } from "@/app/components/ui/alert";
15
import { AlertCircle } from "lucide-react";
16
import { link } from "@/app/shared/links";
17

18
// >>> Replace this with your own Cloudflare Turnstile site key
19
const TURNSTILE_SITE_KEY = "0xXXXXXXXXXXXXXXXXXXXXXX";
20

21
export function SignupPage() {
22
  const [username, setUsername] = useState("");
23
  const [result, setResult] = useState("");
24
  const [isPending, startTransition] = useTransition();
25
  const turnstile = useTurnstile(TURNSTILE_SITE_KEY);
26

27
  const passkeyRegister = async () => {
28
    const options = await startPasskeyRegistration(username);
29
    const registration = await startRegistration({ optionsJSON: options });
30
    const turnstileToken = await turnstile.challenge();
31

32
    const success = await finishPasskeyRegistration(
33
      username,
34
      registration,
35
      turnstileToken,
36
    );
37

38
    if (!success) {
39
      setResult("Registration failed");
40
    } else {
41
      setResult("Registration successful!");
42
    }
43
  };
44

45
  const handlePerformPasskeyRegister = () => {
46
    startTransition(() => void passkeyRegister());
47
  };
48

49
  return (
50
    <AuthLayout>
51
      <div className="absolute top-0 right-0 p-10">
52
        <a href={link('/user/login')} className="font-display font-bold text-black text-sm underline underline-offset-8 hover:decoration-primary">
53
          Login
54
        </a>
55
      </div>
56

57
      <div className="auth-form max-w-[400px] w-full px-10">
58
        <h1 className="page-title text-center">Create an Account</h1>
59
        <p className="py-6">Enter a username to setup an account.</p>
60

61
        {result && (
62
          <Alert variant="destructive" className="mb-5">
63
            <AlertCircle className="h-4 w-4"/>
64
            <AlertTitle>{result}</AlertTitle>
65
          </Alert>
66
        )}
67

68
        <div ref={turnstile.ref} />
69
        <input
70
          type="text"
71
          value={username}
72
          onChange={(e) => setUsername(e.target.value)}
73
          placeholder="Username"
74
        />
75
        <Button onClick={handlePerformPasskeyRegister} disabled={isPending} className="font-display w-full mb-6">
76
          {isPending ? <>...</> : "Register with Passkey"}
77
        </Button>
78

79
        <p>By clicking continue, you agree to our <a href={link('/legal/terms')}>Terms of Service</a> and <a href={link('/legal/privacy')}>Privacy Policy</a>.</p>
80
      </div>
81
    </AuthLayout>
82
  );
83
}

Authentication

Existing Authentication Code

Setting up the Signup Page

Styling the Login Page

Creating a Layout Component

Styling the Login Content

Linking between the Login and Signup Pages

Styling the Signup Page

Further reading