Support autofocus

[TrevorBurnham]

Feature request

Support automatically focusing the first focusable element in the auth form.

Is your feature request related to a problem? Please describe.

When showing the auth form, it's likely that I want to bring the focus to the first field. This is particularly important if the auth form is in a modal; bringing the focus into the modal is required by the WCAG accessibility standard.

Describe the solution you'd like

In auth-ui-react, the Auth component could accept an autoFocus prop that gets passed through to the first focusable element it renders.

Describe alternatives you've considered

I can use a MutationObserver to observe the DOM where the form will render, then focus the first focusable element that renders. 🙈

[michaelessiet]

Nice addition. I'll add it to the Solid.js version. You're correct about the accessibility part. I've enabled auto focus on the first input field in the Solid.js auth ui

[silentworks]

This is now available in all packages.

[MrCryptoYOLO]

How can I disable autofocus in my NextJS 13 project? This is the code for "app/auth-form.tsx":

'use client'
import { Auth } from '@supabase/auth-ui-react'
import { ThemeSupa } from '@supabase/auth-ui-shared'
import { createClientComponentClient } from '@supabase/auth-helpers-nextjs'
import { Database } from '../types/supabase'

export default function AuthForm() {
    const supabase = createClientComponentClient<Database>()

    const redirectTo = process.env.NODE_ENV === 'development'
        ? 'http://localhost:3000/auth/callback'
        : `${process.env.NEXT_PUBLIC_SITE_URL}auth/callback`;

    return (
        <div className="auth-container">
            <Auth
                supabaseClient={supabase}
                view="magic_link"
                appearance={{
                    theme: ThemeSupa,
                    style: {
                        button: { width: '100%' },
                        input: { width: '100%' },
                    },
                    variables: {
                        default: {
                            colors: {
                                brand: '#ff6900',
                                brandAccent: '#fcb900',
                            },
                        },
                    },
                }}
                theme="dark"
                showLinks={false}
                providers={[]}
                redirectTo={redirectTo}
            />
        </div>
    )
}