ToDoManager

Web application to manage your Microsoft To Do lists and tasks. Works directly in the browser or integrated into your site (iframe).

Direct Use

To use the application directly in your browser:

https://guillaumebeylouneh.github.io/ToDoManager/

Open the URL above
Click on "Sign in"
Sign in with your personal Microsoft account (@outlook.com, @hotmail.com, etc.)
Your lists and tasks appear

Important: Each user sees only their own data. The application stores nothing on a server, everything is directly synchronized with your Microsoft account.

Simple Integration (recommended)

For most cases: This method is what you need. No Microsoft configuration, no Client ID required.

How to do it?

Copy and paste this HTML code into your page:

<iframe
    src="https://guillaumebeylouneh.github.io/ToDoManager/"
    width="100%"
    height="800px"
    style="border: 1px solid #ddd; border-radius: 8px;"
></iframe>

What will happen?

The iframe displays ToDoManager on your page
Your users click on "Sign in"
They sign in with their personal Microsoft account (@outlook.com, @hotmail.com, etc.)
They see their own Microsoft To Do lists and tasks

No configuration required. No need for Azure Client ID, no need for development. Each user authenticates with their own Microsoft account.

Shared Mode - Everyone Sees Your Tasks

                        🎉 100% Autonomous Setup: Use the Setup Wizard to get your unique shareId in 3 clicks. The backend automatically refreshes tokens every 50 minutes. No manual configuration needed!
                    

Use Cases

Team Dashboards

Project tasks visible to the whole team

Intranet Portals

Company tasks for all employees

Private Sites

Tasks shared among trusted members

For End Users (Easy Setup)

Step 1: Run the Setup Wizard

Visit the autonomous setup wizard:

https://guillaumebeylouneh.github.io/ToDoManager/setup-wizard.html

Open Setup Wizard

Step 2: Sign in with Microsoft

The wizard will:

Ask you to sign in with your Microsoft account
Automatically create your unique shareId (e.g., abc12345)
Securely store your refresh token in the backend
Generate your custom URL and iframe code

Step 3: Integrate on Your Site

Copy the iframe code provided by the wizard:

<iframe
    src="https://guillaumebeylouneh.github.io/ToDoManager/?share=abc12345"
    width="100%"
    height="800px"
    style="border: 1px solid #ddd; border-radius: 8px;"
></iframe>

That's it! Your tasks will be automatically refreshed every 50 minutes. No maintenance required.

How It Works Behind the Scenes

Multi-tenant Architecture:

You visit the setup wizard and sign in with Microsoft
The wizard sends your refresh token to the backend (/api/setup-wizard)
Backend generates a unique 8-character shareId for you
Your refresh token is stored in Vercel KV database
A cron job refreshes ALL user tokens every 50 minutes (/api/refresh-all)
When visitors access your URL (?share=abc12345), they get a fresh token from the backend

Cost: 100% free (Vercel + Vercel KV free tier)
Maintenance: Zero maintenance required
Support: Unlimited concurrent users

Backend Infrastructure

The shared mode backend is already deployed and fully managed. No setup required from your side.

What you need to know:

✅ Backend is hosted on Vercel (serverless, auto-scaling)
✅ Tokens are stored securely in encrypted database
✅ Automatic token refresh every 50 minutes
✅ Multi-tenant architecture supports unlimited users
✅ 100% free for all users

To use shared mode: Simply visit the Setup Wizard, sign in with Microsoft, and get your unique shareId. Everything else is handled automatically.

Advanced Integration (optional)

Warning: This section is only for sites that already have a working Microsoft authentication. If you're getting started, use the simple integration above.

Why this method?

Your website already has Microsoft authentication (your users already sign in with Microsoft on your site) and you don't want them to sign in a second time for ToDoManager.

Prerequisite

Your application must ALREADY be able to obtain a Microsoft token with the following permissions:

User.Read
Tasks.Read
Tasks.ReadWrite

Method 1: Pass token in URL

