iuioiua
iuioiua17mo ago

Supabase Auth UI in Fresh

I'm building a simple web. I'd like to use Supabase's Auth UI, namely the Auth component, for handling the login and signup forms. I'd like to get the following working:
import { Auth } from "https://esm.sh/@supabase/auth-ui-react@0.2.6";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2.7.0?alias=react:preact/compat&deps=preact@10.12.0";

const supabaseClient = createClient(
Deno.env.get("SUPABASE_URL")!,
Deno.env.get("SUPABASE_ANON_KEY")!,
);

export default function LoginPage() {
return <Auth supabaseClient={supabaseClient} />;
}
import { Auth } from "https://esm.sh/@supabase/auth-ui-react@0.2.6";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2.7.0?alias=react:preact/compat&deps=preact@10.12.0";

const supabaseClient = createClient(
Deno.env.get("SUPABASE_URL")!,
Deno.env.get("SUPABASE_ANON_KEY")!,
);

export default function LoginPage() {
return <Auth supabaseClient={supabaseClient} />;
}
However, I get the following error:
An error occurred during route handling or page rendering. TypeError: Cannot read properties of null (reading 'useState')
at n.useState (https://esm.sh/stable/react@18.2.0/deno/react.js:2:6785)
at Object.ee (https://esm.sh/v106/@supabase/auth-ui-react@0.2.6/deno/auth-ui-react.js:2:40881)
at https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1830
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1857)
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1933)
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1074)
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1933)
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1933)
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1933)
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1933)
An error occurred during route handling or page rendering. TypeError: Cannot read properties of null (reading 'useState')
at n.useState (https://esm.sh/stable/react@18.2.0/deno/react.js:2:6785)
at Object.ee (https://esm.sh/v106/@supabase/auth-ui-react@0.2.6/deno/auth-ui-react.js:2:40881)
at https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1830
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1857)
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1933)
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1074)
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1933)
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1933)
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1933)
at T (https://esm.sh/v106/preact-render-to-string@5.2.6/X-ZS8q/deno/preact-render-to-string.js:12:1933)
How can I get this page working? I suspect a tweak is needed to bridge some compatibility gap.
7 Replies
Unknown User
Unknown User17mo ago
Message Not Public
Sign In & Join Server To View
iuioiua
iuioiua17mo ago
HAHAHA I think you’re right 🤣 I've fixed the alias so now the imports are:
import { createClient } from "https://esm.sh/@supabase/supabase-js@2.7.0";
import { EmailAuth } from "https://esm.sh/@supabase/auth-ui-react@0.2.6?alias=react:preact/compat&deps=preact@10.12.0";
import { createClient } from "https://esm.sh/@supabase/supabase-js@2.7.0";
import { EmailAuth } from "https://esm.sh/@supabase/auth-ui-react@0.2.6?alias=react:preact/compat&deps=preact@10.12.0";
However, now the component is returning nothing...
AwsmBuff
AwsmBuff16mo ago
Is your project public? I am also trying to get authentication to work with Fresh and Supabase but I am not making good progress. :/
iuioiua
iuioiua16mo ago
GitHub
GitHub - denoland/saaskit: A modern SaaS template built on Fresh.
A modern SaaS template built on Fresh. Contribute to denoland/saaskit development by creating an account on GitHub.
iuioiua
iuioiua16mo ago
Works now
AwsmBuff
AwsmBuff16mo ago
Thank you very much!
iuioiua
iuioiua16mo ago
I should clarify: SaaSKit provides a solution that doesn't use Supabase Auth UI. Deno support for the Supabase Auth UI is being tracked here: https://github.com/supabase/auth-ui/issues/110
GitHub
Support for Deno · Issue #110 · supabase/auth-ui
Bug report Describe the bug Auth component returns nothing in Deno. I&#39;m unsure whether this is an issue with Deno, this package, or ESM. To Reproduce Steps to reproduce the behavior, please...