next-auth 中弹出登录

Question

是否可以在下一个身份验证的弹出窗口中进行社交登录？或者只能重定向到提供商身份验证页面？

我这样问是因为我不想在重定向到提供程序页面后丢失所有应用程序状态。

我不想将内容保存在数据库或浏览器存储中。

export default NextAuth({
  // Configure one or more authentication providers
  providers: [
    Providers.Facebook({
      clientId: process.env.FACEBOOK_ID,
      clientSecret: PROCESS.ENV.FACEBOOK_SECRET
    }),
    Providers.Google({
      clientId: process.env.GOOGLE_ID,
      clientSecret: process.env.GOOGLE_SECRET,
      authorizationUrl: 'https://accounts.google.com/o/oauth2/v2/auth?prompt=consent&access_type=offline&response_type=code',
    }),
    Providers.Credentials({
      name: "credentials",
      async authorize(credentials, req) {
        const user = { email: req.body.email }
        return user
      },
    }),
    // ...add more providers here
  ],
  jwt: {
    signingKey: process.env.SIGNINING_KEY,
  },
  callbacks: {
    async signIn(user, account) {
      const { name, email } = user;
      const { provider } = account
  
      try {
        
        
        // Do something

        return true;
      } catch (err) {
        console.log(err)
        return false;
      }
    },

    async jwt(token, user, account) {
      if (account?.accessToken) {
        // some code
      } 
      return token
    },

    async session (session, token) {
      
      session.accessToken = token.accessToken
      return session
    }
  }
})

Answer 1

取自 https://github.com/arye321/nextauth-google-popup-login

添加google-signin.js​/pages

google-signin.js：

import { signIn, useSession } from "next-auth/react";
import { useEffect } from "react";

const SignInPage = () => {
    const { data: session, status } = useSession();

    useEffect(() => {
        if (!(status === "loading") && !session) void signIn("google");
        if (session) window.close();
    }, [session, status]);

    return (
        <div
            style={{
                width: "100vw",
                height: "100vh",
                position: "absolute",
                left: 0,
                top: 0,
                background: "white",
            }}
        ></div>
    );
};

export default SignInPage;

在index.js：

import { useSession, signIn, signOut } from "next-auth/react";

export default function Home() {
  const { data: session, status } = useSession();

  const popupCenter = (url, title) => {
    const dualScreenLeft = window.screenLeft ?? window.screenX;
    const dualScreenTop = window.screenTop ?? window.screenY;
    const width =
      window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;

    const height =
      window.innerHeight ??
      document.documentElement.clientHeight ??
      screen.height;

    const systemZoom = width / window.screen.availWidth;

    const left = (width - 500) / 2 / systemZoom + dualScreenLeft;
    const top = (height - 550) / 2 / systemZoom + dualScreenTop;

    const newWindow = window.open(
      url,
      title,
      `width=${500 / systemZoom},height=${550 / systemZoom
      },top=${top},left=${left}`
    );

    newWindow?.focus();
  };

  if (status === "authenticated") {
    return (
      <div>
        < h2 > Welcome {session.user.email} </h2 >
        <button onClick={() => signOut()}>Sign out</button>
      </div>
    )
  }
  else if (status === "unauthenticated") {
    return (
      <div>
        <h2>Please Login</h2>
        <button onClick={() => popupCenter("/google-signin", "Sample Sign In")} >
          Sign In with Google
        </button>
      </div>
    )
  }

  return (
    <div>
      <h1>Loading...</h1>
    </div>
  )
}

归功于https://github.com/krushilnaik/with-prisma-mongodb-nextauth

Answer 2

您可以使用以下命令从任何地方（例如您自己的 Modal 组件）调用 signIn 方法：

import { signIn } from 'next-auth/react';
...
signIn("credentials", {redirect: false, email, password })
  .then(() => {
     setLoading(false)
     closeModal()
  })

并在 [...nextauth].ts 中声明您的提供者：

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: "Credentials",
      credentials: {
        username: { label: "Username", type: "text", placeholder: "jsmith" },
        password: {  label: "Password", type: "password" }
      },
      async authorize(credentials, req) {
        const user = { id: 1, name: "J Smith", email: "jsmith@example.com" }
        return user
      }
    })
  ],
  secret: "secret token",
});