feat: extract auth logic to service

Refactored the authentication logic from SpotifyDisplay.tsx into a dedicated authService.ts. This improves code organization and reusability by centralizing the sign-in and sign-out functionality.

- Created services/authService.ts with login and logout functions.
- Updated SpotifyDisplay.tsx to use the new authService.

Author: google-labs-jules[bot]

components/SpotifyDisplay.tsx

@@ -17,8 +17,9 @@ import Menu from '@mui/material/Menu'
 import MenuItem from '@mui/material/MenuItem'
 import Slider from '@mui/material/Slider'
 import Typography from '@mui/material/Typography'
-import { signIn, signOut, useSession } from 'next-auth/react'
+import { useSession } from 'next-auth/react'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { login, logout } from '@/services/authService'
 
 interface SpotifyDevice {
   id: string
@@ -171,11 +172,11 @@ const SpotifyDisplay = () => {
   }
 
   const handleSpotifyLogin = () => {
-    signIn('spotify', { callbackUrl: '/' })
+    login()
   }
 
   const handleSpotifyLogout = () => {
-    signOut({ callbackUrl: '/' })
+    logout()
   }
 
   if (!spotifyLoggedIn) {

services/authService.ts

@@ -0,0 +1,10 @@
+// services/authService.ts
+import { signIn, signOut } from 'next-auth/react';
+
+export const login = () => {
+  signIn('spotify', { callbackUrl: '/' });
+};
+
+export const logout = () => {
+  signOut({ callbackUrl: '/' });
+};