Advantage: Simple

Disadvantage: The token appears in the URL (less secure)

async function openTodoManager() {
    const token = await yourAuthenticationFunction();
    window.open(`https://guillaumebeylouneh.github.io/ToDoManager/?token=${token}`);
}

Method 2: Use postMessage (recommended)

Advantage: More secure, token doesn't go through URL

Disadvantage: Requires a bit more code

<iframe
    id="todoManager"
    src="https://guillaumebeylouneh.github.io/ToDoManager/"
    style="width: 100%; height: 600px;"
></iframe>

<script>
    async function initTodoManager() {
        const iframe = document.getElementById('todoManager');
        const token = await getMicrosoftToken();

        iframe.onload = () => {
            iframe.contentWindow.postMessage({
                type: 'MSAL_TOKEN',
                token: token
            }, 'https://guillaumebeylouneh.github.io');
        };
    }

    window.addEventListener('message', async (event) => {
        if (event.origin !== 'https://guillaumebeylouneh.github.io') return;

        if (event.data.type === 'REQUEST_MSAL_TOKEN') {
            const token = await getMicrosoftToken();
            document.getElementById('todoManager').contentWindow.postMessage({
                type: 'MSAL_TOKEN',
                token: token
            }, 'https://guillaumebeylouneh.github.io');
        }
    });
</script>

Important: Security

Always verify the origin of messages to avoid security vulnerabilities:

window.addEventListener('message', (event) => {
    // Only accept messages from ToDoManager
    if (event.origin !== 'https://guillaumebeylouneh.github.io') {
        return;
    }
    // Process message...
});

Summary

If you don't already have Microsoft authentication on your site, this method is not for you.

Return to the simple integration (iframe) above.

SDK Modes (for developers)

Technical section: If you're simply using the iframe (simple integration), you don't need this section.

The ToDoManager SDK offers 4 authentication modes for developers who want more control.

1. Standalone Mode

When to use it? You don't have Microsoft authentication on your site.

const todo = new ToDoManagerSDK('container-id');
await todo.init();

The user signs in directly in the iframe with their Microsoft account.

Note: No configuration required. The application automatically uses the built-in Client ID.

2. Token Mode

When to use it? You already have a Microsoft token retrieved by your authentication system.

const token = await yourAuthSystem.getToken();

const todo = new ToDoManagerSDK('container-id');
await todo.init({ token });

The SDK sends the token to the iframe via postMessage. Avoids double authentication.

3. MSAL Instance Mode

When to use it? You're already using MSAL.js on your site and have an existing instance.

const msalInstance = new msal.PublicClientApplication(config);

const todo = new ToDoManagerSDK('container-id');
await todo.init({ msalInstance });

The SDK uses your MSAL instance to retrieve and refresh tokens automatically.

4. MSAL Config Mode

When to use it? You're developing your own application and want to use your own Azure AD Client ID.

const todo = new ToDoManagerSDK('container-id');
await todo.init({
    msalConfig: {
        auth: {
            clientId: 'your-client-id',
            authority: 'https://login.microsoftonline.com/consumers'
        }
    }
});

The SDK creates an MSAL instance, authenticates and manages everything automatically.

Note: This mode is for developers who have created their own Azure AD App Registration. If you're simply using the iframe, you don't need this.

Interactive Demo

Test the 4 modes live:

Open SDK Demo

🔗 URLs Reference

Complete list of all URLs for the ToDoManager project. Click to expand:

Main Application

Live App https://guillaumebeylouneh.github.io/ToDoManager/
Setup Wizard https://guillaumebeylouneh.github.io/ToDoManager/setup-wizard.html

Examples

SDK Demo https://guillaumebeylouneh.github.io/ToDoManager/examples/sdk-demo.html

Support and Contact

Need Help?

For any questions about using ToDoManager:

Email: ingenieur-developpeur@outlook.com

Developer

Guillaume Beylouneh - Full-Stack Developer
Paris, France