iuioiua•2y 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•2y ago

Message Not Public

iuioiuaOP•2y 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•2y 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. :/

iuioiuaOP•2y ago

https://github.com/denoland/saaskit

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.

iuioiuaOP•2y ago

Works now

AwsmBuff•2y ago

Thank you very much!

iuioiuaOP•2y 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'm unsure whether this is an issue with Deno, this package, or ESM. To Reproduce Steps to reproduce the behavior, please...