#Creating a Logout Component in React

21 messages · Page 1 of 1 (latest)

shrewd tinselBOT
#

it is a client component where i'm trying to perform the logout, yeah:

'use client'

import { useEffect } from 'react'

export default function Logout() {
  useEffect(() => {
    const logout = async () => {
      const res = await fetch('/api/users/logout', {
        method: 'POST',
        credentials: 'include', //don't know if i need this
        headers: {
          'Content-Type': 'application/json',
        },
      })
      console.log(res)

      if (res.ok) {
        console.log('logged u out')
      } else {
        console.log('broke')
      }
    }

    logout()
  }, [])

  return (
    <div>
      <h1>Logout</h1>
      <button onClick={() => {}}>Logout</button>
    </div>
  )
}
still cobaltBOT
#

Original message from @tardy niche - Moved from #archive_v3-feedback message

#
New Community-Help Thread Created!

Help is on the way! To mark it as solved, use the /solve command. In the meantime, here are some existing threads that may help you:

Documentation:

Community-Help:

neat gust
#

what happens if you try to fetch /me

#

also, what does your users collection look like

tardy niche
#

hmm.. unexpected end of json output for /me. here's users:

import type { CollectionConfig } from 'payload/types'

export const Users: CollectionConfig = {
  slug: 'users',
  admin: {
    useAsTitle: 'email',
  },
  auth: {
    verify: true,
  },
  fields: [
    // Email added by default
    // Add more fields as needed
  ],
}
neat gust
tardy niche
#

yes, that's the route i hit, i was just abbreviating 👍

neat gust
#

unexpected end of json would indicate an error with your API. Payload is running ok?

tardy niche
#

yeah! it's reading all my other collections fine

neat gust
#

is Logout() a route?

tardy niche
#

it's a page

#

(app)/auth/logout

neat gust
#

I didn't think you could use 'use client' on a page, I thought you had to use a client component that got imported in the server component

tardy niche
#

yeah maybe that's my mistake.... i'll check right now

#

still getting an error, but the message changes. APIError: no user, along with an unexpected end of JSON input. but i log in on another page right before visitng the logout page, and on the login page it confirms i'm logged in and it works

neat gust
#

is the cookie present in the application tab when you're on the logout route?

tardy niche
#

yes indeed

image.png
tardy niche
#

sry to spam i think i figured it out!

used next/headers to set the cookie myself in the login server action. i think this one ^^ fooled me bc it was an old token from the admin panel.

ie this was in my server action and the logout route picks it up and deletes the cookie:

import { cookies } from 'next/headers'

//this gets called on login
export async function authenticate(formData: FormData) {
  const email = formData.get('email') as string
  const password = formData.get('password') as string
  try {
    const payload = await getPayloadHMR({
      config: configPromise,
    })
    const result = await payload.login({
      collection: 'users',
      data: {
        email: email,
        password: password,
      },
    })
    if (result.token) {
      cookies().set({
        name: 'payload-token',
        value: result.token,
        path: '/',
        httpOnly: true,
        secure: true,
        sameSite: 'strict',
      })
    } else {
      throw new Error('Token is undefined')
    }
    return result
catch // ...etc
past lantern
#

@tardy niche I am facing the same issue, I set the cookie but even sending the post request to /api/users/logout doesnt logout, did you resolve your issue?

dull oriole
#

I'm having a similar issue with /logout not killing the payload-token cookie created by /api/users/login.