rare-sapphire
rare-sapphire15mo 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
kapa.ai15mo 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
kapa.ai15mo 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
kapa.ai15mo 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
kapa.ai15mo ago
<@543682490951532554> kapa.ai is still learning and improving, please let us how it did by reacting below
rare-sapphire
rare-sapphire15mo ago
good bot, but that's not it
Omer
Omer15mo ago
Hey @ahnaf1022 , Thank you for contacting us! Can you provide a CodeSandbox or StackBlitz environment that we can use to reproduce the issue?
rare-sapphire
rare-sapphire15mo 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