signOut not deleting cookie

[gomflo]

Bug report

Describe the bug

supabase.auth.signOut() is not deleting the cookie created by setAuthCookie

// /api/login.js

import { supabase } from '@/utils/initSupabase'

export default function handler(req, res) {
  supabase.auth.api.setAuthCookie(req, res)
}

// logout.js

import { supabase } from '@/utils/initSupabase'
import { useRouter } from 'next/router'
import { useEffect } from 'react'

export default function Logout() {
  const router = useRouter()

  useEffect(() => {
    async function initialize() {
      await supabase.auth.signOut()
      router.push('/login')
    }
    initialize()
  })
  return <></>
}

[kiwicopple]

Thanks @gomflo - I'm shifting this to gotrue-js so we can solve it asap 👍

[gomflo]

thanks, the workaround i end up doing was using supabase.auth.onAuthStateChange

// logout.js
await supabase.auth.signOut() // <= this trigger onAuthStateChange
const { data: authListener } = supabase.auth.onAuthStateChange(
      async (event, session) => {
        const body = JSON.stringify({ event, session })
        const headers = new Headers({ 'Content-Type': 'application/json' })

        await fetch('/api/login', {
          method: 'post',
          body,
          headers,
          credentials: 'same-origin',
        })
      }
    )
    return () => {
      authListener.unsubscribe()
    }

this way the cookie gets deleted

[kiwicopple]

From a cursory look at our implementation, we have a listener on sign out:
https://github.com/supabase/gotrue-js/blob/8b61cc39df22cf9e1d546df7e1d06e9b27c51556/src/GoTrueApi.ts#L217

So we should verify the reason why it isn't working here. I'm guessing this can be replicated in our Nextjs example
https://github.com/supabase/gotrue-js/blob/master/example/next/README.md

[mrkldshv]

@kiwicopple Actually, I was able to reproduce it trying to sign out on any SSRed page. Not sure if that can be the reason, but maybe that's something we should look into.
@gomflo Is the page you trying sing out on using SSR?

[gomflo]

@gomflo Is the page you trying sing out on using SSR?

I have a page named logout.js:

And from any page i have the following tag to logout:

<a href="/logout">Logout</a>

Thats my login.js page using magic link to sign in

const onSubmit = async ({ email }) => {
  const { error } = await supabase.auth.signIn({ email })
 }

Then when te user click the magic link i have the following page loginValidate.js

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import { supabase } from '@/utils/initSupabase'

export default function LoginValidate() {
  const router = useRouter()

  useEffect(() => {
    const { data: authListener } = supabase.auth.onAuthStateChange(
      async (event, session) => {
        const body = JSON.stringify({ event, session })

        await fetch('/api/login', {
          method: 'post',
          headers: new Headers({ 'Content-Type': 'application/json' }),
          credentials: 'same-origin',
          body
        })

        router.push('/dashboard')
      }
    )

    return () => {
      authListener.unsubscribe()
    }
  }, [])

  return <></>
}

Finally my /api/login.js file

import { supabase } from '@/utils/initSupabase'

export default function handler(req, res) {
  supabase.auth.api.setAuthCookie(req, res)
}

[mrkldshv]

@gomflo Thanks for posted example! I tried it and it failed for me as well. Any guesses @kiwicopple?

[kiwicopple]

I've modified the Next.js example on this branch: #56

As far as I can tell everything is working well.

Screen.Recording.2021-02-15.at.1.35.32.PM.mov

I'll have to dig into your particular implementation @gomflo and see what the differences are

[tanshunyuan]

I am facing the same issue when trying to logout from a SSR page, the cookies isn't cleared. But I think I found a solution, that is to make a api call when signing out to remove the cookie that is created from setAuthCookie.
Here I am using nookies to remove the cookie

On the client-side, when clicking signOut it is calling /api/signout that will destroy the cookies generated from SSR

[phamhieu]

I am facing the same issue when trying to logout from a SSR page, the cookies isn't cleared.

maybe related to #73
@tanshunyuan Can you confirm if you are using the latest supabase client version?

[tanshunyuan]

Hi @phamhieu, currently I am using version ^1.11.6

[Ali-Parandeh]

Having similar issues as well. I have implemented a signout button in the SSR page calling logout.js api. Sometimes it appears to be working and other times it redirects to the homepage on the sign out only to redirect back to the dashboard page (SSR protected).

logout.ts

import {supabase} from 'libs/initSupabase'

