solid-orange•17mo ago

Login or Logout not working with create refine-app supabase preset

I made new project with npm create refine-app@latest -- --preset refine-antd-supabase my-supabase-app and login and logout is not working. In the console it shows the error "{ "message": "No API key found in request", "hint": "No apikey request header or url param was found." }" But I know the api key is correct as inferencer is also working. Any help is appreciated 🙂

7 Replies

kapa.ai•17mo ago

Hey @ahnaf1022! I'm the kapa.ai support bot. I've searched through the docs to try to answer your question. :wave:

kapa.ai•17mo ago

---------------------- It looks like you're having trouble getting the login and logout features to work with the refine-antd-supabase preset. First, make sure that you have added your Supabase URL and key to the supabaseClient.ts file, as described in the Customizable Issue Tracker with Refine and Supabase (https://refine.dev/blog/customizable-issue-tracker-with-refine-and-supabase/) blog post.

import { createClient } from "@refinedev/supabase";  
  
const SUPABASE_URL = "YOUR_SUPABASE_URL";  
const SUPABASE_KEY = "YOUR_SUPABASE_API_KEY";  
  
export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

import { createClient } from "@refinedev/supabase";  
  
const SUPABASE_URL = "YOUR_SUPABASE_URL";  
const SUPABASE_KEY = "YOUR_SUPABASE_API_KEY";  
  
export const supabaseClient = createClient(SUPABASE_URL, SUPABASE_KEY);

Then, make sure that you have added the authProvider and LoginPage props to the <Refine /> component in the App.tsx file, as described in the Simple Web Application Example with Refine (https://refine.dev/blog/simple-web-application-with-refine/) blog post.

import { Refine } from "@pankod/refine";  
import { dataProvider } from "@refinedev/supabase";  
import authProvider from "./authProvider";  
import { supabaseClient } from "utility";  
  
import "@pankod/refine/dist/styles.min.css";  
  
import { Login } from "./pages/login";  
  
function App() {  
 return (  
 <Refine  
 dataProvider={dataProvider(supabaseClient)}  
 authProvider={authProvider}  
 LoginPage={Login}  
 />  
 );  
}  
  
export default App;

import { Refine } from "@pankod/refine";  
import { dataProvider } from "@refinedev/supabase";  
import authProvider from "./authProvider";  
import { supabaseClient } from "utility";  
  
import "@pankod/refine/dist/styles.min.css";  
  
import { Login } from "./pages/login";  
  
function App() {  
 return (  
 <Refine  
 dataProvider={dataProvider(supabaseClient)}  
 authProvider={authProvider}  
 LoginPage={Login}  
 />  
 );  
}  
  
export default App;

Finally, if you are using the OTP authentication with Supabase and Twilio, make sure that you have imported the LoginPage component in the App.tsx file and passed it as a prop to the <Refine /> component, as described in the OTP Authentication with Supabase and Twilio in React (https://refine.dev/blog/supabase-twilio-otp-authentication-in-react/) blog post.

Create Your Easy Customizable Internal Issue Tracker With Refine an...

This web application will us to create issue and tasks for your team members. You will also be able to choose the priority of these tasks, their tags, and which person to assign them to.

Simple Web Application Example with Refine | refine

Do you want to develop a web application quickly? You are at the right place!

OTP Authentication with Supabase and Twilio in React | refine

We'll implement OTP(SMS) authorization using Twilio and Supabase in React app.

kapa.ai•17mo ago

import { Refine } from "@refinedev/core";  
import routerProvider from "@refinedev/react-router-v6";  
import { dataProvider } from "@refinedev/supabase";  
import { supabaseClient } from "utility";  
import authProvider from "./authProvider";  
import { Countries } from "pages/Countries";  
import { Layout } from "pages/Layout";  
import "./App.css";  
import { LoginPage } from "pages/Login";  
  
function App() {  
 return (  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(supabaseClient)}  
 resources={[{ name: "countries" }]}  
 authProvider={authProvider}  
 LoginPage={LoginPage}  
 />  
 );  
}

import { Refine } from "@refinedev/core";  
import routerProvider from "@refinedev/react-router-v6";  
import { dataProvider } from "@refinedev/supabase";  
import { supabaseClient } from "utility";  
import authProvider from "./authProvider";  
import { Countries } from "pages/Countries";  
import { Layout } from "pages/Layout";  
import "./App.css";  
import { LoginPage } from "pages/Login";  
  
function App() {  
 return (  
 <Refine  
 routerProvider={routerProvider}  
 dataProvider={dataProvider(supabaseClient)}  
 resources={[{ name: "countries" }]}  
 authProvider={authProvider}  
 LoginPage={LoginPage}  
 />  
 );  
}

If you are still having trouble, please refer to the [Supabase Authentication with Ref ----------------------

kapa.ai•17mo ago

<@543682490951532554> kapa.ai is still learning and improving, please let us how it did by reacting below

solid-orange•17mo ago

good bot, but that's not it

Omer•17mo ago

Hey @ahnaf1022 , Thank you for contacting us! Can you provide a CodeSandbox or StackBlitz environment that we can use to reproduce the issue?

solid-orange•17mo ago

Sorry it just seems that I didn't make the proper routes in app.tsx. I was using v3 in another project so was a bit confused initially