Removing the default authentication methods 

1import { useActionForm } from "@gadgetinc/react";
2import { api } from "../api";
3
4export default function SignUp() {
5  const {
6    register,
7    submit,
8    formState: { errors, isSubmitSuccessful, isSubmitting },
9  } = useActionForm(api.user.signUp);
10
11  return (
12    <form className="custom-form" onSubmit={submit}>
13      <h1 className="form-title">Create account</h1>
14      <div className="custom-form">
15        <input className="custom-input" placeholder="Email" {...register("email")} />
16        {errors?.user?.email?.message && <p className="format-message error">Email: {errors.user.email.message}</p>}
17        <input className="custom-input" placeholder="Password" type="password" {...register("password")} />
18        {errors?.user?.password?.message && <p className="format-message error">Password: {errors.user.password.message}</p>}
19        {errors?.root?.message && <p className="format-message error">{errors.root.message}</p>}
20        {isSubmitSuccessful && <p className="format-message success">Please check your inbox</p>}
21        <button disabled={isSubmitting} type="submit">
22          Sign up
23        </button>
24      </div>
25    </form>
26  );
27}

1import { useActionForm } from "@gadgetinc/react";
2import { api } from "../api";
3import { Link } from "react-router";
4
5export default function SignIn() {
6  const {
7    register,
8    submit,
9    formState: { errors, isSubmitting },
10  } = useActionForm(api.user.signIn);
11
12  return (
13    <form className="custom-form" onSubmit={submit}>
14      <h1 className="form-title">Sign in</h1>
15      <div className="custom-form">
16        <input className="custom-input" placeholder="Email" {...register("email")} />
17        <input className="custom-input" placeholder="Password" type="password" {...register("password")} />
18        {errors?.root?.message && <p className="format-message error">{errors.root.message}</p>}
19        <button disabled={isSubmitting} type="submit">
20          Sign in
21        </button>
22        <p>
23          Forgot your password? <Link to="/forgot-password">Reset password</Link>
24        </p>
25      </div>
26    </form>
27  );
28}

1import GoogleIcon from "../assets/google.svg";
2import { useLocation } from "react-router";
3
4export default function () {
5  const { search } = useLocation();
6
7  return (
8    <div>
9      <h1 className="form-title">Create account</h1>
10      <div className="custom-form">
11        <a className="google-oauth-button" href={`/auth/google/start${search}`}>
12          <img src={GoogleIcon} width={22} height={22} /> Continue with Google
13        </a>
14      </div>
15    </div>
16  );
17}

1import GoogleIcon from "../assets/google.svg";
2import { useLocation } from "react-router";
3
4export default function () {
5  const { search } = useLocation();
6
7  return (
8    <div>
9      <h1 className="form-title">Sign in</h1>
10      <div className="custom-form">
11        <a className="google-oauth-button" href={`/auth/google/start${search}`}>
12          <img src={GoogleIcon} width={22} height={22} /> Continue with Google
13        </a>
14      </div>
15    </div>
16  );
17}

1import {
2  SignedInOrRedirect,
3  SignedOut,
4  SignedOutOrRedirect,
5} from "@gadgetinc/react";
6import { Suspense, useEffect } from "react";
7import {
8  Outlet,
9  Route,
10  RouterProvider,
11  createBrowserRouter,
12  createRoutesFromElements,
13  Link,
14} from "react-router";
15import "./App.css";
16import Index from "./routes/index";
17import SignedInPage from "./routes/signed-in";
18import SignInPage from "./routes/sign-in";
19import SignUpPage from "./routes/sign-up";
20
21const App = () => {
22  useEffect(() => {
23    document.title = `Home - ${process.env["GADGET_APP"]} - Gadget`;
24  }, []);
25
26  const router = createBrowserRouter(
27    createRoutesFromElements(
28      <Route path="/" element={<Layout />}>
29        <Route
30          index
31          element={
32            <SignedOutOrRedirect>
33              <Index />
34            </SignedOutOrRedirect>
35          }
36        />
37        <Route
38          path="signed-in"
39          element={
40            <SignedInOrRedirect>
41              <SignedInPage />
42            </SignedInOrRedirect>
43          }
44        />
45        <Route
46          path="sign-in"
47          element={
48            <SignedOutOrRedirect>
49              <SignInPage />
50            </SignedOutOrRedirect>
51          }
52        />
53        <Route
54          path="sign-up"
55          element={
56            <SignedOutOrRedirect>
57              <SignUpPage />
58            </SignedOutOrRedirect>
59          }
60        />
61      </Route>
62    )
63  );
64
65  return (
66    <Suspense fallback={<></>}>
67      <RouterProvider router={router} />
68    </Suspense>
69  );
70};
71
72const Layout = () => {
73  return (
74    <>
75      <Header />
76      <div className="app">
77        <div className="app-content">
78          <div className="main">
79            <Outlet />
80          </div>
81        </div>
82      </div>
83    </>
84  );
85};
86
87const Header = () => {
88  return (
89    <div className="header">
90      <div className="logo">{process.env["GADGET_APP"]}</div>
91      <div className="header-content">
92        <SignedOut>
93          <Link to="/sign-in" style={{ color: "black" }}>
94            Sign in
95          </Link>
96          <Link to="/sign-up" style={{ color: "black" }}>
97            Sign up
98          </Link>
99        </SignedOut>
100      </div>
101    </div>
102  );
103};
104
105export default App;