Unity Login & Authentication Minimal Example

Add VIVERSE login to a brand-new Unity project. You’ll import the VIVERSE package, build your own login UI, optionally enable the WebGL bridge, and test locally or on VIVERSE.

---

Unity Login & Authentication Minimal Example (New Project)

Overview

Add VIVERSE login to a brand-new Unity project: import the VIVERSE package, build a two-column login UI, optionally enable WebGL support, and test locally or on VIVERSE.

Prerequisites

• Unity 2021 LTS or newer (install the WebGL module if you plan to target WebGL)

• App ID from VIVERSE Studio (https://worlds.viverse.com/)

• VIVERSE login/auth unitypackage (e.g., SDK_v0.92 1.unitypackage)

Step 1. Import the VIVERSE package

1

Open Unity

Create new project within Unity.

2

Import VIVERSE Unity Package

Assets → Import Package → Custom Package…, select the VIVERSE unity package, click Import.

3

Review Added Scripts

Scripts such as LoginManager.cs, CloudSaveService.cs, HttpServer.cs, and ViverseSDK 1.jslib are now available—no code edits needed.

Step 2. Build the two-column login UI

1

Setup Canvas

A. GameObject → UI → Canvas (name it LoginCanvas).

B. Leave the auto-created EventSystem in the scene.

C. Configure LoginCanvas:

• Render Mode: Screen Space - Overlay

• Canvas Scaler → UI Scale Mode: Scale With Screen Size, Reference Resolution: 1920×1080

2

Create Centered Panel

A. Right-click LoginCanvas → UI → Panel (rename to LoginPanel).

B. In Rect Transform, choose the center anchor preset.

C. Set Width ≈ 1000, Height ≈ 280, Pos X = 0, Pos Y = 0.

3

Setup Left Column (Buttons)

A. Right-click LoginPanel → Create Empty (rename to ButtonColumn).

B. Add a Vertical Layout Group to ButtonColumn:

• Padding: all zero (leave the defaults)

• Spacing: 20

• Child Alignment: Upper Center

• Disable Child Force Expand Width/Height.

C. With ButtonColumn selected, set the RectTransform anchor preset to "middle left" (Alt+Left in the anchor matrix).

D. Right-click ButtonColumn → UI → Button (TextMeshPro) (rename to LoginButton). In the RectTransform, set Width = 180, Height = 40; set the child text to "Login", font size ~24, color a dark gray (#333333).

E. Duplicate LoginButton, rename to ClearDataButton, change the label text to "Clear Data".

F. (Optional) Add a Content Size Fitter on ButtonColumn (Horizontal/Vertical Fit = Preferred Size) if you want the column to shrink-wrap the buttons.

4

Setup Right Column (Info Group)

A. Right-click LoginPanel → Create Empty (rename to InfoGroup).

B. Add a Vertical Layout Group to InfoGroup:

• Padding: keep default zeros (0 on all sides)

• Spacing: 18

• Child Alignment: Upper Left

C. Set the RectTransform anchor preset to "middle right" (Alt+Right). In the RectTransform, set Width ≈ 500 and Height ≈ 103.

D. (Optional) Add a Content Size Fitter on InfoGroup.

5

Create Status Labels

A. Right-click InfoGroup → UI → Text - TextMeshPro (rename to StatusText):

• Text: "Status: Ready", font size ~20, color #000000

• On the TextMeshPro component, set Alignment to Upper Left.

• In the RectTransform, set Width ≈ 500 and Height ≈ 30.

B. Duplicate StatusText twice:

• First duplicate → rename the GameObject to AccountText and set its TextMeshPro text to "Account: ".

• Second duplicate → rename the GameObject to TokenText and set its TextMeshPro text to "Token: ".

• Keep the same RectTransform Width ≈ 500 and Height ≈ 30 on each duplicate.

6

Position Columns

A. Set ButtonColumn RectTransform:

• Anchor Min/Max = (0, 0.5)

• Pivot = (0, 0.5)

• Pos X ≈ 110, Pos Y ≈ 0

B. Set InfoGroup RectTransform:

• Anchor Min/Max = (1, 0.5)

• Pivot = (1, 0.5)

• Pos X ≈ -110, Pos Y ≈ 0

Step 3. Add the controller script

1

Add LoginUIController Script

Add this script to LoginPanel (Unity also adds LoginManager because of the RequireComponent attribute):

using UnityEngine;
using UnityEngine.UI;
using TMPro;
using ViverseSDK.Login;   // Import the namespace that exposes LoginManager

/// <summary>
/// Handles the UI layer for VIVERSE login.
/// It listens to LoginManager events and updates buttons/labels accordingly.
/// </summary>
[RequireComponent(typeof(LoginManager))]
public class LoginUIController : MonoBehaviour
{
    [Header("App Settings")]
    [SerializeField]
    private string appId;         // Your VIVERSE App ID (assign in Inspector)

    [Header("UI References")]
    [SerializeField] private Button loginButton;
    [SerializeField] private Button clearDataButton;
    [SerializeField] private TMP_Text statusText;
    [SerializeField] private TMP_Text accountText;
    [SerializeField] private TMP_Text tokenText;

    private LoginManager loginManager;

    private void Awake()
    {
        // Grab the LoginManager component and wire up button handlers
        loginManager = GetComponent<LoginManager>();

        loginButton.onClick.AddListener(() => loginManager.StartLogin());
        clearDataButton.onClick.AddListener(() =>
        {
            loginManager.ClearLoginData();
            UpdateStatus("Tokens cleared");
        });

        // Listen to LoginManager events so the UI stays in sync with auth state
        loginManager.OnStatusUpdated += UpdateStatus;
        loginManager.OnTokenUpdated += UpdateToken;
        loginManager.OnUserInfoUpdated += UpdateAccount;
        loginManager.OnLoginStateChanged += ToggleLoginButton;
    }

    private void Start()
    {
        // Show a default status immediately
        UpdateStatus("Ready");

        // Initialize login flow using the App ID specified in Inspector
        loginManager.Initialize(appId);
    }

    private void OnDestroy()
    {
        // Always unsubscribe from events to avoid leaks / stale references
        loginManager.OnStatusUpdated -= UpdateStatus;
        loginManager.OnTokenUpdated -= UpdateToken;
        loginManager.OnUserInfoUpdated -= UpdateAccount;
        loginManager.OnLoginStateChanged -= ToggleLoginButton;
    }

    /// <summary>Updates the status label and logs to console.</summary>
    private void UpdateStatus(string message)
    {
        if (statusText) statusText.text = message;
        Debug.Log("[LoginUI] " + message);
    }

    /// <summary>Shows a truncated access token, to avoid dumping the entire value.</summary>
    private void UpdateToken(string token)
    {
        if (!tokenText) return;

        tokenText.text = string.IsNullOrEmpty(token)
            ? "Token: <empty>"
            : $"Token: {token.Substring(0, Mathf.Min(20, token.Length))}...";
    }

    /// <summary>Displays the account ID returned from the login result.</summary>
    private void UpdateAccount(string accountId)
    {
        if (!accountText) return;

        accountText.text = string.IsNullOrEmpty(accountId)
            ? "Account: <none>"
            : $"Account: {accountId}";
    }

    /// <summary>Disables the login button once a session is active.</summary>
    private void ToggleLoginButton(bool isLoggedIn)
    {
        if (loginButton) loginButton.interactable = !isLoggedIn;
    }
}

2

Wire Serialized Fields

In the Inspector, wire the serialized fields:

• App Id → your VIVERSE App ID

• Login Button → LoginButton

• Clear Data Button → ClearDataButton

• Status Text → StatusText

• Account Text → AccountText

• Token Text → TokenText

Step 4. Attach HttpServer (Editor/Windows testing)

1

Add HttpServer Component

With LoginPanel selected, add the HttpServer component (included in the package). LoginManager references it automatically for local redirect flow.

Step 5. WebGL bridge (only for WebGL builds)

1

Confirm WebGL Bridge File

Confirm Assets/Plugins/WebGL/ViverseSDK 1.jslib exists (provided by the package). No manual wiring required—LoginManager detects WebGL and calls into the bridge automatically.

Step 6. Test the login flow

1

Editor / Windows Testing

A. Press Play.

B. Click Login → complete VIVERSE login in the browser.

C. Verify that status/account/token labels update; data persists in PlayerPrefs.

2

WebGL Testing

A. Build and host the WebGL player (local server or VIVERSE).

B. Click Login → the .jslib handles the SSO flow; the labels update when it succeeds.

Step 7. Build & deploy to VIVERSE

1

Switch to WebGL

Switch to WebGL (File → Build Settings → WebGL).

2

Build and Zip

Build; zip the output (index.html, Build/, TemplateData/ or StreamingAssets).

3

Upload to VIVERSE Studio

Upload the zip in VIVERSE Studio → Manage Content.

4

Preview and Submit

Preview and submit for approval.

---

Login service data contract

LoginManager deserializes login results into:

Serializable class Result {
    public string access_token;
    public string account_id;
    public int    expires_in;
    public string state;
}

Tokens and account IDs are cached via PlayerPrefs. Clear them with LoginManager.ClearLoginData() when logging out or switching accounts.