🛠 Configurations

Sign-in with Google and Github (Only)

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

Simply remove <CredentialsAuth /> 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 OAuth from "@/components/auth/nextAuth/OAuth";
_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        <OAuth />
_23      </FlexColStart>
_23    </FlexColCenter>
_23  );
_23}
_23
_23// prevent user to access this page if they are already logged in
_23export default withoutAuth(AuthPage);

Using just one provider

If you choose to use just one provider (e.g. Google), simply update the supportedOAuthProviders array in the /src/components/auth/nextAuth/OAuth.(tsx | tsx) file.

You could either set the available property to false or remove the provider from the array.

app/components/auth/nextAuth/OAuth.tsx


_11// Supported OAuth providers
_11const supportedOAuthProviders = [
_11  {
_11    name: "google",
_11    available: true,
_11  },
_11  {
_11    name: "github",
_11    available: true,
_11  },
_11];

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

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


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

Which ever provider you choose to support make sure you have the environmental variables set inside .env file.

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.

Email & Password Database