Deployed code redirecting me to localhost:3000 when I click Log Out

[Genebson]

Hey 👋,

I have a nextjs application that works absolutely fine locally - However, now I've deployed it to AWS Amplify when I Log Out with my user it redirects me to localhost:3000. I've set my NEXTAUTH_URL environment variable to mydomain.com but it doesn't work. What I'm missing?

This is my next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  i18n: {
    locales: ["en"],
    defaultLocale: "en",
  },
  images: {
    domains: [
      "localhost",
      "backend-develop.s3.amazonaws.com",
      "backend-local.s3.amazonaws.com",
    ],
  },
};

module.exports = nextConfig;

And the component that has the sign out function:

import { signOut } from 'next-auth/react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import React from 'react'
import { SidebarBoxWrapper } from './styles'

const AccountSidebar = () => {

    const router = useRouter();

    return (
        <SidebarBoxWrapper>
            <ul>
                <li>
                    <Link href="/account/profile">
                        <a className={router.asPath == '/account/profile' ? 'Active' : ''}>
                            <i className='icon-user'></i>
                            <span>Profile info</span>
                        </a>
                    </Link>
                </li>
                <li>
                    <Link href="/account/payment-methods">
                        <a className={router.asPath == '/account/payment-methods' ? 'Active' : ''}>
                            <i className='icon-credit-card'></i>
                            <span>Payment methods</span>
                        </a>
                    </Link>
                </li>
                <li>
                    <Link href="/account/bookings">
                        <a className={router.asPath == '/account/bookings' ? 'Active' : ''}>
                            <i className='icon-bookmark'></i>
                            <span>Bookings</span>
                        </a>
                    </Link>
                </li>
            </ul>
            <p className='Help'>
                Need help?
                <Link href="/contact">
                    <a>Contact us</a>
                </Link>
            </p>
            <div className='Logout' onClick={() => signOut()}>Log out</div>
        </SidebarBoxWrapper>
    )
}

export default AccountSidebar

Any help is appreciated it,

Thank you.

[ggderas]

Did you figure this out?

[domkoder]

@Genebson and @ggderas any luck with this I'm currently facing the same issue