Next.js Discord

Discord Forum

Help me log in with google using next/auth

Unanswered
Brown bear posted this in #help-forum
Open in Discord
Brown bearOP
My code inside : [...nextauth].js : 
import NextAuth from "next-auth";
import GoogleProvider from "next-auth/providers/google";

export const authOptions = {
  secret: process.env.NEXTAUTH_SECRET,
  providers: [
    {
      name: "google",
      provider: GoogleProvider,
      clientId: process.env.GOOGLE_API,
    },
  ],
};

My next_auth_provider.js :

"use client";

import { SessionProvider } from "next-auth/react";

const NextAuthProvider = ({ children }) => {
  return <SessionProvider>{children}</SessionProvider>;
};

export default NextAuthProvider;


My layout.js to wrap everything : 

"use client";

import Navbar from "./components/Navbar";
import { UserProvider } from "./context/UserContext";
import "./globals.css";
import { SessionProvider } from "next-auth/react";
import { Session } from "next-auth";
import { useSession } from "next-auth/react";
import NextAuthProvider from "./providers/next_auth";

export const metadata = {
  title: "",
  description: "",
};

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <NextAuthProvider>
          <UserProvider>
            <Navbar />
            {children}
          </UserProvider>
        </NextAuthProvider>
      </body>
    </html>
  );
}

Finally my button to make the call for signing in with google :
import { useSession, signIn, signOut } from "next-auth/react";

const signInWithGoogle = (e) => {
    e.preventDefault();
    signIn("google", { callbackUrl: "/" });


But I am getting the error :

[next-auth][error][CLIENT_FETCH_ERROR]
https://next-auth.js.org/errors#client_fetch_error JSON.parse: unexpected character at line 1 column 1 of the JSON data

How to fix it

I have a custom server in backend and I don't require google_secret_key. This should fetch me a json idToken that I can send again to our server to fetch user data.

0 Replies