From 59c8dd38244594d1ed25737d7baad685272fd6e6 Mon Sep 17 00:00:00 2001 From: greatsamist Date: Thu, 25 Jul 2024 13:19:40 +0100 Subject: [PATCH 1/4] =?UTF-8?q?=E2=9A=A1fix=20App=20Auto=20logout=20during?= =?UTF-8?q?=20sessions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../authorization/CheckAuthorization.tsx | 7 +------ packages/app/components/misc/SignInUserButton.tsx | 14 +++++++++++++- 2 files changed, 14 insertions(+), 7 deletions(-) diff --git a/packages/app/components/authorization/CheckAuthorization.tsx b/packages/app/components/authorization/CheckAuthorization.tsx index 1989e1c0c..644ae5537 100644 --- a/packages/app/components/authorization/CheckAuthorization.tsx +++ b/packages/app/components/authorization/CheckAuthorization.tsx @@ -2,7 +2,6 @@ import { apiUrl } from '@/lib/utils/utils' import { cookies } from 'next/headers' const CheckAuthorization = async () => { - const privyToken = cookies().get('privy-token') const userSession = cookies().get('user-session') const userAddress = cookies().get('user-address') const res = await fetch(`${apiUrl()}/auth/verify-token`, { @@ -14,12 +13,8 @@ const CheckAuthorization = async () => { headers: { 'Content-Type': 'application/json' }, }) const resData = await res.json() - const isAuthorized = - !!userAddress?.value && - !!privyToken?.value && - !!userSession?.value && - resData.data + !!userAddress?.value && !!userSession?.value && resData.data return isAuthorized } diff --git a/packages/app/components/misc/SignInUserButton.tsx b/packages/app/components/misc/SignInUserButton.tsx index 10005930d..d49f92a0f 100644 --- a/packages/app/components/misc/SignInUserButton.tsx +++ b/packages/app/components/misc/SignInUserButton.tsx @@ -4,7 +4,7 @@ import { useLogin, useLogout, usePrivy } from '@privy-io/react-auth' import { deleteSession, storeSession } from '@/lib/actions/auth' import { apiUrl } from '@/lib/utils/utils' import { Loader2 } from 'lucide-react' -import { useState } from 'react' +import React, { useEffect, useState } from 'react' interface SignInUserButtonProps { className?: string @@ -18,6 +18,13 @@ export const SignInUserButton = ({ const { ready, authenticated } = usePrivy() const [isLoading, setIsLoading] = useState(false) + const privyRefreshToken = localStorage.getItem( + 'privy:refresh_token' + ) + const parsePrivyRefreshToken = privyRefreshToken + ? JSON.parse(privyRefreshToken) + : null + const getSession = async () => { const privyToken = localStorage.getItem('privy:token') const token = privyToken ? JSON.parse(privyToken) : null @@ -36,6 +43,11 @@ export const SignInUserButton = ({ }) } + useEffect(() => { + if (!parsePrivyRefreshToken) logout() + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [parsePrivyRefreshToken]) + const { login } = useLogin({ onComplete: () => { getSession() From 246d6bb029124a6ffb80239500d556dbf720c5ea Mon Sep 17 00:00:00 2001 From: greatsamist Date: Fri, 26 Jul 2024 08:43:10 +0100 Subject: [PATCH 2/4] update privy deps --- packages/app/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app/package.json b/packages/app/package.json index 03fe6dacb..ab1c063bc 100644 --- a/packages/app/package.json +++ b/packages/app/package.json @@ -17,7 +17,7 @@ "@livekit/components-react": "^1.5.3", "@livekit/components-styles": "^1.0.9", "@livepeer/react": "^4.1.8", - "@privy-io/react-auth": "^1.64.0", + "@privy-io/react-auth": "^1.76.2", "@radix-ui/react-accordion": "^1.1.2", "@radix-ui/react-alert-dialog": "^1.0.5", "@radix-ui/react-aspect-ratio": "^1.0.3", @@ -97,9 +97,9 @@ "zod": "^3.22.4" }, "devDependencies": { - "@types/lodash": "^4.17.7", "@tailwindcss/typography": "^0.5.13", "@types/fuzzy-search": "^2.1.5", + "@types/lodash": "^4.17.7", "@types/node": "20.14.11", "@types/react": "18.2.37", "@types/react-color": "^3.0.11", From 5b68d4fe5821647a10ef62e656d7945725b37cba Mon Sep 17 00:00:00 2001 From: greatsamist Date: Thu, 25 Jul 2024 13:19:40 +0100 Subject: [PATCH 3/4] =?UTF-8?q?=E2=9A=A1fix=20App=20Auto=20logout=20during?= =?UTF-8?q?=20sessions?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../authorization/CheckAuthorization.tsx | 15 ++++------- .../app/components/misc/SignInUserButton.tsx | 26 ++++++++++++++----- 2 files changed, 24 insertions(+), 17 deletions(-) diff --git a/packages/app/components/authorization/CheckAuthorization.tsx b/packages/app/components/authorization/CheckAuthorization.tsx index f7eaf49f5..319ec4e66 100644 --- a/packages/app/components/authorization/CheckAuthorization.tsx +++ b/packages/app/components/authorization/CheckAuthorization.tsx @@ -2,9 +2,8 @@ import { apiUrl } from '@/lib/utils/utils'; import { cookies } from 'next/headers'; const CheckAuthorization = async () => { - const privyToken = cookies().get('privy-token'); - const userSession = cookies().get('user-session'); - const userAddress = cookies().get('user-address'); + const userSession = cookies().get('user-session') + const userAddress = cookies().get('user-address') const res = await fetch(`${apiUrl()}/auth/verify-token`, { method: 'POST', body: JSON.stringify({ @@ -12,14 +11,10 @@ const CheckAuthorization = async () => { }), credentials: 'include', headers: { 'Content-Type': 'application/json' }, - }); - const resData = await res.json(); - + }) + const resData = await res.json() const isAuthorized = - !!userAddress?.value && - !!privyToken?.value && - !!userSession?.value && - resData.data; + !!userAddress?.value && !!userSession?.value && resData.data return isAuthorized; }; diff --git a/packages/app/components/misc/SignInUserButton.tsx b/packages/app/components/misc/SignInUserButton.tsx index 15d24e736..9441794e6 100644 --- a/packages/app/components/misc/SignInUserButton.tsx +++ b/packages/app/components/misc/SignInUserButton.tsx @@ -1,10 +1,10 @@ -'use client'; -import { Button } from '@/components/ui/button'; -import { useLogin, useLogout, usePrivy } from '@privy-io/react-auth'; -import { deleteSession, storeSession } from '@/lib/actions/auth'; -import { apiUrl } from '@/lib/utils/utils'; -import { Loader2 } from 'lucide-react'; -import { useState } from 'react'; +'use client' +import { Button } from '@/components/ui/button' +import { useLogin, useLogout, usePrivy } from '@privy-io/react-auth' +import { deleteSession, storeSession } from '@/lib/actions/auth' +import { apiUrl } from '@/lib/utils/utils' +import { Loader2 } from 'lucide-react' +import React, { useEffect, useState } from 'react' interface SignInUserButtonProps { className?: string; @@ -18,6 +18,13 @@ export const SignInUserButton = ({ const { ready, authenticated } = usePrivy(); const [isLoading, setIsLoading] = useState(false); + const privyRefreshToken = localStorage.getItem( + 'privy:refresh_token' + ) + const parsePrivyRefreshToken = privyRefreshToken + ? JSON.parse(privyRefreshToken) + : null + const getSession = async () => { const privyToken = localStorage.getItem('privy:token'); const token = privyToken ? JSON.parse(privyToken) : null; @@ -36,6 +43,11 @@ export const SignInUserButton = ({ }); }; + useEffect(() => { + if (!parsePrivyRefreshToken) logout() + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [parsePrivyRefreshToken]) + const { login } = useLogin({ onComplete: () => { getSession(); From 47fe359b2f50eb3ff0720726dddd70ed0946b231 Mon Sep 17 00:00:00 2001 From: greatsamist Date: Fri, 26 Jul 2024 09:06:28 +0100 Subject: [PATCH 4/4] prettier --- .../authorization/CheckAuthorization.tsx | 10 +++--- .../app/components/misc/SignInUserButton.tsx | 35 +++++++------------ 2 files changed, 18 insertions(+), 27 deletions(-) diff --git a/packages/app/components/authorization/CheckAuthorization.tsx b/packages/app/components/authorization/CheckAuthorization.tsx index 319ec4e66..5bec0515c 100644 --- a/packages/app/components/authorization/CheckAuthorization.tsx +++ b/packages/app/components/authorization/CheckAuthorization.tsx @@ -2,8 +2,8 @@ import { apiUrl } from '@/lib/utils/utils'; import { cookies } from 'next/headers'; const CheckAuthorization = async () => { - const userSession = cookies().get('user-session') - const userAddress = cookies().get('user-address') + const userSession = cookies().get('user-session'); + const userAddress = cookies().get('user-address'); const res = await fetch(`${apiUrl()}/auth/verify-token`, { method: 'POST', body: JSON.stringify({ @@ -11,10 +11,10 @@ const CheckAuthorization = async () => { }), credentials: 'include', headers: { 'Content-Type': 'application/json' }, - }) - const resData = await res.json() + }); + const resData = await res.json(); const isAuthorized = - !!userAddress?.value && !!userSession?.value && resData.data + !!userAddress?.value && !!userSession?.value && resData.data; return isAuthorized; }; diff --git a/packages/app/components/misc/SignInUserButton.tsx b/packages/app/components/misc/SignInUserButton.tsx index 44197f5a3..08410f4ec 100644 --- a/packages/app/components/misc/SignInUserButton.tsx +++ b/packages/app/components/misc/SignInUserButton.tsx @@ -1,10 +1,10 @@ -'use client' -import { Button } from '@/components/ui/button' -import { useLogin, useLogout, usePrivy } from '@privy-io/react-auth' -import { deleteSession, storeSession } from '@/lib/actions/auth' -import { apiUrl } from '@/lib/utils/utils' -import { Loader2 } from 'lucide-react' -import React, { useEffect, useState } from 'react' +'use client'; +import { Button } from '@/components/ui/button'; +import { useLogin, useLogout, usePrivy } from '@privy-io/react-auth'; +import { deleteSession, storeSession } from '@/lib/actions/auth'; +import { apiUrl } from '@/lib/utils/utils'; +import { Loader2 } from 'lucide-react'; +import React, { useEffect, useState } from 'react'; interface SignInUserButtonProps { className?: string; @@ -18,19 +18,10 @@ export const SignInUserButton = ({ const { ready, authenticated } = usePrivy(); const [isLoading, setIsLoading] = useState(false); - const privyRefreshToken = localStorage.getItem( - 'privy:refresh_token' - ) + const privyRefreshToken = localStorage.getItem('privy:refresh_token'); const parsePrivyRefreshToken = privyRefreshToken ? JSON.parse(privyRefreshToken) - : null - - const privyRefreshToken = localStorage.getItem( - 'privy:refresh_token' - ) - const parsePrivyRefreshToken = privyRefreshToken - ? JSON.parse(privyRefreshToken) - : null + : null; const getSession = async () => { const privyToken = localStorage.getItem('privy:token'); @@ -51,14 +42,14 @@ export const SignInUserButton = ({ }; useEffect(() => { - if (!parsePrivyRefreshToken) logout() + if (!parsePrivyRefreshToken) logout(); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [parsePrivyRefreshToken]) + }, [parsePrivyRefreshToken]); useEffect(() => { - if (!parsePrivyRefreshToken) logout() + if (!parsePrivyRefreshToken) logout(); // eslint-disable-next-line react-hooks/exhaustive-deps - }, [parsePrivyRefreshToken]) + }, [parsePrivyRefreshToken]); const { login } = useLogin({ onComplete: () => {