# 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. Depending on the method you want to remove, you can click the three dot icon to the right and hit `remove authentication method`, or navigate into the auth method and click the button that says `remove authentication method`.

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 component 

```tsx
import { useActionForm } from "@gadgetinc/react";
import { api } from "../api";

export default function SignUp() {
  const {
    register,
    submit,
    formState: { errors, isSubmitSuccessful, isSubmitting },
  } = useActionForm(api.user.signUp);

  return (
    <form className="custom-form" onSubmit={submit}>
      <h1 className="form-title">Create account</h1>
      <div className="custom-form">
        <input className="custom-input" placeholder="Email" {...register("email")} />
        {errors?.user?.email?.message && <p className="format-message error">Email: {errors.user.email.message}</p>}
        <input className="custom-input" placeholder="Password" type="password" {...register("password")} />
        {errors?.user?.password?.message && <p className="format-message error">Password: {errors.user.password.message}</p>}
        {errors?.root?.message && <p className="format-message error">{errors.root.message}</p>}
        {isSubmitSuccessful && <p className="format-message success">Please check your inbox</p>}
        <button disabled={isSubmitting} type="submit">
          Sign up
        </button>
      </div>
    </form>
  );
}
```

#### Sign in component 

```tsx
import { useActionForm } from "@gadgetinc/react";
import { api } from "../api";
import { Link } from "react-router";

export default function SignIn() {
  const {
    register,
    submit,
    formState: { errors, isSubmitting },
  } = useActionForm(api.user.signIn);

  return (
    <form className="custom-form" onSubmit={submit}>
      <h1 className="form-title">Sign in</h1>
      <div className="custom-form">
        <input className="custom-input" placeholder="Email" {...register("email")} />
        <input className="custom-input" placeholder="Password" type="password" {...register("password")} />
        {errors?.root?.message && <p className="format-message error">{errors.root.message}</p>}
        <button disabled={isSubmitting} type="submit">
          Sign in
        </button>
        <p>
          Forgot your password? <Link to="/forgot-password">Reset password</Link>
        </p>
      </div>
    </form>
  );
}
```

## 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 component 

```typescript
import GoogleIcon from "../assets/google.svg";
import { useLocation } from "react-router";

export default function () {
  const { search } = useLocation();

  return (
    <div>
      <h1 className="form-title">Create account</h1>
      <div className="custom-form">
        <a className="google-oauth-button" href={`/auth/google/start${search}`}>
          <img src={GoogleIcon} width={22} height={22} /> Continue with Google
        </a>
      </div>
    </div>
  );
}
```

#### Sign in component 

```typescript
import GoogleIcon from "../assets/google.svg";
import { useLocation } from "react-router";

export default function () {
  const { search } = useLocation();

  return (
    <div>
      <h1 className="form-title">Sign in</h1>
      <div className="custom-form">
        <a className="google-oauth-button" href={`/auth/google/start${search}`}>
          <img src={GoogleIcon} width={22} height={22} /> Continue with Google
        </a>
      </div>
    </div>
  );
}
```

### App component 

```typescript
import {
  SignedInOrRedirect,
  SignedOut,
  SignedOutOrRedirect,
} from "@gadgetinc/react";
import { Suspense, useEffect } from "react";
import {
  Outlet,
  Route,
  RouterProvider,
  createBrowserRouter,
  createRoutesFromElements,
  Link,
} from "react-router";
import "./App.css";
import Index from "./routes/index";
import SignedInPage from "./routes/signed-in";
import SignInPage from "./routes/sign-in";
import SignUpPage from "./routes/sign-up";

const App = () => {
  useEffect(() => {
    document.title = `Home - ${process.env["GADGET_APP"]} - Gadget`;
  }, []);

  const router = createBrowserRouter(
    createRoutesFromElements(
      <Route path="/" element={<Layout />}>
        <Route
          index
          element={
            <SignedOutOrRedirect>
              <Index />
            </SignedOutOrRedirect>
          }
        />
        <Route
          path="signed-in"
          element={
            <SignedInOrRedirect>
              <SignedInPage />
            </SignedInOrRedirect>
          }
        />
        <Route
          path="sign-in"
          element={
            <SignedOutOrRedirect>
              <SignInPage />
            </SignedOutOrRedirect>
          }
        />
        <Route
          path="sign-up"
          element={
            <SignedOutOrRedirect>
              <SignUpPage />
            </SignedOutOrRedirect>
          }
        />
      </Route>
    )
  );

  return (
    <Suspense fallback={<></>}>
      <RouterProvider router={router} />
    </Suspense>
  );
};

const Layout = () => {
  return (
    <>
      <Header />
      <div className="app">
        <div className="app-content">
          <div className="main">
            <Outlet />
          </div>
        </div>
      </div>
    </>
  );
};

const Header = () => {
  return (
    <div className="header">
      <div className="logo">{process.env["GADGET_APP"]}</div>
      <div className="header-content">
        <SignedOut>
          <Link to="/sign-in" style={{ color: "black" }}>
            Sign in
          </Link>
          <Link to="/sign-up" style={{ color: "black" }}>
            Sign up
          </Link>
        </SignedOut>
      </div>
    </div>
  );
};

export default App;
```