Gadget framework
Glossary
FAQ

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.

sign-up.jsx 

frontend/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}

sign-in.jsx 

frontend/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

sign-up.jsx 

frontend/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}

sign-in.jsx 

frontend/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 

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_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">{["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;

Was this page helpful?