basic auth sign in

apps/client/pages/api/auth/[...nextauth].ts

@@ -1,4 +1,4 @@
-import NextAuth from 'next-auth'
+import NextAuth, { type SessionStrategy } from 'next-auth'
 import CredentialsProvider from 'next-auth/providers/credentials'
 import { z } from 'zod'
 import type { SharedType } from '@maybe-finance/shared'
@@ -23,6 +23,10 @@ export const authOptions = {
     pages: {
         signIn: '/login',
     },
+    session: {
+        strategy: 'jwt' as SessionStrategy,
+        maxAge: 14 * 24 * 60 * 60, // 30 Days
+    },
     providers: [
         CredentialsProvider({
             name: 'Credentials',

apps/client/pages/login.tsx

@@ -27,7 +27,7 @@ export default function LoginPage() {
         await signIn('credentials', {
             email,
             password,
-            callbackUrl: '/',
+            redirect: false,
         })
     }
 

libs/client/features/src/layout/MenuPopover.tsx

@@ -1,4 +1,4 @@
-import { useAuth0 } from '@auth0/auth0-react'
+import { signOut } from 'next-auth/react'
 import { Menu } from '@maybe-finance/design-system'
 import type { ComponentProps } from 'react'
 import {
@@ -16,8 +16,6 @@ export function MenuPopover({
     placement?: ComponentProps<typeof Menu.Item>['placement']
     isHeader: boolean
 }) {
-    const { logout } = useAuth0()
-
     return (
         <Menu>
             <Menu.Button variant="icon">{icon}</Menu.Button>
@@ -31,11 +29,7 @@ export function MenuPopover({
                 <Menu.ItemNextLink icon={<RiDatabase2Line />} href="/data-editor">
                     Fix my data
                 </Menu.ItemNextLink>
-                <Menu.Item
+                <Menu.Item icon={<LogoutIcon />} destructive={true} onClick={() => signOut()}>
-                    icon={<LogoutIcon />}
-                    destructive={true}
-                    onClick={() => logout({ logoutParams: { returnTo: window.location.origin } })}
-                >
                     Log out
                 </Menu.Item>
             </Menu.Items>

libs/client/features/src/onboarding/OnboardingGuard.tsx

@@ -3,7 +3,7 @@ import { MainContentOverlay, useUserApi } from '@maybe-finance/client/shared'
 import { LoadingSpinner } from '@maybe-finance/design-system'
 import { useRouter } from 'next/router'
 import type { SharedType } from '@maybe-finance/shared'
-import { useAuth0 } from '@auth0/auth0-react'
+import { signOut } from 'next-auth/react'
 
 function shouldRedirect(pathname: string, data?: SharedType.OnboardingResponse) {
     if (!data) return false
@@ -14,7 +14,6 @@ function shouldRedirect(pathname: string, data?: SharedType.OnboardingResponse)
 
 export function OnboardingGuard({ children }: PropsWithChildren) {
     const router = useRouter()
-    const { logout } = useAuth0()
     const { useOnboarding } = useUserApi()
     const onboarding = useOnboarding('main', {
         onSuccess(data) {
@@ -29,7 +28,7 @@ export function OnboardingGuard({ children }: PropsWithChildren) {
             <MainContentOverlay
                 title="Unable to load onboarding"
                 actionText="Logout"
-                onAction={() => logout({ logoutParams: { returnTo: window.location.origin } })}
+                onAction={() => signOut()}
             >
                 <p>Contact us if this issue persists.</p>
             </MainContentOverlay>

libs/client/features/src/onboarding/OnboardingNavbar.tsx

@@ -1,4 +1,4 @@
-import { useAuth0 } from '@auth0/auth0-react'
+import { signOut } from 'next-auth/react'
 import { ProfileCircle } from '@maybe-finance/client/shared'
 import { Button, Menu } from '@maybe-finance/design-system'
 import type { SharedType } from '@maybe-finance/shared'
@@ -15,8 +15,6 @@ type Props = {
 }
 
 export function OnboardingNavbar({ steps, currentStep, onBack }: Props) {
-    const { logout } = useAuth0()
-
     const groups = uniqBy(steps, 'group')
         .map((s) => s.group)
         .filter((g): g is string => g != null)
@@ -85,9 +83,7 @@ export function OnboardingNavbar({ steps, currentStep, onBack }: Props) {
                             <Menu.Item
                                 icon={<RiShutDownLine />}
                                 destructive={true}
-                                onClick={() =>
+                                onClick={() => signOut()}
-                                    logout({ logoutParams: { returnTo: window.location.origin } })
-                                }
                             >
                                 Log out
                             </Menu.Item>

libs/client/features/src/onboarding/steps/CountryWaitlist.tsx

@@ -2,16 +2,15 @@ import Link from 'next/link'
 import { useUserApi } from '@maybe-finance/client/shared'
 import { Button } from '@maybe-finance/design-system'
 import toast from 'react-hot-toast'
-import { useAuth0 } from '@auth0/auth0-react'
+import { signOut } from 'next-auth/react'
 
 export function CountryWaitlist({ country }: { country?: string }) {
-    const { logout } = useAuth0()
     const { useDelete } = useUserApi()
 
     const deleteUser = useDelete({
         onSuccess() {
             toast.success(`Account deleted`)
-            setTimeout(() => logout({ logoutParams: { returnTo: window.location.origin } }), 500)
+            setTimeout(() => signOut(), 500)
         },
         onError() {
             toast.error(`Error deleting account`)

libs/client/features/src/user-billing/SubscriberGuard.tsx

@@ -1,4 +1,4 @@
-import { useAuth0 } from '@auth0/auth0-react'
+import { signOut } from 'next-auth/react'
 import { MainContentOverlay, useUserApi } from '@maybe-finance/client/shared'
 import { LoadingSpinner } from '@maybe-finance/design-system'
 import type { SharedType } from '@maybe-finance/shared'
@@ -22,7 +22,6 @@ function shouldRedirect(path: string, data?: SharedType.UserSubscription) {
 
 export function SubscriberGuard({ children }: PropsWithChildren) {
     const router = useRouter()
-    const { logout } = useAuth0()
     const { useSubscription } = useUserApi()
     const subscription = useSubscription()
 
@@ -31,7 +30,7 @@ export function SubscriberGuard({ children }: PropsWithChildren) {
             <MainContentOverlay
                 title="Unable to load subscription"
                 actionText="Log out"
-                onAction={() => logout({ logoutParams: { returnTo: window.location.origin } })}
+                onAction={() => signOut()}
             >
                 <p>Contact us if this issue persists.</p>
             </MainContentOverlay>

libs/client/features/src/user-details/UserDetails.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Controller, useForm } from 'react-hook-form'
-import { useAuth0 } from '@auth0/auth0-react'
+import { signOut } from 'next-auth/react'
 import classNames from 'classnames'
 import { AiOutlineLoading3Quarters as LoadingIcon } from 'react-icons/ai'
 import {
@@ -30,7 +30,6 @@ import { DeleteUserButton } from './DeleteUserButton'
 import { DateTime } from 'luxon'
 
 export function UserDetails() {
-    const { logout } = useAuth0()
     const { useProfile, useAuth0Profile, useUpdateProfile } = useUserApi()
 
     const auth0ProfileQuery = useAuth0Profile()
@@ -101,9 +100,7 @@ export function UserDetails() {
                     Deleting your account is a permanent action. If you delete your account, you
                     will no longer be able to sign and all data will be deleted.
                 </p>
-                <DeleteUserButton
+                <DeleteUserButton onDelete={() => signOut()} />
-                    onDelete={() => logout({ logoutParams: { returnTo: window.location.origin } })}
-                />
             </section>
         </div>
     )