export default async function logoutUser(req, res) {
  const {error} = await supabase.auth.signOut()
  if (error) return res.status(401).json({error: error.message})
  return res.status(200).json({body: 'User has been logged out'})
}

dashboard.tsx

import {CoreProgrammesSection} from '../components/CoreProgrammesSection'
import {DashboardLayout} from '../components/DashboardLayout'
import {DashboardNavBar} from '../components/DashboardNavBar'
import {FeaturedProgrammesSection} from '../components/FeaturedProgrammesSection'
import {NewLessonsSection} from '../components/NewLessonsSection'
import {basePath} from '../utils/siteConfig'

export async function getServerSideProps() {
  const {user} = await fetch(`${basePath}/api/getUser`).then(response =>
    response.json(),
  )

  if (!user) {
    return {
      redirect: {destination: '/', permanent: false},
    }
  }
  // We'll pass the returned `user` to the page's React Component as a prop
  return {props: {user}}
}

export default function Dashboard({user}) {
  return (
    <DashboardLayout user={user}>
      <main className="overflow-y-auto relative z-0 flex-1 focus:outline-none">
        <DashboardNavBar />
        <FeaturedProgrammesSection />
        <CoreProgrammesSection />
        <NewLessonsSection />
      </main>
    </DashboardLayout>
  )
}

dashboardLayout.ts

...

export function DashboardLayout({children, user}) {
  const router = useRouter()
  const [isAuthed, setAuthStatus] = useState(false)

  useEffect(() => {
    if (user) setAuthStatus(true)
  }, [])

  const signOutUser = () => {
    const ElementInterval = setInterval(async () => {
      /* Tracking or other request code goes here */
      const res = await fetch(`/api/logout`)
      if (res.status === 200) setAuthStatus(false)
      // redirect to homepage when logging out users
      if (window.location.href !== '/') await router.push('/')
      clearInterval(ElementInterval)
    }, 50)
  }

  return (
    <div className="flex overflow-hidden h-screen bg-gray-100">
      <MobileSideBar
        router={router}
        sideBarLinks={sideBarLinks}
        signOutUser={signOutUser}
      />
      <DesktopSideBar
        router={router}
        sideBarLinks={sideBarLinks}
        signOutUser={signOutUser}
      />
 ...
  )
}

DesktopSideBar.tsx

....

export function DesktopSideBar({router, sideBarLinks, signOutUser}) {
  return (
....
          <div className="flex flex-shrink-0 py-4 px-6 border-t border-gray-200">
            <div className="w-full text-sm rounded-md text-darkRose hover:bg-soorati group-hover:text-darkRose">
              <button
                className="flex gap-3 justify-center items-center py-3 px-6 pl-0 w-full"
                onClick={signOutUser}
              >
                <HiOutlineLogout className="w-6 h-6" />
                <span className="font-semibold">Logout</span>
              </button>
            </div>
          </div>
....
  )
}

app.js

import '../styles/globals.css'

function MyApp({Component, pageProps}) {
  return <Component {...pageProps} />
}

export default MyApp

[phamhieu]

After checking the code on gotrue-js for cookie handler, I can confirm that this' a manually process.

It requires manually calling to supabase.auth.api.setAuthCookie(req, res) on signIn/signOut to set/remove cookie
OR you can set/remove cookie manually using any cookie helper package like nookies...

on next-js example, it uses onAuthStateChange subscription to support these manually calls.

// subscription 
supabase.auth.onAuthStateChange(
  async (event, supabaseAuthSession) => {
    await postData('/api/auth', {
      event,
      session: supabaseAuthSession,
    })
  }
)

// /api/auth just triggers setAuthCookie
export default function handler(req, res) {
  supabase.auth.api.setAuthCookie(req, res)
}

@tanshunyuan It's fine to use nookies to remove the cookie manually on signOut. But I wonder how do you set the cookie on signIn?

@Ali-Parandeh On your signOut api, you didn't remove the cookie. May i how do you set the cookie on signIn?

[phamhieu]

From a cursory look at our implementation, we have a listener on sign out:
https://github.com/supabase/gotrue-js/blob/8b61cc39df22cf9e1d546df7e1d06e9b27c51556/src/GoTrueApi.ts#L217

So we should verify the reason why it isn't working here. I'm guessing this can be replicated in our Nextjs example
https://github.com/supabase/gotrue-js/blob/master/example/next/README.md

setAuthCookie, itself doesn't listen to any event. It acts as a helper method that processes req.body parameters

In next-js example we use supabase.auth.onAuthStateChange to send request to /api/auth which then call supabase.auth.api.setAuthCookie(req, res)