AuthUi Email Login not working

so im setting up a next.js with supabase web app and im having an issue with the email login. I successfully setup google logins and even sign ups but the login part just gives me this error in the OPTIONS and post request response.
message "No API key found in request"
hint "No apikey request header or url param was found."
this is my authform
'use client'
import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'

export default function AuthForm() {
  return (
    <Auth
      supabaseClient={supabase}
      providers={["google"]}
      view="sign_in"
      redirectTo="/auth/callback"
      showLinks={false}
      appearance={{ theme: ThemeSupa }}
      theme="dark"
    />
  )
}

this is my login page
'use client'
import styles from '../page.module.css'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { useRouter } from 'next/navigation'
import {Container, Row, Button, Col} from 'react-bootstrap'
import AuthLogin from '../auth-login.js'

export default function Login() {
  const router = useRouter()
  const supabase = createClientComponentClient()

  return (
  <>
    <Container>
    <div className={styles.main}>
      <Row>
        <div className={styles.login_card}> 
        <h3> Login </h3>
        <Col>
          <AuthLogin />
          <Button href="/forgot-password" variant='link'> Forgot Password </Button><br/>
          <Button href="/" variant='link'> Back </Button>
        </Col>
        </div>
      </Row>
    </div>
    </Container>
  </>
  )
}

my env.local names are
NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
Was this page helpful?