⚡fixes #746 App takes you to login screen after being logged in for a…

… while (#817)

# 😵 Post-Mortem 😵
Fixes  #746
## Summary
Fixed a bug that takes users to the login screen after being logged in
for a while.

## Impact
- **Services Affected**:Authentication service, user session management
- **User Impact**: Users will no longer be unexpectedly logged out after
an hour of inactivity. This change improves user experience by extending
the session duration to 30 days.

## Root Cause Analysis
The Privy token was set to expire after an hour, causing users to be
redirected to the login screen to log in again after the token expired.

## Resolution and Recovery
Instead of using the auth token, we now use the Privy refresh token. The
Privy refresh token takes 30 days to expire, can only be used once, and
is refreshed with a new one upon use. This change ensures that users
remain logged in for up to 30 days without interruption.

## Lessons Learned
1. Ensure token expiration times are aligned with user session
expectations to avoid unexpected logouts.
2. Implement a refresh token strategy to extend session durations
securely.
3. Regularly review and update authentication and session management
strategies to enhance user experience and security

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;
 };

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,11 @@ 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 +41,16 @@ export const SignInUserButton = ({
     });
   };
 
+  useEffect(() => {
+    if (!parsePrivyRefreshToken) logout();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [parsePrivyRefreshToken]);
+
+  useEffect(() => {
+    if (!parsePrivyRefreshToken) logout();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [parsePrivyRefreshToken]);
+
   const { login } = useLogin({
     onComplete: () => {
       getSession();

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",