Standalone Login Button
Using <mpr-login-button> and
<mpr-user> as the primary auth surface outside the header.
Authentication
Use Google or open the email panel to sign in or create an account through TAuth.
Session Details
Signed out
Use a provider control above to begin.
How this demo works
-
<mpr-login-button>renders provider controls and sends authentication work to TAuth. -
<mpr-user>displays the authenticated profile and provides a dropdown with menu items and logout action. -
Both components listen for
mpr-ui:auth:*events to stay in sync with the session state. -
YAML config from
./config-ui.yamlapplies the tenant, provider settings, auth paths, and button styles. It loads beforempr-ui.jsinitializes the custom elements. -
TAuth endpoints (
/auth/nonce,/auth/google,/auth/logout,/auth/session, and/auth/apple/start) are proxied through the same origin, andmpr-uikeeps the session state synchronized. - This pattern is useful for login pages, sidebars, or anywhere you need auth controls outside the header authentication flow.