Supabase Auth UI: show the sign up UI not the sign in UI?

I am using Supabase Auth UI as the login / sign up auth provider for my website.

Currently the Auth UI always shows the login button. I can get onto the sign up UI by clicking "Don't have an account? Sign up" successfully. All the log in and sign up works technically, but I want to be able to show the sign up page (e.g. for my sign up button) so that a user doesn't think they are registering and have to re-do their details when they realise they are trying to sign in.

Seems a no brainer to allow me to control which bit of the UI shows, but I can't find a way to do it?

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

import React from "react";
import { Auth } from "@supabase/auth-ui-react";
import { ThemeSupa } from "@supabase/auth-ui-shared";
import { useNavigate } from "react-router-dom";
import IconLogo from "../../img/brand/icononly_nobuffer.png";
import { Link } from "react-router-dom";
import { supabase } from "../../utils/supabase";
export default function Register() {
const navigate = useNavigate();
supabase.auth.onAuthStateChange(async (event, session) => {
console.log("Auth state changed:", event);
if (event === "SIGNED_IN" || event === "USER_UPDATED") {
const { data, error } = await supabase
.from("user_profile")
.select("*")
.eq("user_uid", session.user.id);
if (error) {
console.error("Error fetching user profile:", error);
} else if (data.length === 0) {
await supabase
.from("user_profile")
.insert([{ user_uid: session.user.id, email: session.user.email }]);
}
navigate("/profile");
}
});
return (
<>
<div className="flex min-h-full items-center justify-center py-12 px-4 sm:px-6 lg:px-8">
<div className="w-full max-w-md space-y-8">
<div>
<Link to="/">
<img
className="mx-auto h-12 w-auto"
src={IconLogo}
alt="Your Company"
/>
</Link>
<h2 className="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
Join GolfLists.com
</h2>
<p className="text-xs sm:text-sm text-gray-500 text-center pt-4">
It's free to register for GolfLists.com Club and it takes 30
seconds to sign up.
</p>
</div>
<Auth
supabaseClient={supabase}
appearance={{
theme: ThemeSupa,
variables: {
default: {
colors: {
brand: "#4f46e5",
brandAccent: "#4f46e5",
},
},
},
}}
theme="auto"
providers={[]}
/>
<p className="text-xs sm:text-sm text-gray-500 text-center">
Tempted...but not sure it's for you yet? Read our
<Link to="/blog" className="text-indigo-600">
{" "}blog{" "}
</Link>
to get a feel for the site.
</p>
</div>
</div>
</>
);
}

<!-- end snippet -->

If you only want to show the sign up view you can pass that as a value to the component as a prop.

<Auth
supabaseClient={supabase}
view="sign_up"
/>