From f933671978926369710439ac34fed3cdf546dc3c Mon Sep 17 00:00:00 2001 From: Fredy Date: Sun, 11 Feb 2024 20:03:03 +0300 Subject: [PATCH] feat : new supabase instance --- config/supabaseInstance.ts | 16 ---------- lib/supabase/browser-client.ts | 8 +++++ lib/supabase/server-client.ts | 54 +++++++++++++++++++++++++++++++++ lib/supabase/use-session.ts | 25 ++++++++++++++++ package.json | 2 ++ pnpm-lock.yaml | 55 +++++++++++++++++++++++++--------- 6 files changed, 130 insertions(+), 30 deletions(-) delete mode 100644 config/supabaseInstance.ts create mode 100644 lib/supabase/browser-client.ts create mode 100644 lib/supabase/server-client.ts create mode 100644 lib/supabase/use-session.ts diff --git a/config/supabaseInstance.ts b/config/supabaseInstance.ts deleted file mode 100644 index 7ab3d67..0000000 --- a/config/supabaseInstance.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { cookies } from 'next/headers'; -import { createServerClient, type CookieOptions } from '@supabase/ssr'; - -const cookieStore = cookies(); - -export default createServerClient( - process.env.NEXT_PUBLIC_SUPABASE_URL!, - process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, - { - cookies: { - get(name: string) { - return cookieStore.get(name)?.value; - }, - }, - } as CookieOptions -); diff --git a/lib/supabase/browser-client.ts b/lib/supabase/browser-client.ts new file mode 100644 index 0000000..8ed5e12 --- /dev/null +++ b/lib/supabase/browser-client.ts @@ -0,0 +1,8 @@ +import { createBrowserClient } from '@supabase/ssr'; + +export function createSupabaseBrowserClient() { + return createBrowserClient( + process.env.NEXT_PUBLIC_SUPABASE_URL!, + process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY! + ); +} diff --git a/lib/supabase/server-client.ts b/lib/supabase/server-client.ts new file mode 100644 index 0000000..384dd15 --- /dev/null +++ b/lib/supabase/server-client.ts @@ -0,0 +1,54 @@ +import { type NextRequest, type NextResponse } from "next/server"; +import { cookies } from "next/headers"; +import { getCookie, setCookie } from "cookies-next"; +import { createServerClient, type CookieOptions } from "@supabase/ssr"; + +// server component can only get cookies and not set them, hence the "component" check +export function createSupabaseServerClient(component: boolean = false) { + return createServerClient( + process.env.NEXT_PUBLIC_SUPABASE_URL!, + process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, + { + cookies: { + get(name: string) { + return cookies().get(name)?.value; + }, + set(name: string, value: string, options: CookieOptions) { + if (component) return; + cookies().set(name, value, options); + }, + remove(name: string, options: CookieOptions) { + if (component) return; + cookies().set(name, "", options); + }, + }, + } + ); +} + +export function createSupabaseServerComponentClient() { + return createSupabaseServerClient(true); +} + +export function createSupabaseReqResClient( + req: NextRequest, + res: NextResponse +) { + return createServerClient( + process.env.NEXT_PUBLIC_SUPABASE_URL!, + process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!, + { + cookies: { + get(name: string) { + return getCookie(name, { req, res }); + }, + set(name: string, value: string, options: CookieOptions) { + setCookie(name, value, { req, res, ...options }); + }, + remove(name: string, options: CookieOptions) { + setCookie(name, "", { req, res, ...options }); + }, + }, + } + ); +} diff --git a/lib/supabase/use-session.ts b/lib/supabase/use-session.ts new file mode 100644 index 0000000..dfbd398 --- /dev/null +++ b/lib/supabase/use-session.ts @@ -0,0 +1,25 @@ +"use client"; + +import { useEffect, useState } from "react"; +import { createSupabaseBrowserClient } from "./browser-client"; +import { Session } from "@supabase/supabase-js"; + +export default function useSession() { + const [session, setSession] = useState(null); + + useEffect(() => { + const supabase = createSupabaseBrowserClient(); + + const getSession = async () => { + const { + data: { session }, + } = await supabase.auth.getSession(); + + setSession(session); + }; + + getSession(); + }, []); + + return session; +} diff --git a/package.json b/package.json index 5319ff2..1794ab1 100644 --- a/package.json +++ b/package.json @@ -14,11 +14,13 @@ "@radix-ui/react-icons": "^1.3.0", "@radix-ui/react-slot": "^1.0.2", "@supabase/ssr": "^0.0.10", + "@supabase/supabase-js": "^2.39.3", "@tanstack/react-query": "^5.4.3", "@tanstack/react-query-devtools": "^5.8.1", "@tanstack/react-query-next-experimental": "^5.18.0", "class-variance-authority": "^0.7.0", "clsx": "^2.0.0", + "cookies-next": "^4.1.1", "lucide-react": "^0.291.0", "next": "14.0.1", "next-themes": "^0.2.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5dafb83..90a3cbe 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -16,7 +16,10 @@ dependencies: version: 1.0.2(@types/react@18.2.33)(react@18.2.0) '@supabase/ssr': specifier: ^0.0.10 - version: 0.0.10(@supabase/supabase-js@2.39.0) + version: 0.0.10(@supabase/supabase-js@2.39.3) + '@supabase/supabase-js': + specifier: ^2.39.3 + version: 2.39.3 '@tanstack/react-query': specifier: ^5.4.3 version: 5.4.3(react-dom@18.2.0)(react@18.2.0) @@ -32,6 +35,9 @@ dependencies: clsx: specifier: ^2.0.0 version: 2.0.0 + cookies-next: + specifier: ^4.1.1 + version: 4.1.1 lucide-react: specifier: ^0.291.0 version: 0.291.0(react@18.2.0) @@ -826,8 +832,8 @@ packages: '@supabase/node-fetch': 2.6.15 dev: false - /@supabase/gotrue-js@2.58.0: - resolution: {integrity: sha512-cDslIiiPUzS8DQQqYxK9kT+Ngbrbx0a68e+AsU3H4+eLyAfq+m9aAqKXHHr3H5jqeFvIprSe87r4SeyOYyMnrQ==} + /@supabase/gotrue-js@2.62.2: + resolution: {integrity: sha512-AP6e6W9rQXFTEJ7sTTNYQrNf0LCcnt1hUW+RIgUK+Uh3jbWvcIST7wAlYyNZiMlS9+PYyymWQ+Ykz/rOYSO0+A==} dependencies: '@supabase/node-fetch': 2.6.15 dev: false @@ -845,24 +851,24 @@ packages: '@supabase/node-fetch': 2.6.15 dev: false - /@supabase/realtime-js@2.9.0: - resolution: {integrity: sha512-e/SI+/eqFJorAKAgVAwKQ9hSDQSBp86Yh7XbQmfJJ90LEfpM52HlTfJt/03lcepRu6BmH5h1uYn1b4zta7ghdw==} + /@supabase/realtime-js@2.9.3: + resolution: {integrity: sha512-lAp50s2n3FhGJFq+wTSXLNIDPw5Y0Wxrgt44eM5nLSA3jZNUUP3Oq2Ccd1CbZdVntPCWLZvJaU//pAd2NE+QnQ==} dependencies: '@supabase/node-fetch': 2.6.15 '@types/phoenix': 1.6.4 - '@types/websocket': 1.0.10 + '@types/ws': 8.5.10 ws: 8.14.2 transitivePeerDependencies: - bufferutil - utf-8-validate dev: false - /@supabase/ssr@0.0.10(@supabase/supabase-js@2.39.0): + /@supabase/ssr@0.0.10(@supabase/supabase-js@2.39.3): resolution: {integrity: sha512-eVs7+bNlff8Fd79x8K3Jbfpmf8P8QRA1Z6rUDN+fi4ReWvRBZyWOFfR6eqlsX6vTjvGgTiEqujFSkv2PYW5kbQ==} peerDependencies: '@supabase/supabase-js': ^2.33.1 dependencies: - '@supabase/supabase-js': 2.39.0 + '@supabase/supabase-js': 2.39.3 cookie: 0.5.0 ramda: 0.29.1 dev: false @@ -873,14 +879,14 @@ packages: '@supabase/node-fetch': 2.6.15 dev: false - /@supabase/supabase-js@2.39.0: - resolution: {integrity: sha512-cYfnwWRW5rYBbPT/BNIejtRT9ULdD9PnIExQV28PZpqcqm3PLwS4f3pY7WGB01Da63VYdvktZPKuYvreqsj/Zg==} + /@supabase/supabase-js@2.39.3: + resolution: {integrity: sha512-NoltJSaJNKDJNutO5sJPAAi5RIWrn1z2XH+ig1+cHDojT6BTN7TvZPNa3Kq3gFQWfO5H1N9El/bCTZJ3iFW2kQ==} dependencies: '@supabase/functions-js': 2.1.5 - '@supabase/gotrue-js': 2.58.0 + '@supabase/gotrue-js': 2.62.2 '@supabase/node-fetch': 2.6.15 '@supabase/postgrest-js': 1.9.0 - '@supabase/realtime-js': 2.9.0 + '@supabase/realtime-js': 2.9.3 '@supabase/storage-js': 2.5.5 transitivePeerDependencies: - bufferutil @@ -955,6 +961,10 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: false + /@types/cookie@0.6.0: + resolution: {integrity: sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==} + dev: false + /@types/json-schema@7.0.14: resolution: {integrity: sha512-U3PUjAudAdJBeC2pgN8uTIKgxrb4nlDF3SF0++EldXQvQBGkpFZMSnwQiIoDU77tv45VgNkl/L4ouD+rEomujw==} dev: true @@ -963,6 +973,10 @@ packages: resolution: {integrity: sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==} dev: true + /@types/node@16.18.80: + resolution: {integrity: sha512-vFxJ1Iyl7A0+xB0uW1r1v504yItKZLdqg/VZELUZ4H02U0bXAgBisSQ8Erf0DMruNFz9ggoiEv6T8Ll9bTg8Jw==} + dev: false + /@types/node@20.8.10: resolution: {integrity: sha512-TlgT8JntpcbmKUFzjhsyhGfP2fsiz1Mv56im6enJ905xG1DAYesxJaeSbGqQmAw8OWPdhyJGhGSQGKRNJ45u9w==} dependencies: @@ -994,8 +1008,8 @@ packages: resolution: {integrity: sha512-MMzuxN3GdFwskAnb6fz0orFvhfqi752yjaXylr0Rp4oDg5H0Zn1IuyRhDVvYOwAXoJirx2xuS16I3WjxnAIHiQ==} dev: true - /@types/websocket@1.0.10: - resolution: {integrity: sha512-svjGZvPB7EzuYS94cI7a+qhwgGU1y89wUgjT6E2wVUfmAGIvRfT7obBvRtnhXCSsoMdlG4gBFGE7MfkIXZLoww==} + /@types/ws@8.5.10: + resolution: {integrity: sha512-vmQSUcfalpIq0R9q7uTo2lXs6eGIpt9wtnLdMv9LVpIjCA/+ufZRozlVoVelIYixx1ugCBKDhn89vnsEGOCx9A==} dependencies: '@types/node': 20.8.10 dev: false @@ -1459,6 +1473,19 @@ packages: engines: {node: '>= 0.6'} dev: false + /cookie@0.6.0: + resolution: {integrity: sha512-U71cyTamuh1CRNCfpGY6to28lxvNwPG4Guz/EVjgf3Jmzv0vlDp1atT9eS5dDjMYHucpHbWns6Lwf3BKz6svdw==} + engines: {node: '>= 0.6'} + dev: false + + /cookies-next@4.1.1: + resolution: {integrity: sha512-20QaN0iQSz87Os0BhNg9M71eM++gylT3N5szTlhq2rK6QvXn1FYGPB4eAgU4qFTunbQKhD35zfQ95ZWgzUy3Cg==} + dependencies: + '@types/cookie': 0.6.0 + '@types/node': 16.18.80 + cookie: 0.6.0 + dev: false + /cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'}