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.
User model configuration
Remove the following fields from the User model:
googleImageURLgoogleProfileId
Frontend - UI configuration
Paste the following code snippets into the corresponding files.
Sign up component
web/routes/sign-up.jsx
React
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>
);
}
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
web/routes/sign-in.jsx
React
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>
);
}
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:
resetPasswordTokenExpirationpasswordresetPasswordTokenemailVerificationTokenExpirationemailVerificationTokenemailVerified
Also proceed and delete the following actions within the User model and User folder within your files:
sendVerifyEmailverifyEmailresetPasswordsendResetPasswordchangePassword
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.jsxreset-password.jsxforgot-password.jsxverify-email.jsx
Sign up component
web/routes/sign-up.jsx
JavaScript
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>
);
}
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
web/routes/sign-in.jsx
JavaScript
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>
);
}
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
web/App.jsx
JavaScript
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;
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;