Supabase-ui login component in Streamlit

[leeca]

Hello all,

Curious to see if anyone has tried to use supabase-ui as a login page for Streamlit?

login.js

import { Auth, Typography, Button } from "@supabase/ui";
import { createClient } from "@supabase/supabase-js";

const { Text } = Typography

// Create a single supabase client for interacting with your database
const supabase = createClient(
  "https://xyzcompany.supabase.co",
  "public-anon-key"
);

const Container = (props) => {
  const { user } = Auth.useUser();
  if (user)
    return (
      <>
        <Text>Signed in: {user.email}</Text>
        <Button block onClick={() => props.supabaseClient.auth.signOut()}>
          Sign out
        </Button>
      </>
    );
  return props.children;
};

export default function Home() {
  return (
    <Auth.UserContextProvider supabaseClient={supabase}>
      <Container supabaseClient={supabase}>
        <Auth providers={['google']} supabaseClient={supabase}/>
      </Container>
    </Auth.UserContextProvider>
  );
};

export default withStreamlitConnection(Home())

I am completely stuck here as to how I would import this js file into my app.py file . I have consulted How to Build a Streamlit Component tutorials on Youtube but emerged none the wiser (the presenter was using React.js)

[sweatybridge]

I was looking into the same problem over the weekend. There are some nuances with embedding supabase-js within an iframe. So I ended up creating a custom component to patch a few internal functions used by supabase-js library.

Feel free to try out my example here streamlit-supabase-auth · PyPI. Once the user successfully authenticates, a session object will be returned to streamlit python app.