Independent Widget Integration

The independent widget is the easiest integration path if you want a complete, self-contained authentication solution. The widget includes its own login and logout buttons, so you don't need to modify your frontend code beyond loading our script.

When to Use This

You want a quick, minimal integration
You don't want to build custom login/logout UI
You want a self-contained authentication widget
You prefer minimal frontend changes

Prerequisites

Before starting, you need to:

Register as a new OIDC client - You must register your application as a new OIDC client by contacting us via email. We'll register your client_id and redirect_uri(s) for you.

Quick Start

The widget is automatically initialized when you use our client library with the default settings:

<script src="https://cdn.upod.eu/client/bundle.browser.js"></script>
<script>
    const client = upod.initialize({
        authority: 'https://account.upod.eu',
        client_id: 'your-client-id', // Obtained by contacting us
        redirect_uri: location.origin + location.pathname,
        post_logout_redirect_uri: location.origin + location.pathname,
    });
</script>

That's it! The widget will automatically appear when a user is logged in, showing:

User's anonymized profile data (gender, age range, residence)
A button to manage their Upod account
A logout button

When User is Not Logged In

The widget does not appear initially
When the user logs in (via any method), the widget automatically appears
The widget shows a floating button in the bottom-left corner

When User is Logged In

A floating widget button appears in the bottom-left corner
Clicking the button opens a modal showing:
- User's anonymized profile data
- "Manage Account" button (links to account.upod.eu)
- Logout button

The widget supports multiple languages. Set the language during initialization:

const client = upod.initialize({
    authority: 'https://account.upod.eu',
    client_id: 'your-client-id',
    redirect_uri: location.origin + location.pathname,
    post_logout_redirect_uri: location.origin + location.pathname,
    language: 'nl', // or 'en', 'de', etc.
});

Accessing User Data

Even with the widget handling UI, you can still access user data programmatically:

client.handleCallbackIfNeeded().then(() => {
    client.isAuthenticated().then(loggedIn => {
        if (loggedIn) {
            // Fetch user profile
            client
                .fetch({ path: '/storage/profile', method: 'get' })
                .then(profile => {
                    console.log('Gender:', profile.gender);
                    console.log('Age Range:', profile.ageRange);
                    console.log('Residence:', profile.residence);

                    // Use profile data to personalize your content
                });
        }
    });
});

Listening to Login/Logout Events

You can listen to authentication events to update your UI:

// When user logs in
client.onLogin(user => {
    console.log('User logged in:', user);
    // Update your UI, fetch personalized content, etc.
});

// When user logs out
client.onLogout(() => {
    console.log('User logged out');
    // Reset UI, show generic content, etc.
});

Complete Example

<!DOCTYPE html>
<html>
    <head>
        <title>My Website</title>
        <script src="https://cdn.upod.eu/client/bundle.browser.js"></script>
    </head>
    <body>
        <h1>Welcome to My Website</h1>
        <div id="content">
            <!-- Your content here -->
        </div>

        <script>
            const client = upod.initialize({
                authority: 'https://account.upod.eu',
                client_id: 'your-client-id', // Obtained by contacting us
                redirect_uri: location.origin + location.pathname,
                post_logout_redirect_uri: location.origin + location.pathname,
                language: 'en',
            });

            // Handle OIDC callback
            client.handleCallbackIfNeeded().then(() => {
                client.isAuthenticated().then(loggedIn => {
                    if (loggedIn) {
                        // User is logged in, widget will appear automatically
                        loadPersonalizedContent();
                    } else {
                        // User is not logged in
                        loadGenericContent();
                    }
                });
            });

            // Listen for login events
            client.onLogin(() => {
                loadPersonalizedContent();
            });

            // Listen for logout events
            client.onLogout(() => {
                loadGenericContent();
            });

            function loadPersonalizedContent() {
                client
                    .fetch({ path: '/storage/profile', method: 'get' })
                    .then(profile => {
                        // Personalize content based on profile
                        document.getElementById('content').innerHTML =
                            `Welcome! Showing content for ${profile.gender} in ${profile.residence}`;
                    });
            }

            function loadGenericContent() {
                document.getElementById('content').innerHTML =
                    'Welcome! Showing generic content.';
            }
        </script>
    </body>
</html>

The widget uses CSS custom properties and can be customized to match your brand. The widget automatically positions itself in the bottom-left corner and includes:

A floating button with Upod logo
A modal popup with user data
Responsive design for mobile and desktop

Benefits

✅ Zero frontend UI code required
✅ Automatic login/logout handling
✅ Built-in user profile display
✅ Works out of the box
✅ Minimal integration effort

Next Steps

Contact us to register your OIDC client
See our live examples for working implementations
Review the anonymized profile data documentation to understand available user data