Supabase•3y ago

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

I'm trying to create twitter authentication with supabase. I console.log both of the .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 apikey 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"

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/>)

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); 
}

23 Replies

jdgamble555•3y ago

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

AskarOP•3y ago

beautiful catch. thank you @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•3y ago

are you using v2?

AskarOP•3y ago

i believe so

jdgamble555•3y ago

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

AskarOP•3y ago

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

jdgamble555•3y ago

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

AskarOP•3y ago

i am

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•3y ago

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•3y ago

So basically getUser() immediately after?

garyaustin•3y ago

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•3y ago

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

jdgamble555•3y ago

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

garyaustin•3y ago

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

jdgamble555•3y ago

so then onAuthStateChange is the only way

garyaustin•3y ago

Yes or getSession in the return page startup path.

jdgamble555•3y ago

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

garyaustin•3y ago

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

AskarOP•3y ago

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

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()
  }, []);

like this doesn't ever print the session

garyaustin•3y ago

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.

AskarOP•3y ago

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

garyaustin•3y ago

Both methods should work as I understand it.

AskarOP•3y ago

hmm yeah, currently not working for me seems like it console logs undefined

Gaming

Programming

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

Did you find this page helpful?