Removing the default authentication methods

If you decide you want to remove one of the default authentication methods Gadget provides you when starting your app, simply head over to Plugins section in the Settings page and below the certain auth method click the three dot icon to the right and hit remove.

This will remove all applied triggers from the User model for the auth method. You will be required to remove certain UI and make adjustments to your User model to get your app into a working state.

Google

`User` model configuration

Remove the following fields from the User model:

googleImageURL
googleProfileId

Frontend - UI configuration

Paste the following code snippets into the corresponding files.

web/routes/sign-up.jsx
JavaScript
1import { useActionForm } from "@gadgetinc/react";
2import { api } from "../api";
3
4export default function () {
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 && (
17          <p className="format-message error">Email: {errors.user.email.message}</p>
18        )}
19        <input
20          className="custom-input"
21          placeholder="Password"
22          type="password"
23          {...register("password")}
24        />
25        {errors?.user?.password?.message && (
26          <p className="format-message error">
27            Password: {errors.user.password.message}
28          </p>
29        )}
30        {errors?.root?.message && (
31          <p className="format-message error">{errors.root.message}</p>
32        )}
33        {isSubmitSuccessful && (
34          <p className="format-message success">Please check your inbox</p>
35        )}
36        <button disabled={isSubmitting} type="submit">
37          Sign up
38        </button>
39      </div>
40    </form>
41  );
42}

web/routes/sign-in.jsx
JavaScript
1import { useActionForm } from "@gadgetinc/react";
2import { api } from "../api";
3import { Link } from "react-router-dom";
4
5export default function () {
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
18          className="custom-input"
19          placeholder="Password"
20          type="password"
21          {...register("password")}
22        />
23        {errors?.root?.message && (
24          <p className="format-message error">{errors.root.message}</p>
25        )}
26        <button disabled={isSubmitting} type="submit">
27          Sign in
28        </button>
29        <p>
30          Forgot your password? <Link to="/forgot-password">Reset password</Link>
31        </p>
32      </div>
33    </form>
34  );
35}

Email-Password

`User` model configuration

Remove the following fields from the User model:

resetPasswordTokenExpiration
password
resetPasswordToken
emailVerificationTokenExpiration
emailVerificationToken
emailVerified

Also proceed and delete the following actions within the User model and User folder within your files:

sendVerifyEmail
verifyEmail
resetPassword
sendResetPassword
changePassword

Frontend - UI configuration

Paste the following code snippets into the corresponding files and delete the following files from the routes within your frontend folder:

change-password.jsx
reset-password.jsx
forgot-password.jsx
verify-email.jsx

web/routes/sign-up.jsx
JavaScript
1import GoogleIcon from "../assets/google.svg";
2import { useLocation } from "react-router-dom";
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}

web/routes/sign-in.jsx
JavaScript
1import GoogleIcon from "../assets/google.svg";
2import { useLocation } from "react-router-dom";
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}

`App.jsx`

web/App.jsx
JavaScript
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-dom";
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_PUBLIC_APP_SLUG} - 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_PUBLIC_APP_SLUG}</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;

Removing the default authentication methods

Google

User model configuration

Frontend - UI configuration

sign-up.jsx

sign-in.jsx

Email-Password

User model configuration

Frontend - UI configuration

sign-up.jsx

sign-in.jsx

App.jsx

`User` model configuration

`sign-up.jsx`

`sign-in.jsx`

`User` model configuration

`sign-up.jsx`

`sign-in.jsx`

`App.jsx`