Next.js Discord

Discord Forum

How to sign in via Google using Next Auth

Unanswered
Standard Chinchilla posted this in #help-forum
Open in Discord
Standard ChinchillaOP
I was following the tutorial https://nextjs.org/learn and implemented the logic to sign up and sign in using credentials but they haven't provide tutorial how to add sign in using Google.
I tried to research online but couldn't find it.
export const { auth, signIn, signOut } = NextAuth({
  ...authConfig,
  providers: [
    Credentials({
      // @ts-ignore
      async authorize(credentials) {
        const parsedCredentials = z
          .object({ email: z.string().email(), password: z.string().min(8) })
          .safeParse(credentials);

        if (parsedCredentials.success) {
          const { email, password } = parsedCredentials.data;
          const user = await getUser(email);
          if (!user) return null;

          const passwordsMatch = await bcrypt.compare(password, user.password);
          if (passwordsMatch) return user;
        }
        console.log("Invalid credentials");
        return null;
      },
    }),
    GoogleProvider({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
});

Now, in the Google console redirect is set to localhost:3000/api/auth/google
but I haven't created any such endpoint so please guide how to do this.

48 Replies

Ray
create route.ts in app/api/auth/[...nextauth]/route.ts
and export GET and POST function from auth.ts
export { GET, POST } from 'auth';
Ray
yes
Standard ChinchillaOP
actually, there is not GET and POST method I'm exporting
Ray
can you show it
Standard ChinchillaOP
please check the code snippet in the first msg
Ray
ok add some export 
export const { auth, signIn, signOut, handlers: { GET, POST } } = NextAuth({
  ...
})
Standard ChinchillaOP
okay, so now in this directory app/api/auth/[...nextauth]/route.ts
export { GET, POST } from "../../../../../auth";
Ray
yes but if the auth.ts is in the root, you can just do export { GET, POST } from 'auth' there
if its inside app folder then export { GET, POST } from 'app/auth'
Standard ChinchillaOP
no it's in the root
Cannot find module 'auth' or its corresponding type declarations.ts(2307)
but still this error
when changing the path to auth
Ray
you exporting like this?
export { GET, POST } from "../../../../../auth";
@Ray you exporting like this? export { GET, POST } from "../../../../../auth";
Standard ChinchillaOP
yes in this app/api/auth/[...nextauth]/route.ts file then no error in ide
but when switching path to 'auth' getting this error - Cannot find module 'auth' or its corresponding type declarations.ts(2307) in ide
Ray
ok use "../../../../auth" then
Standard ChinchillaOP
okay what next?
Ray
try signin
Standard ChinchillaOP
means when the sign up button is clicked what to do?
Ray
make sure you have set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in .env
@Ray make sure you have set GOOGLE_CLIENT_ID and GOOGLE_CLIENT_SECRET in .env
Standard ChinchillaOP
yes I have setup this
Ray
how is your login page
Standard ChinchillaOP
Ray
add onClick={() => signIn('google')} to the sign in with google button
import signIn from the auth file
Standard ChinchillaOP
should I create server action for it
Ray
sure if you want
import { signIn } from "../auth"

export default function Page() {
 return (
  <form action={async () => {
    "use server"
    await signIn("google")
  }}>
   <button>Sign in with Google</button>
  </form>
)
Ray
does it work?
Standard ChinchillaOP
I'm trying
Ray
ok
Standard ChinchillaOP
getting this error
Import trace for requested module:
./node_modules/@mapbox/node-pre-gyp/lib/ sync ^./.*$
./node_modules/@mapbox/node-pre-gyp/lib/node-pre-gyp.js
./node_modules/bcrypt/bcrypt.js
./auth.ts
./src/components/GoogleSignInButton.tsx
./src/components/form/SignInForm.tsx
⨯ ./node_modules/@mapbox/node-pre-gyp/lib/clean.js:8:0
Module not found: Can't resolve 'fs'
means sign in page it not able to load
but on removing import { signIn } from "../../auth"; from the button component it gets loaded
I've a seprate action.ts file for server actions
and there I've created this server action
export async function googleAuth() {
  await signIn("google");
}
and in the google sign in button is like this
import { FC, ReactNode } from "react";
import { Button } from "./ui/button";
import { googleAuth } from "@/lib/action";

interface GoogleSignInButtonProps {
  children: ReactNode;
}
const GoogleSignInButton: FC<GoogleSignInButtonProps> = ({ children }) => {
  const loginWithGoogle = () => googleAuth();

  return (
    <Button onClick={loginWithGoogle} className="w-full">
      {children}
    </Button>
  );
};

export default GoogleSignInButton;
@Ray is this okay?
Standard ChinchillaOP
I've tried this and after choosing the account to sign in I'm redirected to this page
http://localhost:3000/api/auth/error?error=CallbackRouteError
and in the terminal I'm getting this
Standard ChinchillaOP
can you share how should be the schema for the user?
currently my schema looks like this
model User {
  id       Int    @id @default(autoincrement())
  name     String
  email    String @unique
  password String
}