🛠 Configurations

Sign-in with Email & Password (Only)

If you want your users to sign-in with Email and Password only, you can do so by updating the /app/auth/page.(tsx|tsx) file.

Simply remove <OAuth /> and the import statement for it.

Before

app/auth/page.tsx


_25"use client";
_25import {
_25  FlexColCenter,
_25  FlexColStart,
_25  FlexColStartCenter,
_25} from "@/components/Flex";
_25import CredentialsAuth from "@/components/auth/nextAuth/CredentialsAuth";
_25import OAuth from "@/components/auth/nextAuth/OAuth";
_25import { withoutAuth } from "@/lib/auth-helpers/withoutAuth";
_25import React from "react";
_25
_25function AuthPage() {
_25return (
_25
_25<FlexColCenter className="w-full h-screen">
_25  <FlexColStart className="w-full min-w-[350px] max-w-[400px] scale-[.90] md:scale-[1] ">
_25    {/* Replace your prefer auth component */}
_25    <OAuth />
_25    <CredentialsAuth />
_25  </FlexColStart>
_25</FlexColCenter>
_25); }
_25
_25// prevent user to access this page if they are already logged in
_25export default withoutAuth(AuthPage);

After

app/auth/page.tsx


_23"use client";
_23import {
_23  FlexColCenter,
_23  FlexColStart,
_23  FlexColStartCenter,
_23} from "@/components/Flex";
_23import CredentialsAuth from "@/components/auth/nextAuth/CredentialsAuth";
_23import { withoutAuth } from "@/lib/auth-helpers/withoutAuth";
_23import React from "react";
_23
_23function AuthPage() {
_23  return (
_23    <FlexColCenter className="w-full h-screen">
_23      <FlexColStart className="w-full min-w-[350px] max-w-[400px] scale-[.90] md:scale-[1] ">
_23        {/* Replace your prefer auth component */}
_23        <CredentialsAuth />
_23      </FlexColStart>
_23    </FlexColCenter>
_23  );
_23}
_23
_23// prevent user to access this page if they are already logged in
_23export default withoutAuth(AuthPage);

Then update the src/app/api/auth/[...nextauth]/options.(ts | js) with the provider you want to use. Remove the provider you don't want to use.

app/api/auth/[...nextauth]/options.ts


_10// Manage your NextAuth options here
_10export const nextAuthOptions: NextAuthOptions = {
_10  providers: [
_10    CredentialsProvider({...}),
_10    ... // other options
_10  ],
_10  ...
_10};

If all has been done properly, you should be left with either of the providers you choose to support. 🎉

Simply Visit the http://localhost:4000/auth (opens in a new tab) route to see the changes.

Setup OAuth