New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Create auth helpers for Remix #57
Comments
If no one is working on this yet, I'd like work on it. I have something like the next + supabase auth example for Remix here, so I feel like ai have enough context to accomplish this: |
Hi Victor, One consideration we have with Remix and Supabase Auth is ensuring realtime still works on the client side. Remix mostly uses HttpOnly cookies for auth but these currently don't play well with the client side realtime. This is something we're looking to address in the future, but if you can get it working with the current constraints, that would be great! |
@VictorPeralta that would be awesome indeed. I know that @dijonmusters was planning to work on this once he's back from leave, but I am very certain he wouldn't mind you getting started on it 💚 |
Looks like @dijonmusters had already started working on this: 2a690e5 Might a good starting point Victor! Let me know if you need help, would be happy to contribute |
Also worthwhile looking at https://github.com/rphlmr/supa-fly-stack and if there are things from there we can pull out into auth helpers cc @rphlmr |
@dijonmusters Hi, i tried the example from the branch
the problem is this line: if (!user) return redirect('/login')
I also read something about the error in the remix docs: Server Code in Client Bundles but i didn't find any solution. Does anyone have an idea how to solve this? I would like to use this wrapper because it makes things easier, but it doesn't seem to be possible... |
@niklasgrewe Hi, It's because withAuthRequired is a high order function that creates a side effect. Remix doesn't know what to do with that and add this code to client side bundle too. https://remix.run/docs/en/v1/guides/constraints#higher-order-functions You should rewrite it to use it in loader / action 😉 // withAuthRequired.server.js
export default async function withAuthRequired (request) => {
const accessToken = await getAccessTokenFromRequest(request);
const { user } = await supabase.auth.api.getUser(accessToken);
if (!user) {
throw redirect("/login");
}
return { accessToken, user };
}; // app/routes/channels.jsx
export const loader = async ({ request }) => {
const { accessToken } = await withAuthRequired(request)
supabase.auth.setAuth(accessToken);
const { data: channels } = await supabase.from("channels").select("*");
return json({
channels,
});
}; PS : return json() will be mandatory soon ;) |
@rphlmr thank you for your quick help. Do you know when the auth helper for remix will be ready? I had already considered using |
The remix-auth-supabase is on standby 😅 I can recommend you to check "my remix stack" . |
@rphlmr great thank you, I did not know that. I also think the remix stacks are more suitable. Your stack I have already looked at, but admittedly, I do not really understand everything yet 😅 What I would like to understand though is why do I need to return |
@niklasgrewe It's an helper function equivalent to new Response({ accessToken, User }, {
headers: {
"Content-Type": "application/json",
},
});
Typing a But you can (and should) anyway use typing for Example : interface MyLoaderData {
orders: {
id: string;
amount: number;
...
};
}
export const loader = async ({ request }) => {
const { accessToken } = await withAuthRequired(request);
supabase.auth.setAuth(accessToken);
const { data: orders } = await supabase.from("orders").select("*");
return json({
orders,
});
};
export default function MyRoute () {
const { orders } = useLoaderData() as MyLoaderData
// or const { orders } = useLoaderData<MyLoaderData>()
// its a matter of choice, Remix creator like using as ^^"
return <div>...</div>
} I hope it helps. |
@rphlmr thank you very much for the detailed info. However, could it be that // withAuthRequired.server.js
export default async function withAuthRequired (request) => {
const accessToken = await getAccessTokenFromRequest(request);
const { user } = await supabase.auth.api.getUser(accessToken);
if (!user) {
throw redirect("/login");
}
return json({ accessToken, user }); // ❌ not working
// return { accessToken, user } ✅ works
}; // app/routes/private.jsx
export const loader = async ({ request }) => {
const { user } = await withAuthRequired(request)
return json({ email: user.email })
}; i always get
When i change |
@niklasgrewe I'm so sorry, I've edited my previous example => #57 (comment) Of course, |
all good, no problem at all, I figured it out myself. Thanks again for your support and explanations |
Any news on |
Chiming in to remind people that Cloudflare Pages/Workers is a supported deployment environment for Remix that doesn't support environment variables. Seems like all the stacks mainly use Fly. Hoping these helpers will keep that in mind and make sure it's compatible with Cloudflare. |
Has anyone used an oath supabase login with the remix auth helpers? I'm only seeing an email/password login example in the root https://github.com/supabase/auth-helpers/blob/4a709e24445d17b5bafae00ea06f562f5e052fcc/examples/remix/app/root.tsx |
@lsbyerley I've added an OAuth example here: https://github.com/supabase/auth-helpers/pull/354/files Thinking about changing the example to use the Auth UI. Would that be helpful? |
Awesome, thank you for the updated oauth example! I personally don't use the Auth UI components but I'm sure someone else out there would find it useful. I think having both would be perfect. |
I'd second keeping an example without Auth UI. I don't tend to use it either, so having an example without is useful for me too. |
The new remix oauth example doesn't seem to be working for me. I see the access token in the url after auth and then the remix app does nothing with it. |
@lsbyerley calling the auth methods in a server action wasn't the right approach unfortunately. I'm working on moving auth stuff to the client here: #356 . It currently uses the Auth UI but I'll also add a plain JS example. This approach will simplify things and save you money (server function invocations). |
|
Thank you! I'm still not sure I understand how to perform a The earlier example you had for oauth signin did not do anything with the accessToken after coming back to the remix |
@lsbyerley by following the <button
onClick={() => {
supabase?.auth.signInWithOAuth({
provider: 'github',
options: { redirectTo: 'http://localhost:3004' }
});
}}
>
GitHub OAuth
</button> I've added it to the example: #360 |
Like with Next.js which currently has easy to use helpers and routes, the same could be done for Remix.
I didn't find an open issue about this, although I heard it's planned, so it can be tracked here.
The text was updated successfully, but these errors were encountered: