41 |
Welcome Guest!
42 |
43 | This example demonstrates Corbado's passkey-first authentication
44 | solution.
45 |
46 |
It covers all relevant aspects like -
47 |
48 | Sign-up
49 | Login
50 | Protecting Routes
51 |
52 |
53 | It can be used as a starting point for your own application or
54 | to learn.
55 |
56 |
57 | Sign up
58 |
59 |
60 | Login
61 |
62 |
) {
16 | event.preventDefault();
17 | const formData = new FormData(event.currentTarget);
18 | const city = formData.get("city") as string;
19 | try {
20 | await userCtx.updateUserCity(city);
21 | } catch (e) {
22 | console.error("Failed to update user city:", e);
23 | }
24 | navigate("/");
25 | }
26 |
27 | return (
28 |
29 |
Onboarding
30 | Choose your city
31 |
35 |
36 | );
37 | }
38 |
--------------------------------------------------------------------------------
/frontend/src/pages/ProfilePage.tsx:
--------------------------------------------------------------------------------
1 | import { UserContext } from "../context/user.tsx";
2 | import { use } from "react";
3 | import { useNavigate } from "react-router";
4 | import { PasskeyList, useCorbado } from "@corbado/react";
5 |
6 | export default function ProfilePage() {
7 | const userCtx = use(UserContext);
8 | const navigate = useNavigate();
9 | const { isAuthenticated, loading } = useCorbado();
10 |
11 | if (!isAuthenticated && !loading) {
12 | navigate("/login");
13 | }
14 |
15 | const userInfo =
16 | userCtx.externalUserInfo.status === "success"
17 | ? userCtx.externalUserInfo
18 | : null;
19 |
20 | return (
21 |
22 |
Profile
23 |
24 | Example userID:
25 | {userInfo?.user.id}
26 |
27 |
28 | Corbado userID:
29 | {userInfo?.user.corbado_user_id}
30 |
31 |
Your Identifiers
32 | {userInfo && (
33 |
34 | {userInfo.identifiers.map((identifier) => (
35 |
36 |
37 | Type:
38 | {identifier.type}
39 |
40 |
41 | Value:
42 | {identifier.value}
43 |
44 |
45 | ))}
46 |
47 | )}
48 |
49 |
Manage your Passkeys
57 |
29 |
Signup
30 | {
32 | // do nothing here. We have to wait for a backend response
33 | // to check whether the user has gone through onboarding already.
34 | // The backend call is made in the user store.
35 | }}
36 | initialBlock="signup-init"
37 | />
38 |
39 | );
40 | }
41 |
--------------------------------------------------------------------------------
/frontend/src/pages/UserAreaPage.tsx:
--------------------------------------------------------------------------------
1 | import { Link } from "react-router";
2 | import { useCorbado } from "@corbado/react";
3 | import { useQuery } from "@tanstack/react-query";
4 |
5 | export default function UserAreaPage() {
6 | const { isAuthenticated, loading } = useCorbado();
7 |
8 | return isAuthenticated && !loading ? (
9 |
40 |
User area!
41 |
Since you are logged-in, we can tell you a secret:
42 |
refetch()}
45 | disabled={loading || isLoading || !!secret}
46 | >
47 | Reveal secret
48 |
49 |
50 |
56 |
72 |
Secret:
73 |
{secret}
74 |
;
79 | }
80 | if (error) {
81 | return (
82 |
83 |
Failed to reveal secret: {error?.message}
84 |
93 |
User area!
94 |
This page is for logged-in users only. Please login:
95 |
96 | Login
97 |
98 |