Login Integration with E3DS SDK

This document demonstrates a simple login flow before loading an Eagle 3D Streaming application through the E3DS SDK.

This is only a demo concept. It is not a production-ready authentication system. In production, authentication should be handled securely on the server side using proper sessions, tokens, or secure cookies.

This demo only shows a login page. A registration page is not included, but you can implement one based on your own requirements.

Login System Flow

The logic is structured as follows:

1. The user lands on the Login Page

2. The user enters credentials

3. Credentials are validated

4. If valid, the user is redirected to the SDK stream page

5. The SDK stream page verifies authentication before starting the stream

6. If authentication fails, the user is redirected back to the login page

7. If authentication succeeds, the E3DS SDK initializes and loads the stream

Implementation Steps:

Step 1. Create a Login Page

Create a basic login form that captures the user’s email and password.

<form onsubmit="handleLogin(event)">
        <h3>Login Here</h3>

        <label for="email">Email</label>
        <input type="text" placeholder="Email or Phone" id="email" name="email">

        <label for="password">Password</label>
        <input type="password" placeholder="Password" id="password" name="password">

        <button type="submit">Log In</button>
</form>

Step 2. Handle Authentication Logic

When the user submits the login form, validate the credentials. In this demo, localStorage is used only to show the flow.

function handleLogin(e) {
    e.preventDefault();

    const form = e.target;
    const email = form.email.value;
    const password = form.password.value;

    // Replace this with your actual authentication logic
    localStorage.setItem("isAuthenticated", "true");

    window.location.href = "/e3ds_streaming_FE.html";
}

Important

This example uses localStorage only for demonstration. Do not use this as the only authentication method in production.

In production, login validation should be handled by your backend server.

Step 3. Protect the SDK Stream Page

On the SDK stream page, for example e3ds_streaming_FE.html, check authentication before initializing the E3DS SDK.

window.onload = function () {
    if (localStorage.getItem("isAuthenticated") !== "true") {
        window.location.href = "/login.html";
        return;
    }

    // Initialize the E3DS SDK only after authentication is verified
    initializeE3DSStream();
};

If the user is not authenticated, they are redirected to the login page. If authentication is valid, the SDK stream page continues loading.

Step 4. Initialize the E3DS SDK After Login

Initialize the E3DS SDK only after the authentication check is passed.

function initializeE3DSStream() {
    // Your existing E3DS SDK initialization code goes here

    const e3ds_controller = new E3DSController();

    e3ds_controller.setConfig({
        username: "YourE3DSUsername",
        appName: "YourAppName",
        configName: "YourConfigName"
    });

    e3ds_controller.start();
}

Note

The SDK should not start before authentication is checked. This helps demonstrate how users can be redirected before the stream loads.

For production, this protection should be enforced from the backend server, not only from client-side JavaScript.

Step 5. Add Logout Option

You can add a logout button to clear the demo authentication flag and redirect the user back to the login page.

<button onclick="logout()">Logout</button>

function logout() {
    localStorage.removeItem("isAuthenticated");
    window.location.href = "/login.html";
}

Recommendation

For production use, do not rely only on localStorage.

A secure production flow should include:

• Server-side credential validation

• Secure session or token-based authentication

• Secure cookies

• Protected SDK stream route

• Token or session expiry handling

• Logout and session cleanup

• HTTPS enabled on the website

• Backend authorization before allowing access to the stream

The SDK stream should only be initialized after the backend confirms that the user is authorized to access it.

Example Repository

A simple SDK-based login integration example:

https://github.com/e3ds/pixelstreaming-sdk/blob/main/login.html

The example includes:

• A basic login.html page

• A protected SDK stream page

Registration Page

This demo does not include a registration page.

You can create a registration page based on your own system requirements, such as:

• User sign-up

• Email verification

• Password reset

• Backend user management

In production, registration should also be handled securely on the server side.

Need help?

If you need any assistance, feel free to reach out through any of the following channels:

🛠️ Support Portal: Contact Our Support Team

💬 Discord Community (Faster Support): Join Our Discord Community

📧 Email Support: support@eagle3dstreaming.com

🆓 Get Started for free

Follow us on:

Facebook | GitHub | LinkedIn | YouTube