Support for Deno

[iuioiua]

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 provide code snippets or a repository:

1. Go to https://tiny-todos.deno.dev/x. You'll see an empty web page, even though it uses the following code. This is essentially the same as the first snippet from the documentation:

import { createClient } from "https://esm.sh/@supabase/[email protected]";
import { Auth } from "https://esm.sh/@supabase/[email protected]?alias=react:preact/compat&[email protected]";

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

export default function Component() {
  return <Auth supabaseClient={supabaseClient} />;
}

Expected behavior

The Auth UI should be rendered as seen in the thumbnail of the video in the documentation.

Screenshots

System information

• OS: macOS
• Version of supabase-js: 2.7.0
• Version of Deno (not Node.js): 1.30.3
• Version of auth-ui-react: 0.2.6
• Version of fresh: 1.1.3

Additional context

I have not yet seen any examples of the Auth UI package being used in Deno, so I wonder whether this is even possible with the current code base and Deno runtime. Am I doing something wrong?

[thorwebdev]

@iuioiua the Auth component needs to be client-side rendered as it's making a bunch of Ajax requests, so I think we need to put it into and island component.

I tried putting it in an island, but then I'm getting this

An error occured during route handling or page rendering.

TypeError: Cannot read properties of undefined (reading '__H')
    at a (https://esm.sh/stable/[email protected]/deno/hooks.js:2:189)
    at k (https://esm.sh/stable/[email protected]/deno/hooks.js:2:323)
    at P (https://esm.sh/stable/[email protected]/deno/hooks.js:2:292)
    at Object.ee (https://esm.sh/v106/@supabase/[email protected]/X-YS9yZWFjdDpwcmVhY3QvY29tcGF0CmQvcHJlYWN0QDEwLjEyLjA/deno/auth-ui-react.js:2:41388)
    at https://esm.sh/v99/[email protected]/X-ZS8q/deno/preact-render-to-string.js:12:1626
    at E (https://esm.sh/v99/[email protected]/X-ZS8q/deno/preact-render-to-string.js:12:1653)
    at E (https://esm.sh/v99/[email protected]/X-ZS8q/deno/preact-render-to-string.js:12:918)
    at E (https://esm.sh/v99/[email protected]/X-ZS8q/deno/preact-render-to-string.js:12:1729)
    at E (https://esm.sh/v99/[email protected]/X-ZS8q/deno/preact-render-to-string.js:12:2689)
    at E (https://esm.sh/v99/[email protected]/X-ZS8q/deno/preact-render-to-string.js:12:2578)

Any ideas how to resolve that? I think it's some react <> preact (in)compatability issues.

[iuioiua]

I've managed to get further. Try:

1. Using ?target=es2022 on the @supabase/auth-helpers-shared import.
2. Getting your SupaAuthUi island accept parameters supabaseUrl and supabaseKey, then define those values in the route.
3. Only import client-side code in the island. For example, doing import { createBrowserClient } from "../components/supabase.ts"; in islands/SupaAuthUi.tsx also imports other server-side code.

I'll try get my code uploaded soon.

[iuioiua]

@thorwebdev, I'll create a simplified dummy repo to reproduce this issue.

[iuioiua]

@thorwebdev, I've created a minimal reproduction of this issue so we can play around with this issue. Hopefully, we'll get the Supabase Auth UI working with Fresh. Check it out here: https://github.com/iuioiua/fresh-supabase-auth-ui

[thorwebdev]

@iuioiua when running your repo https://github.com/iuioiua/fresh-supabase-auth-ui I don't get anything rendered to the screen, but I'm afraid I have no idea why that is.

Probably would need someone with deep Fresh <> React <> Preact experiece to dig into this.

I think for the time being you'd be best off using the Auth approach employed here: https://github.com/thorwebdev/everydaylytics

It uses Fresh's way of submitting forms (whereas the Auth UI uses Ajax requests), as well as cookies to store sessions (rather than Auth UI using localStorage), so I think for Fresh, the current Auth UI approach isn't the best fit.

You can find more details on the Auth approach, including Oauth here: https://github.com/thorwebdev/everydaylytics#auth-approach

[iuioiua]

I see. Thanks for looking into it, either way, @thorwebdev! Very much appreciated.

[thorwebdev]

I'll keep this open to track Deno support for the future 👍