search

supabase-community / auth-ui

Pre-built Auth UI for React
https://supabase.com/docs/guides/auth/auth-helpers/auth-ui
MIT License
487 stars 121 forks source link

Expose the Auth component's current view to the NextJS parent page to enable relevant "page furniture" #50

Closed dasearle closed 1 year ago

dasearle commented 1 year ago

When the Auth component is placed in a NextJS page, the parent page needs the ability to access the current view state to display a relevant title and supporting copy.

Currently there is no way to determine the state of a the Auth component - e.g. whether it is displaying the Sign In, Sign Up or Forgotten Password screen. As such, it is not possible to display a relevant title or subtitle on the page.

If the page is able to determine the state of the component, the content and styling of the page can be updated to reflect this - specifically copy referring to "Please sign in" could change to "Please sign up" as the Auth screens change. Further, when the user signs up and has to click on the confirmation email, this could become part of a broader on-boarding journey if the parent app is aware of the change of state.

Possible solutions:

  1. A callback function could be accepted by the Auth component and be used to update the parent on state changes

The use of a callback function would enable the Page to be synchronised and updated as the user navigated through the Auth component.

  1. Alternatively, perhaps the SessionContext object could be used with a signin state that could be accessed by the parent page - e.g. "Sign In" / "Sign Up" / "Needs confirmation" / "Password Reset" etc

Example screenshot - Sign Up screen with Sign In header:

image
silentworks commented 1 year ago

I think #47 will better address this as I don't think we should be leaking the state outside of the component. What #47 will enable is for you to create your own paths (pages) in your app and show only the component/view relating to that path.

dasearle commented 1 year ago

I think this makes sense - ultimately it "unbundles" the component but achieves the same end result with only the relevant view being available on each page.

Adding title & subtitle props so that the component can be placed with supporting copy is a 3rd possible solution but of the three I think I concur that #47 is probably the most versatile.

silentworks commented 1 year ago

This is now possible using the method I outlined above in the latest 0.2.5 version. I've mentioned a bit more in #47 how this can be done.