-
글쓴이글
-
2023년 8월 23일 23:08 #95647
JUN-BANANA참가자package.json { "name": "v2", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "next lint" }, "dependencies": { "@emotion/react": "^11.11.1", "@emotion/styled": "^11.11.0", "@mui/icons-material": "^5.14.3", "@mui/material": "^5.14.4", "@mui/styled-engine-sc": "^5.12.0", "mongodb": "^5.7.0", "next": "13.4.13", "next-auth": "^4.23.1", "react": "18.2.0", "react-dom": "18.2.0", "react-responsive-carousel": "^3.2.23", "styled-components": "^5.3.11" } } 질문 1. [...nextauth].js 에서 구글 인증을 구현 했는데 함수의 이름이 GoogleProvider가 아니라 Google 로 해야 되는데 이게 버전의 문제인지 무엇인지 모르겠습니다. 질문 2. header 컴포넌트안에 로그인버튼을 구현해놓았는데 로그인 정보가 콘솔에 undifined라고 뜹니다."use client"
import "../styles/header.css"; import logo from "../public/logo.png"; import Link from "next/link"; import Image from "next/image"; import {useState} from "react"; import {signIn, signOut, useSession} from "next-auth/react";export default function Header() { //영어 메뉴 혹은 한국어 버전 나누어 줘야함 let menu = ['intro', 'products', 'board']const [dropDown, setDropDown] = useState(false) const showDropDown = () => setDropDown(true) const closeDropDown = () => setDropDown(false) const session = useSession(); console.log(session)return ( <> <header> <div className="header-box"> <Link href={"/"} className="logo"> <div> Logo {/*<Image src={logo} alt={logo}/>*/} </div> </Link> <div className="menu flex fw-18"> <div className="menu-box" onMouseOver={showDropDown} onMouseOut={closeDropDown} > {menu.map((a, i) => { return (<Link href={"/" + menu[i]} onMouseOver={showDropDown} > <div> {menu[i]} </div> </Link>) })} </div> </div> <div className="login"> { session ? (<button onClick={() => { signOut() }}>SignOut</button>) : (<button onClick={() => { signIn() }}>SignIn</button>) } </div> </div> </header> {/*{dropDown && (*/} {/* <div className="drop-menu flex">*/} {/* <div className="drop-menu-contain">*/} {/* Dropmenu*/} {/* </div>*/}{/* </div>)}*/} </> ) }2023년 8월 23일 23:10 #95649
JUN-BANANA참가자++ 로그아웃도 이루어 지지 않고 있습니다. { data: undefined, status: 'loading', update: [Function: update] }2023년 8월 24일 09:38 #95663
codingapple키 마스터https://next-auth.js.org/providers/google https://authjs.dev/reference/core/providers_google 이거 둘 중에 하나 따라해봅시다
2023년 8월 25일 05:38 #95746
JUN-BANANA참가자로그인 로그아웃까지는 되고 있는데 아직도 console.log(session.user.email) 이 안됩니다. 혹시 제가 잘못한 곳이 있을까요? [...nextauth].js import NextAuth from "next-auth"; import GithubProvider from "next-auth/providers/github" import Google from "next-auth/providers/google";
export const authOptions = { // Configure one or more authentication providers providers: [ Google({ // clientId: process.env.GOOGLE_CLIENT_ID, // clientSecret: process.env.GOOGLE_CLIENT_SECRET }),], jwt: { maxAge: 60, }, callbacks: { async signIn({ user, account, profile }) {const isAllowedToSignIn = true; if (isAllowedToSignIn) { user.email; return true; } else { return false; } }, async jwt({ token, user, account, profile, isNewUser }) { if (account) { token.accessToken = account.access_token; token.id = profile.id; token.email = user.email; // 사용자 이메일 토큰에 포함 } return token; }, async session({ session, user, token }) { session.accessToken = token.accessToken; session.user.id = token.id; session.user.email = token.email; // 사용자 이메일 세션에 저장 return session; }, }, }export default NextAuth(authOptions) Header.js
"use client"
import "../styles/header.css"; import logo from "../public/logo.png"; import Link from "next/link"; import {useState} from "react"; import {authOptions} from "@/pages/api/auth/[...nextauth]"; import {signIn, signOut, useSession} from "next-auth/react";export default function Header() { //영어 메뉴 혹은 한국어 버전 나누어 줘야함 let menu = ['intro', 'products', 'board']const [dropDown, setDropDown] = useState(false) const showDropDown = () => setDropDown(true) const closeDropDown = () => setDropDown(false) // const session = useSession(); const { data: session } = useSession(); console.log(session.user.email)return ( <> <header> <div className="header-box"> <Link href={"/"} className="logo"> <div> Logo {/*<Image src={logo} alt={logo}/>*/} </div> </Link> <div className="menu flex fw-18"> <div className="menu-box" onMouseOver={showDropDown} onMouseOut={closeDropDown} > {menu.map((a, i) => { return (<Link href={"/" + menu[i]} onMouseOver={showDropDown} > <div> {menu[i]} </div> </Link>) })} </div> </div> <div className="login"> { session ? (<button onClick={() => { signOut() }}>SignOut</button>) : (<button onClick={() => { signIn() }}>SignIn</button>) } </div> </div> </header> {/*{dropDown && (*/} {/* <div className="drop-menu flex">*/} {/* <div className="drop-menu-contain">*/} {/* Dropmenu*/} {/* </div>*/}{/* </div>)}*/} </> ) }2023년 8월 25일 17:33 #95796
JUN-BANANA참가자{ data: undefined, status: 'loading', update: [Function: update] } 이렇게 나옵니다.2023년 8월 25일 19:13 #95805
codingapple키 마스터nextauth 설정파일에 callbacks : 항목은 다 지워봅시다 secret : '어쩌구' 항목은 추가해봅시다
2023년 8월 26일 12:37 #95865
JUN-BANANA참가자음 왜 안될까요 ㅠㅠ 13 버전으로 오면서 오류가 많아진걸까요? 혹시 어느 부분에서 오류가 있을지 가능성있는 오류 목록에대한 리스트를 말해주실수 있을까요? 폴더 목록이 오류가 될수 도 있을수도 있을까요?
2023년 8월 26일 18:44 #95888
codingapple키 마스터providers: [ GoogleProvider({ clientId: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET }) ] 이거랑 secret : 정도만 추가하면 잘되어야합니다 구글 oauth 사이트에서 설정같은게 잘못된게 아닐까요 -
글쓴이글
- 답변은 로그인 후 가능합니다.