Now that the app folder is stable I want to play with the new toys I upgraded supabase and next, and created a new login page straight from the supabase docs to get login working. But whenever I try to log inn I get an error stating "400 bad request". I've added the middleware.js file recommended in the docs, but it shouldn't matter in client components. Any ideas what I'm doing wrong? can provide any other code too. This runs in the app-folder https://pastebin.com/VMuM9001 I guess I don't have an auth provider file in my app folder, does the middleware file do this for you? 🤔 Found no auth providers in https://supabase.com/docs/guides/auth/auth-helpers/nextjs

Please paste all code inline here using tripple backticks ` and the language abbreviation (js).

Sorry 😅, will do in the future.

js
'use client'

import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { useRouter } from 'next/navigation'
import { useState } from 'react'

import type { Database } from '../../lib/supabase.types'
export default function Login() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const router = useRouter()
  const supabase = createClientComponentClient<Database>()


  const handleSignIn = async () => {
    await supabase.auth.signInWithPassword({
      email,
      password,
    })
    router.refresh()
  }

  const getUser = async () => {
    const { data, error } = await supabase.auth.getSession()
    console.log("Data er", data)
    return data
  }
  console.log("supabase user is", getUser())
  return (
    <>
      <input name="email" onChange={(e) => setEmail(e.target.value)} value={email} />
      <input
        type="password"
        name="password"
        onChange={(e) => setPassword(e.target.value)}
        value={password}
      />
      <button onClick={handleSignIn}>Sign in</button>
    </>
  )
}

middleware.js

js
import { createMiddlewareClient } from '@supabase/auth-helpers-nextjs'
import { NextResponse } from 'next/server'

import type { NextRequest } from 'next/server'
import type { Database } from './src/lib/supabase.types'

// https://supabase.com/docs/guides/auth/auth-helpers/nextjs

export async function middleware(req: NextRequest) {
  const res = NextResponse.next()
  const supabase = createMiddlewareClient<Database>({ req, res })
  await supabase.auth.getSession()
  return res
}

I'm assuming you already have a user signed up right?

yes multiple ones, tried two of them

Can you take a screenshot of the request in your browser console?

but again I don't have an auth provider filer for app-folder, it seems maybe I need that

That's your console, can you share the network tab and click on the request that is failing so I can see the response.

Click on the failing request so I can see the response

oooh it says invalid login creditials. This response tab is something I'm going to use more. Weird since my login is saved in my password manager and worked. Do I not need a context provider? Been trying to understand and read their code, something like this https://github.com/mryechkin/nextjs-supabase-auth/blob/v1/src/lib/auth.js Now I need to find out why my password isn't working, don't have any password reset functionality on the site yet but on it now.

Do note that project is using supabase-js v1 https://github.com/mryechkin/nextjs-supabase-auth/blob/v1/package.json#L14 which is now deprecated and no longer supported.

yes but it is refrenced in one of the top supabase app-folder tutorials on google, he just says to make some updates to make the file work https://www.misha.wtf/blog/supabase-auth-next-13

You can use a context provider if you wish, we haven't been opinionated about that as we feel it's the app developer's responsibility.

Thanks! Don't really see a need for one 🤷‍♀️ Supabase will tell me if I am logged inn and let me log out without it

I can tell you this tutorial is now outdated since we released the new auth-helpers just a day or two ago.

Thanks 😅

There is a repo here using the latest auth-helpers https://github.com/supabase/supabase/tree/master/examples/auth/nextjs

🙏 And the docs are up to date? especially this one https://supabase.com/docs/guides/auth/auth-helpers/nextjs

That is the most up to date doc on the latest auth-helpers. I'm currently updating the quickstart guide now to use the latest auth-helpers too.