[SOLVED] No api key found - despite having api key in params

I'm trying to create twitter authentication with supabase. I

console.log

console.log

both of the

.env

.env

params and they did show up. So i'm not sure why I'm getting the error

{"message":"No API key found in request","hint":"No

{"message":"No API key found in request","hint":"No

{"message":"No API key found in request","hint":"No

{"message":"No API key found in request","hint":"No apikey

 request header or url param was found."}

request header or url param was found."}

 request header or url param was found."}

request header or url param was found."} when I try to authenticate with Twitter.

.env

NEXT_PUBLIC_SUPABASE_URL="supabaseurl"
NEXT_PUBLIC_SUPABASE_ANON_KEY = "anonkey"

NEXT_PUBLIC_SUPABASE_URL="supabaseurl"
NEXT_PUBLIC_SUPABASE_ANON_KEY = "anonkey"

NEXT_PUBLIC_SUPABASE_URL="supabaseurl"
NEXT_PUBLIC_SUPABASE_ANON_KEY = "anonkey"

NEXT_PUBLIC_SUPABASE_URL="supabaseurl"
NEXT_PUBLIC_SUPABASE_ANON_KEY = "anonkey"

index.js

import supabaseClient from "../utils/supabaseClient.js"
export default function Home(props) {
  async function signInWithTwitter() {
    const supabase = supabaseClient()
    console.log(supabase)
    console.log(process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY)
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'twitter',
    })
    console.log(data, error)
  }
return (<TwitterButton/>)

import supabaseClient from "../utils/supabaseClient.js"
export default function Home(props) {
  async function signInWithTwitter() {
    const supabase = supabaseClient()
    console.log(supabase)
    console.log(process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY)
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'twitter',
    })
    console.log(data, error)
  }
return (<TwitterButton/>)

import supabaseClient from "../utils/supabaseClient.js"
export default function Home(props) {
  async function signInWithTwitter() {
    const supabase = supabaseClient()
    console.log(supabase)
    console.log(process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY)
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'twitter',
    })
    console.log(data, error)
  }
return (<TwitterButton/>)

import supabaseClient from "../utils/supabaseClient.js"
export default function Home(props) {
  async function signInWithTwitter() {
    const supabase = supabaseClient()
    console.log(supabase)
    console.log(process.env.NEXT_PUBLIC_SUPABASE_URL, process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY)
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'twitter',
    })
    console.log(data, error)
  }
return (<TwitterButton/>)

utils/supabaseClient.js

import {createClient} from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
console.log("something", supabaseUrl, supabaseAnonKey)
// const supabase = createClient(supabaseUrl, supabaseAnonKey); 

export default function supabaseClient() {
    return createClient(supabaseUrl, supabaseAnonKey); 
}

import {createClient} from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
console.log("something", supabaseUrl, supabaseAnonKey)
// const supabase = createClient(supabaseUrl, supabaseAnonKey); 

export default function supabaseClient() {
    return createClient(supabaseUrl, supabaseAnonKey); 
}

import {createClient} from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
console.log("something", supabaseUrl, supabaseAnonKey)
// const supabase = createClient(supabaseUrl, supabaseAnonKey); 

export default function supabaseClient() {
    return createClient(supabaseUrl, supabaseAnonKey); 
}

import {createClient} from "@supabase/supabase-js"

const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL;
const supabaseAnonKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY;
console.log("something", supabaseUrl, supabaseAnonKey)
// const supabase = createClient(supabaseUrl, supabaseAnonKey); 

export default function supabaseClient() {
    return createClient(supabaseUrl, supabaseAnonKey); 
}

jdgamble555•10/28/22, 3:25 AM

did you add your twitter api key to supabase in your project settings ? - https://supabase.com/docs/guides/auth/auth-twitter

Add Twitter OAuth to your Supabase project

Jjdgamble555 did you add your twitter api key to supabase in your project settings ? - https:...

AskarOP•10/28/22, 3:30 AM

beautiful catch. thank you

AskarOP•10/28/22, 3:24 PM

@jdgamble555 any knowledge on how to capture the data with the verification? everytime i try to console log the data from the signin function, its gone?

jdgamble555•10/28/22, 3:45 PM

are you using v2?

Jjdgamble555 are you using v2?

AskarOP•10/28/22, 3:46 PM

i believe so

jdgamble555•10/28/22, 3:47 PM

it should await the login in v2 if you use await... double check

Jjdgamble555 it should await the login in v2 if you use await... double check

AskarOP•10/28/22, 3:48 PM

i do, but the problem is after it signs in and redirects, isnt the state data lost?

jdgamble555•10/28/22, 3:49 PM

I believe it awaits now... try it out first please

AskarOP•10/28/22, 3:51 PM

i am

Jjdgamble555 I believe it awaits now... try it out first please

AskarOP•10/28/22, 3:52 PM

