D
Deno

help

Supabase Auth UI in Fresh

Iiuioiua2/7/2023
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.
UUUnknown User2/7/2023
Message Not Public
Sign In & Join Server To View
Iiuioiua2/7/2023
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...
UUUnknown User3/18/2023
Message Not Public
Sign In & Join Server To View
Iiuioiua3/18/2023
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.
Iiuioiua3/18/2023
Works now
UUUnknown User3/18/2023
Message Not Public
Sign In & Join Server To View
Iiuioiua3/19/2023
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...

Looking for more? Join the community!

Recommended Posts
Any tool that will complie my TS code to JS?I have coded a website in typescript using Deno, but I want to convert it to JS code. I know the DenHow to get remote IP address when using Deno.serve?I'm using connInfo when using Deno from STD but the native http server doesn't seem to have such intTwo questions on documentationRTFM in 3... 2... 🙂 Question 1: How do i hide documentation for specific exports, i do not want Is there any simple way to keep track of the heap/stack usage of a running Deno application?I have made a Deno application and I'm curious to know if there's heap/stack issues that I should fiusing data from one deno bench in anotheris there any good way to re-use the results generated in one deno bench in another one? example: `docker compose up of Oak server throws: SyntaxError: Duplicate export of 'type'I am just learning how to use Docker, and am trying to put up a container of an Oak server. When runPublishing Deno Module with Bin (Answered)I know there's a way to include a `bin/` when publishing a module and then perform some kind of `denUse local tgz file instead of tgz from npm registryHello, Is it possible to reference a local tgz file inside a deno project (like calling `npm instalvscode LSP being a disgraceful little bitchfor no reason obvious to me, vscode and deno's lsp has been acting up lately. any ideas what could bIs there a way to fetch() with headers, WITHOUT forcing header keys to lowercase?Title. I'm trying to create an API wrapper for a service which uses "Incapsula" as their firewall orHow do I use std/log?I'm trying to create a log file. I don't seem to be able to make it work tho. ```ts import { handleop_ffi_cstr_read replacement now that deno.core.ops is gone?The latest release removed Deno.core.ops, which a library of mine relied on to use `op_ffi_cstr_readNPM Import results in Rust panicLooking to import the Airgram NPM package because I don't want to write it from scratch at this momeDeno fmt conflicting with Deno lint, when using IIFE```ts // before formating ((): void => { /* code */ })() ``` after formating with deno fmt, it adds prototype dot functions. How?How would I go about creating dot function that can be chained at the end of a number in Deno? ExamRepublish a /x/ module from a deleted repoIs it possible to publish an old module from a new repo? i'v deleted an old one and created a new reHow to get Deno to fmt on save with VSCode?I have a deno.json file with some fmt options which works if run fromt the command line but not whenIntegrate Twin to Svelte+Vite+Deno as FreshIs there any way to integrate the use of Twind into the Stelte+Vite+Deno project as Fresh does? Thacan i render some pages as SPA and some as SSR in fresh?#fresh kanalına mesaj göndercan i render some pages as SPA and some as SSR in fresh? #fresh kanalına mesaj gönderHow can i return a base64 as file on Deno Deploy?Could someone give me an example for this?