AuthReturn Component Demo

Auth Form Component

The AuthComponent provides login/signup forms with Cognito integration. Both light and dark themes are shown below.

Header Component

The AuthHeaderComponent provides a full-width header bar with site title and auth status. When logged out, shows Sign In / Sign Up buttons. When logged in, shows user avatar (initials) and email.

Tip: Log in using one of the auth forms above to see the header update with your avatar and email.

Usage

AuthReturn provides two embeddable components. Include the scripts and CSS, then initialize the components you need.

1. Auth Form Component (AuthComponent)

Full login/signup form with email, password fields, and Cognito integration.

<!-- Include scripts and styles -->
<script src="https://cdn.jsdelivr.net/npm/amazon-cognito-identity-js@6/dist/amazon-cognito-identity.min.js"></script>
<script src="https://authreturn.com/static/auth_component.js"></script>
<link rel="stylesheet" href="https://authreturn.com/static/auth_component.css">

<!-- Container for the form -->
<div id="my-auth-form"></div>

<script>
AuthComponent.create({
    containerId: 'my-auth-form',
    mode: 'signup',           // 'signup' or 'login'
    appId: YOUR_APP_ID,       // Your registered app ID
    theme: 'light',           // 'light' or 'dark'
    onSuccess: (token, user) => {
        // Send token to your backend to establish session
        console.log('Authenticated!', user.email);
    },
    onError: (error) => {
        console.error('Auth error:', error);
    }
});
</script>

2. Header Component (AuthHeaderComponent)

Compact header bar with site title and auth status (sign in/up buttons or user avatar).

<!-- Include scripts and styles -->
<script src="https://cdn.jsdelivr.net/npm/amazon-cognito-identity-js@6/dist/amazon-cognito-identity.min.js"></script>
<script src="https://authreturn.com/static/auth_header_component.js"></script>
<link rel="stylesheet" href="https://authreturn.com/static/auth_header_component.css">

<!-- Container for the header -->
<div id="my-header"></div>

<script>
AuthHeaderComponent.create({
    containerId: 'my-header',
    appId: YOUR_APP_ID,       // Your registered app ID
    theme: 'light',           // 'light' or 'dark'
    siteTitle: 'My App',      // Optional: site name on the left
    siteTitleUrl: '/',        // Optional: link for site title
    onLogout: () => {
        // Called after user signs out
        console.log('User signed out');
    }
});
</script>