const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'twitter',
    })
    console.log(data)

const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'twitter',
    })
    console.log(data)

like this no?

garyaustin•10/28/22, 4:05 PM

There really is no useful data returned from the call is my understanding. It relies on the redirect (default site URL) from the 3rd party provider for the next step.

jdgamble555•10/28/22, 4:06 PM

So basically getUser() immediately after?

garyaustin•10/28/22, 4:07 PM

This is the end of the signInWithOAuth code:

const url: string = this._getUrlForProvider(provider, {
      redirectTo: options.redirectTo,
      scopes: options.scopes,
      queryParams: options.queryParams,
    })
    // try to open on the browser
    if (isBrowser()) {
      window.location.href = url
    }
    return { data: { provider, url }, error: null }
  }

const url: string = this._getUrlForProvider(provider, {
      redirectTo: options.redirectTo,
      scopes: options.scopes,
      queryParams: options.queryParams,
    })
    // try to open on the browser
    if (isBrowser()) {
      window.location.href = url
    }
    return { data: { provider, url }, error: null }
  }

So goes to the provider URL, not sure it ever gets to the return...

ven•10/28/22, 4:12 PM

yes. there is no useful data or error returned from a provider signup/login

jdgamble555•10/28/22, 4:12 PM

if you run getUser right after, I wonder if it would work... I can't test it right now

garyaustin•10/28/22, 4:13 PM

I don't think it returns at all. The browser URL is changed to the auth provider url.

jdgamble555•10/28/22, 4:16 PM

so then onAuthStateChange is the only way

garyaustin•10/28/22, 4:17 PM

Yes or getSession in the return page startup path.

jdgamble555•10/28/22, 4:17 PM

the return page has to be root page though, correct?

garyaustin•10/28/22, 4:22 PM

I would think any page you redirect to could do getSession, guess it depends on the code setup.

Ggaryaustin I would think any page you redirect to could do getSession, guess it depends on ...

AskarOP•10/28/22, 4:42 PM

but why that when i redirect to the same page and i getSession, its still undefined

AskarOP•10/28/22, 4:42 PM

import {useEffect, useState} from "react"
import supabaseClient from "../utils/supabaseClient.js"
export default function Home(props) {
  const [name, setName] = useState("Verify Twitter")
  const [session, setSession] = useState(null);
  const supabase = supabaseClient()
  async function signInWithTwitter() {
    console.log(supabase)
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'twitter',
    })
    console.log(data)
    const { data: { sessionData } } = await supabase.auth.getSession();
    console.log(sessionData)
  }
  useEffect(() => {
    async function doSession() {
      const { data: { sessionData } } = await supabase.auth.getSession();
      setSession(sessionData)
      console.log(sessionData)
      supabase.auth.onAuthStateChange((_event, sessionData) => {
        console.log(sessionData)
        setSession(sessionData);
      });
    }
    doSession()
  }, []);

import {useEffect, useState} from "react"
import supabaseClient from "../utils/supabaseClient.js"
export default function Home(props) {
  const [name, setName] = useState("Verify Twitter")
  const [session, setSession] = useState(null);
  const supabase = supabaseClient()
  async function signInWithTwitter() {
    console.log(supabase)
    const { data, error } = await supabase.auth.signInWithOAuth({
      provider: 'twitter',
    })
    console.log(data)
    const { data: { sessionData } } = await supabase.auth.getSession();
    console.log(sessionData)
  }
  useEffect(() => {
    async function doSession() {
      const { data: { sessionData } } = await supabase.auth.getSession();
      setSession(sessionData)
      console.log(sessionData)
      supabase.auth.onAuthStateChange((_event, sessionData) => {
        console.log(sessionData)
        setSession(sessionData);
      });
    }
    doSession()
  }, []);

AskarOP•10/28/22, 4:42 PM

like this doesn't ever print the session

garyaustin•10/28/22, 4:47 PM

I'm not familiar with react enough to tell what might be happening. Normally when the redirect happens, supabase-js knows there is a signin token from the redirect URL parameters and getSession will wait for things to get processed. If it is returning null then for some reason it is not getting the token when your code is run. You could put the onAuthChangeEvent handler in and see when/if the events are occurring.

This also presumes all this code is running on the browser.

Ggaryaustin I'm not familiar with react enough to tell what might be happening. Normally wh...

AskarOP•10/28/22, 5:18 PM

but if the redirect goes back to the same page, shouldn't the getSession catch it? also why doesnt onAuthStateChange handle the change

garyaustin•10/28/22, 5:26 PM

Both methods should work as I understand it.

Ggaryaustin Both methods should work as I understand it.

AskarOP•10/28/22, 5:33 PM

hmm yeah, currently not working for me

AskarOP•10/28/22, 5:33 PM

seems like it console logs undefined

[SOLVED] No api key found - despite having api key in params

Similar Threads

Similar Threads

Similar Threads