diff --git a/components/Navbar.tsx b/components/Navbar.tsx index 2fd4193..96dc64a 100644 --- a/components/Navbar.tsx +++ b/components/Navbar.tsx @@ -5,20 +5,26 @@ import React from 'react' import { FaShoppingCart } from 'react-icons/fa' import {SiAnalogue} from 'react-icons/si' import {MdKeyboardArrowDown} from 'react-icons/md' +import useAuthStore from '../store/authStore' + + + const Navbar = () => { - const {data: user} = useQuery(['user'], () => axios.get('http://localhost:3000/api/user', {withCredentials: true}).then(res => res.data)) + + const {userProfile, addUser, removeUser} : any = useAuthStore() + // console.log(user) - console.log('user',user) + // console.log('user',user) return (
-
+

Ecom

@@ -28,7 +34,7 @@ const Navbar = () => {
- {user?.name ? ( + {userProfile.name ? (
{}}> { />

Hi, - {user?.name} + {userProfile?.name}

diff --git a/package.json b/package.json index f947e0d..9592f3e 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "argon2": "^0.29.1", "axios": "^0.27.2", "cookie": "^0.5.0", + "csstype": "^3.1.0", "jsonwebtoken": "^8.5.1", "lodash": "^4.17.21", "next": "12.2.5", @@ -24,7 +25,8 @@ "react-hook-form": "^7.34.2", "react-hot-toast": "^2.3.0", "react-icons": "^4.4.0", - "zod": "^3.18.0" + "zod": "^3.18.0", + "zustand": "^4.1.1" }, "devDependencies": { "@types/cookie": "^0.5.1", diff --git a/pages/_app.tsx b/pages/_app.tsx index 2802c5d..ed15af4 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,18 +2,33 @@ import '../styles/globals.css' import type { AppProps } from 'next/app' import { QueryClient, QueryClientProvider } from '@tanstack/react-query' import Navbar from '../components/Navbar' +import { GoogleOAuthProvider } from '@react-oauth/google' +import { useEffect, useState } from 'react' function MyApp({ Component, pageProps }: AppProps) { + + + const [isSSR, setIsSSR] = useState(true) + + useEffect(()=> { + setIsSSR(false) + }, []) + + if(isSSR) return null + + const queryClient = new QueryClient() return( + + ) } diff --git a/pages/api/auth/index.ts b/pages/api/auth/index.ts new file mode 100644 index 0000000..446d713 --- /dev/null +++ b/pages/api/auth/index.ts @@ -0,0 +1,31 @@ +import { NextApiRequest, NextApiResponse } from 'next'; +import prisma from '../../../lib/prisma'; + + + +export default async function handler(req: NextApiRequest, res: NextApiResponse) { + if(req.method === 'POST') { + const user = req.body + + // console.log(user) + + // const findUser = await prisma.user.findUnique({where: {email : user.email}}) + + const upsertUser = await prisma.user.upsert({ + where: { + email: user.email + }, + update: { + email: user.email + }, + create: user + }) + + console.log(upsertUser) + + + + + + } +} \ No newline at end of file diff --git a/pages/api/auth/login.ts b/pages/api/auth/login.ts index ae3f642..6f60525 100644 --- a/pages/api/auth/login.ts +++ b/pages/api/auth/login.ts @@ -29,9 +29,10 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse) path: '/' }) + const response = omit(user, "password") res.setHeader('Set-Cookie', serialsed) - res.status(200).json({message: 'success'}) + res.status(200).json({ ...response ,message: 'success'}) } \ No newline at end of file diff --git a/pages/api/auth/register.ts b/pages/api/auth/register.ts index b5f95d0..5094ab5 100644 --- a/pages/api/auth/register.ts +++ b/pages/api/auth/register.ts @@ -21,7 +21,7 @@ export default async function(req: NextApiRequest, res: NextApiResponse){ const newUser = await prisma.user.create({ data: { - email, password: hash, name + email, password: hash, name, type: 'user' } }) @@ -35,9 +35,11 @@ export default async function(req: NextApiRequest, res: NextApiResponse){ path: '/' }) + const response = omit(newUser, 'password') + res.setHeader('Set-Cookie', serialsed) - res.json({message: 'success'}) + res.json({...response, message: 'success'}) } catch (error) { console.log(error) } diff --git a/pages/auth/login.tsx b/pages/auth/login.tsx index 3b99ba5..1cbd3fc 100644 --- a/pages/auth/login.tsx +++ b/pages/auth/login.tsx @@ -1,7 +1,9 @@ import axios from 'axios' +import { omit } from 'lodash'; import { useRouter } from 'next/router' import React from 'react' import { useForm, SubmitHandler } from 'react-hook-form' +import useAuthStore from '../../store/authStore'; type Inputs = { email: string, @@ -13,6 +15,7 @@ const Login = () => { const {register, handleSubmit, formState: {errors}} = useForm() const router = useRouter() + const {addUser} = useAuthStore() const onSubmit: SubmitHandler = async value => { @@ -25,7 +28,9 @@ const Login = () => { console.log("res", res) const data = res.data if(data.message === 'success'){ + addUser(data) router.push('/') + router.reload() } }) .then(err => console.log('err',err)); diff --git a/pages/auth/register.tsx b/pages/auth/register.tsx index f9accc7..349a83c 100644 --- a/pages/auth/register.tsx +++ b/pages/auth/register.tsx @@ -5,6 +5,9 @@ import { useMutation } from '@tanstack/react-query'; import { useRouter } from 'next/router'; import { SubmitHandler, useForm } from 'react-hook-form'; import axios from 'axios'; +import { GoogleLogin } from '@react-oauth/google'; +import { createOrGetUser } from '../../utils'; +import useAuthStore from '../../store/authStore'; type Inputs = { @@ -37,6 +40,8 @@ const createUserSchema = object({ const Register = () => { + const {addUser} = useAuthStore() + const {register, handleSubmit, formState: {errors}} = useForm({ resolver: zodResolver(createUserSchema) @@ -53,10 +58,13 @@ const Register = () => { value, { withCredentials: true } ).then(res => { - console.log("res", res) + // console.log("res", res) const data = res.data + // console.log(data) if(data.message === 'success'){ + addUser(data) router.push('/') + router.reload() } }) .then(err => console.log('err',err)); @@ -73,9 +81,13 @@ const Register = () => {
- - googleLogin - +
+ createOrGetUser(response)} + onError={() => console.log('err')} + + /> +

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 2006174..58cb6d2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -15,6 +15,7 @@ specifiers: autoprefixer: ^10.4.8 axios: ^0.27.2 cookie: ^0.5.0 + csstype: ^3.1.0 eslint: 8.23.0 eslint-config-next: 12.2.5 jsonwebtoken: ^8.5.1 @@ -30,6 +31,7 @@ specifiers: tailwindcss: ^3.1.8 typescript: 4.8.2 zod: ^3.18.0 + zustand: ^4.1.1 dependencies: '@hookform/resolvers': 2.9.7_react-hook-form@7.34.2 @@ -39,15 +41,17 @@ dependencies: argon2: 0.29.1 axios: 0.27.2 cookie: 0.5.0 + csstype: 3.1.0 jsonwebtoken: 8.5.1 lodash: 4.17.21 next: 12.2.5_biqbaboplfbrettd7655fr4n2y react: 18.2.0 react-dom: 18.2.0_react@18.2.0 react-hook-form: 7.34.2_react@18.2.0 - react-hot-toast: 2.3.0_biqbaboplfbrettd7655fr4n2y + react-hot-toast: 2.3.0_vt6aeitzauirmcdhimiad2yjxy react-icons: 4.4.0_react@18.2.0 zod: 3.18.0 + zustand: 4.1.1_react@18.2.0 devDependencies: '@types/cookie': 0.5.1 @@ -810,7 +814,6 @@ packages: /csstype/3.1.0: resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==} - dev: true /damerau-levenshtein/1.0.8: resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==} @@ -1477,10 +1480,12 @@ packages: slash: 3.0.0 dev: true - /goober/2.1.11: + /goober/2.1.11_csstype@3.1.0: resolution: {integrity: sha512-5SS2lmxbhqH0u9ABEWq7WPU69a4i2pYcHeCxqaNq6Cw3mnrF0ghWNM4tEGid4dKy8XNIAUbuThuozDHHKJVh3A==} peerDependencies: csstype: ^3.0.10 + dependencies: + csstype: 3.1.0 dev: false /grapheme-splitter/1.0.4: @@ -2266,14 +2271,14 @@ packages: react: 18.2.0 dev: false - /react-hot-toast/2.3.0_biqbaboplfbrettd7655fr4n2y: + /react-hot-toast/2.3.0_vt6aeitzauirmcdhimiad2yjxy: resolution: {integrity: sha512-/RxV+bfjld7tSJR1SCLzMAXgFuNW7fCpK6+vbYqfmbGSWcqTMz2rizrvfWKvtcPH5HK0NqxmBaC5SrAy1F42zA==} engines: {node: '>=10'} peerDependencies: react: '>=16' react-dom: '>=16' dependencies: - goober: 2.1.11 + goober: 2.1.11_csstype@3.1.0 react: 18.2.0 react-dom: 18.2.0_react@18.2.0 transitivePeerDependencies: @@ -2734,3 +2739,19 @@ packages: /zod/3.18.0: resolution: {integrity: sha512-gwTm8RfUCe8l9rDwN5r2A17DkAa8Ez4Yl4yXqc5VqeGaXaJahzYYXbTwvhroZi0SNBqTwh/bKm2N0mpCzuw4bA==} dev: false + + /zustand/4.1.1_react@18.2.0: + resolution: {integrity: sha512-h4F3WMqsZgvvaE0n3lThx4MM81Ls9xebjvrABNzf5+jb3/03YjNTSgZXeyrvXDArMeV9untvWXRw1tY+ntPYbA==} + engines: {node: '>=12.7.0'} + peerDependencies: + immer: '>=9.0' + react: '>=16.8' + peerDependenciesMeta: + immer: + optional: true + react: + optional: true + dependencies: + react: 18.2.0 + use-sync-external-store: 1.2.0_react@18.2.0 + dev: false diff --git a/prisma/schema.prisma b/prisma/schema.prisma index c7278a7..821482b 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -11,10 +11,10 @@ datasource db { } model User { - id Int @id @default(autoincrement()) + id String @id @default(cuid()) email String @unique name String? - password String + password String? picture String? type String? } diff --git a/store/authStore.ts b/store/authStore.ts new file mode 100644 index 0000000..f68e556 --- /dev/null +++ b/store/authStore.ts @@ -0,0 +1,22 @@ +import { useQuery } from "@tanstack/react-query"; +import axios from "axios"; +import create from "zustand"; +import {persist} from 'zustand/middleware' + + + + + +const authStore = (set: any) => ({ + userProfile: null, + addUser: (user: any) => set({userProfile: user}), + removeUser: () => set({userProfile: null}), +}) + +const useAuthStore = create( + persist(authStore, { + name: 'auth' + }) +) + +export default useAuthStore \ No newline at end of file diff --git a/utils/index.ts b/utils/index.ts new file mode 100644 index 0000000..c10c7c3 --- /dev/null +++ b/utils/index.ts @@ -0,0 +1,21 @@ +import axios from "axios"; +import { decode } from "jsonwebtoken"; + +export const createOrGetUser = async (response: any ,addUser?: any) => { + + // console.log(response.credential) + const decoded= decode(response.credential) ; + // console.log("decoded", decoded) + const {name, picture, sub, email} = decoded as any; + + const user= {name, picture, id: sub, email, type: 'google-user'} + + + + addUser(user) + + + + + await axios.post(`http://localhost:3000/api/auth`, user); +}; \ No newline at end of file