弹出登录在下一个四月
弹出登录在下一个四月
提问于 2021-07-29 01:20:21
有没有可能在下一个四月在Pop-up中做一个社交登录？还是只可能重定向到提供者auth页面？
我之所以问这个问题，是因为我不想在重定向到提供者页面之后丢失所有的应用程序状态。
我不想把东西保存在数据库或浏览器存储中。
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
}
}
})回答 2
Stack Overflow用户
发布于 2022-07-29 18:01:09
您可以从任何地方(例如，您自己的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",
});Stack Overflow用户
发布于 2022-09-19 18:09:54
取自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的学分
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68569010
复制相关文章
相似问题
腾讯云开发者
