supabase-js VS headlessui

[Edge Functions] Custom domains and vanity domains support for Edge Functions. PR

First of all, the code you provided is not directly supabase, but is whatever is provided from the javascript library. The auth part is then redirecting to the gotrue-js library, and as seen here [Gotrue-JS#L238] it returns a `Promise` and that specific type is declared here Where we see it could be two return types. ```ts | { data: { user: User | null session: Session | null } error: null } | { data: { user: null session: null } error: AuthError }

Next up, Supabase released v2 of their JavaScript client library (supabase-js), which brought with it a number of developer experience type improvements, and streamlined how we use some of the API's. A number of methods were also deprecated in this new release, which we'll cover later in this guide.

We install the Supabase client library and also Chakra-UI which we will be using to build our React components.

The last part is the easiest as we simply need to connect Supabase to our Ionic app and call one function. Get started by bringing up a new Ionic app and install the Supabase JS client:

Under src/lib I have a .ts file where I create a supabase client inside.

First and foremost, the language and framework – Typescript & React. Typescript is a must for a project of this size. It provides safety and peace of mind as I iterate quickly to solve bugs and add new features. React is a by-product of the next two things I will mention, Next and Remix. Both of these are higher abstractions on top of React and supply incredible tooling to build fast server side rendered applications. Picking one or the other was driven by my database and auth provider, Supabase. I could have tried to make it work with Remix, but there was already an authentication helper for Next from the Supabase community so I decided on Next. Still using Remix for this current website since I do love Remix so much.

Have a look at https://postgrest.org/en/stable/. They do something in this direction and e.g. supabase.io uses them. Their approach is, if you have a database you have a REST API.

Catalyst is a comprehensive, fully componentized UI kit for modern React projects, built on the next generation of Headless UI. With Catalyst, you can create a custom set of components to use and reuse in your projects.

And that is why I was looking for a UI library that would deliver these things for a long time and today I am happy to announce that I have found it! It is Headless UI by the Tailwind Team.

Headless UI provides a suite of unstyled, fully accessible UI components perfect for developers who want full control over their interface design. It's a developer's canvas, offering the foundational parts needed to build a user interface without dictating the aesthetics, making it ideal for those who love to integrate with Tailwind CSS. With https://headlessui.com/, you can ensure that your applications are inclusive and easy to use for everyone, while also maintaining the freedom to craft a unique look and feel that aligns with your brand or style guidelines.

GitHub stars: 22.5k GitHub link: https://github.com/tailwindlabs/headlessui Documentation: https://headlessui.com/

Website: Headless UI

Few months ago, I discovered project called Headless UI and I instantly liked the idea.

In addition to Tailwind CSS, Tailwind Labs also created Headless UI, a collection of components that work well with Tailwind CSS.

Tailwind - Headless UI