fix: refresh token not working

Author: Dun-sin

app/api/auth/refreshToken/route.ts

@@ -1,14 +1,15 @@
 import axios, { AxiosError } from 'axios';
 
 import { NextResponse } from 'next/server';
+import { decrypt, encrypt } from '@/app/lib/utils';
 import { getUser } from '@/app/lib/spotify';
 
 const client_id = process.env.SPOTIFY_CLIENT_ID;
 const client_secret = process.env.SPOTIFY_CLIENT_SECRET;
 
 export async function POST(req: Request) {
 	const res = await req.json();
-	const refreshToken = res.refresh_token;
+	const refreshToken = decrypt(res.refresh_token);
 
 	if (!refreshToken) {
 		return NextResponse.json({ error: 'Invalid request' }, { status: 400 });
@@ -37,7 +38,7 @@ export async function POST(req: Request) {
 		const { access_token, refresh_token, expires_in } = response.data;
 		const user = await getUser(access_token);
 		return NextResponse.json(
-			{ expires_in, refresh_token, access_token, user },
+			{ expires_in, refresh_token: encrypt(refresh_token), access_token, user },
 			{ status: 200 },
 		);
 	} catch (error) {

app/api/auth/route.ts

@@ -1,6 +1,7 @@
 import axios, { AxiosError } from "axios";
 
 import { NextResponse } from "next/server";
+import { encrypt } from '@/app/lib/utils';
 import { getUser } from '@/app/lib/spotify';
 import prisma from '@/app/lib/prisma';
 
@@ -66,7 +67,7 @@ export async function POST(req: Request) {
 		}
 
 		return NextResponse.json(
-			{ expires_in, refresh_token, access_token, user },
+			{ expires_in, refresh_token: encrypt(refresh_token), access_token, user },
 			{ status: 200 },
 		);
 	} catch (error) {

app/components/ConnectSpotify/index.tsx

@@ -1,7 +1,6 @@
 'use client';
 
 import axios, { AxiosResponse } from 'axios';
-import { decrypt, encrypt } from '@/app/lib/utils';
 import { useEffect, useRef, useState } from 'react';
 import { usePathname, useRouter, useSearchParams } from 'next/navigation';
 
@@ -80,32 +79,30 @@ const ConnectSpotify = ({ authUrl }: { authUrl: string }) => {
 
     try {
       if (getRefreshToken) {
-        const refreshtoken = decrypt(getRefreshToken);
-
-        if (!refreshtoken || refreshtoken === '') {
-          authInProgress(false);
-          return;
-        }
-
         const response = await axios.post('/api/auth/refreshToken', {
-          refresh_token: refreshtoken,
+          refresh_token: getRefreshToken,
         });
         processResponse(response);
       } else {
         authInProgress(false);
       }
     } catch (error) {
-      throw Error(error as string);
+      console.error('Failed to refresh Spotify access token', error);
+      authInProgress(false);
     }
   }
 
-  function storeToLocalStore(expires_in: number, refresh_token: string) {
+  function storeToLocalStore(expires_in: number, refresh_token: string, access_token: string) {
     setExpires(expires_in);
 
     const currentTime = Date.now();
     localStorage.setItem('expires', currentTime + expires_in * 1000 + '');
+    if (access_token) {
+      localStorage.setItem('access_token', access_token);
+    }
     if (refresh_token === '' || !refresh_token) return;
-    localStorage.setItem('refresh_token', encrypt(refresh_token));
+    // refresh_token is already encrypted by the server
+    localStorage.setItem('refresh_token', refresh_token);
   }
 
   function setToSpotifyAPI(
@@ -118,7 +115,7 @@ const ConnectSpotify = ({ authUrl }: { authUrl: string }) => {
     spotifyApi.setAccessToken(access_token);
     spotifyApi.setRefreshToken(refresh_token);
 
-    storeToLocalStore(expires_in, refresh_token);
+    storeToLocalStore(expires_in, refresh_token, access_token);
   }
 
   function processResponse(response: AxiosResponse<any, any>) {

app/lib/utils.ts

@@ -8,7 +8,7 @@ const API_KEY = process.env.NEXT_PUBLIC_API_KEY;
 const genAI = new GoogleGenerativeAI(API_KEY as string);
 const model = genAI.getGenerativeModel({ model: 'gemini-2.5-flash' });
 
-const key = process.env.secretKey as string;
+const key = process.env.SECRET_KEY as string;
 
 export const encrypt = (text: string): string => {
 	return crypto.AES.encrypt(text, key).toString();

next.config.mjs

@@ -1,9 +1,6 @@
 const isProd = process.env.NODE_ENV === 'production'
 
 const nextConfig = {
-  env: {
-    secretKey: process.env.SECRET_KEY,
-  },
   images: {
     domains: ['i.scdn.co'],
   },