# Unity WebGL

:::info
To make these instructions concrete, we have created a sample global wallet called **Rapidfire ID**. To interact with it, you can find its SDK in the NPM package directory: [@rapidfire/id](https://www.npmjs.com/package/@rapidfire/id).

You can check out the GitHub [repository for Rapidfire Wallet](https://github.com/openfort-xyz/ecosystem-sample) to learn how to create your own wallet.
:::

This guide will walk you through adding support for any **global wallet** into a Unity app by integrating the [Mobile Wallet Protocol](https://mobilewalletprotocol.github.io/wallet-mobile-sdk/).

When doing `Build And Run` from your Unity **Build Settings** with the target platform `WebGL` you will notice that no popups are allowed. This is due to the `Cross-Origin-Opener-Policy` header being set to `same-origin-allow-popups` by default. This is a security feature to prevent popups from different origins.

There are two main things to consider when running your Unity WebGL build with global wallet support:

1. For any global wallet to work, you need to host the build or run it locally with `Cross-Origin-Opener-Policy` set to `same-origin-allow-popups`.
2. Compression Format: Set to Disabled (Player Settings > Publishing Settings) for final builds.

## Setup

Here's an example setup for testing your global wallet locally using express server. Please note that in this example, the build output is in the `build-output` directory.
Once your build is done, follow these steps:

:::steps
### 1. Create a Project Folder and Setup Files

Create a new folder for your server project and navigate to it:

```bash
mkdir unity-webgl-server
cd unity-webgl-server
```

Create a new subfolder called `build-output` where you'll place your Unity WebGL build files:

```bash
mkdir build-output
```

Copy all the files from your Unity WebGL build into the `build-output` folder. This should include files like:

* `index.html`
* `.unityweb` files
* Other assets and build files

### 2. Initialize Your Node.js Project

Initialize a new Node.js project and install Express:

```bash
npm init -y
npm install express
```

Create a new file called `server.js` in the root folder with the following content:

```js server.js
const express = require("express");
const path = require("path");

const app = express();
const port = 8000;
 
app.use((req, res, next) => {
  res.header(
    "Cross-Origin-Opener-Policy",
    "same-origin-allow-popups",
  );
  next();
});
 
app.use(express.static(path.join(__dirname, "build-output")));
app.listen(port, () =>
  console.log(`Server running on http://localhost:${port}`),
);
```

```json package.json
{
  "name": "express-webgl",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.21.2"
  }
}
```

### 3. Run Your Local Server

Start your Express server by running:

```bash
node server.js
```

You should see the message: `Server running on http://localhost:8000`

Open your browser and navigate to `http://localhost:8000` to see your Unity WebGL build running with global wallet support enabled.
:::

## Troubleshooting

If you encounter any issues:

1. Make sure your `build-output` folder contains all the necessary Unity WebGL build files
2. Confirm that your server is properly setting the `Cross-Origin-Opener-Policy` header
3. Check browser console for any errors
4. Ensure your global wallet is properly configured to work with the Mobile Wallet Protocol