Display Gradio components based on HF OAuth status

Question

I want to show a gr.Markdown "No user" if no user is logged in via OAuth, and a component (in this example gr.Chatbot) if a user is logged in.

Full code:

import gradio as gr

def get_oauth(profile: gr.OAuthProfile | None, oauth_token: gr.OAuthToken | None) -> str:
    if profile is None:
        return
    return profile.name
    
with gr.Blocks() as demo: 
    gr.LoginButton()
    name = gr.State()
    demo.load(get_oauth, inputs = None, outputs = name)

    if name.value is None:
        gr.Markdown(
        """
        # No user
        """) 
    else:
        gr.Chatbot(value=[["Hello World","Hey Gradio!"],["❤️",""],["",""]])
        
demo.launch()

The If/Else statement always returns the markdown, meaning the name.value is always None.

The OAuth IS working and returning gr.OAuthProfile, I have already double checked that.

My assumption is that the demo.load only runs AFTER the gr.Blocks has already populated its content, but im not sure how to change this.

I have alternatively tried:

def get_oauth(profile: gr.OAuthProfile | None, oauth_token: gr.OAuthToken | None) -> gr.State():
*scroll to see whole line*

and

demo.load(get_oauth, inputs = None, outputs = name.value)

https://www.gradio.app/guides/state-in-blocks#session-state This is the Gradio gr.State() docs for reference

Meta:

title: Gradio + Oauth
emoji: ️
colorFrom: indigo
colorTo: purple
sdk: gradio
sdk_version: 4.16.0
hf_oauth: true
hf_oauth_scopes:
  - read-repos