Squashed commit of the following:

commit 41748a4036 Merge: 3b1d4d63 4991a70b Author: grégoire parant <g.parant@thecodingmachine.com> Date: Mon Aug 2 21:38:37 2021 +0200 Merge pull request #1327 from thecodingmachine/hotFixErrorCardBack Fix error generated commit 4991a70bba Author: Gregoire Parant <g.parant@thecodingmachine.com> Date: Mon Aug 2 21:34:03 2021 +0200 Fix error generated Don't generate error if file is Invalid commit 3b1d4d630c Merge: f52b4598 02e5860e Author: grégoire parant <g.parant@thecodingmachine.com> Date: Mon Aug 2 21:03:18 2021 +0200 Merge pull request #1326 from thecodingmachine/HotFixCreateMapFeature Hot fix create map feature commit 02e5860e43 Author: Gregoire Parant <g.parant@thecodingmachine.com> Date: Mon Aug 2 20:59:13 2021 +0200 HotFix redirect on production domain of WorkAdventure - Update domain `ADMIN_URL` by `workadventu.re` commit f52b459872 Merge: 3d657b4a 3ab069d6 Author: grégoire parant <g.parant@thecodingmachine.com> Date: Mon Aug 2 11:23:16 2021 +0200 Merge pull request #1324 from thecodingmachine/develop Release v1.4.11 commit 3ab069d650 Merge: 2b748138 9d4ffe54 Author: Kharhamel <Kharhamel@users.noreply.github.com> Date: Fri Jul 30 15:51:07 2021 +0200 Merge pull request #1323 from thecodingmachine/openIDPoc FIX: bomp the node version of pusher commit 9d4ffe542c Author: kharhamel <oognic@gmail.com> Date: Fri Jul 30 15:50:30 2021 +0200 FIX: bomp the node version of pusher commit 2b7481383f Merge: 74975ac9 9c803a69 Author: Kharhamel <Kharhamel@users.noreply.github.com> Date: Fri Jul 30 15:48:56 2021 +0200 Merge pull request #1251 from thecodingmachine/openIDPoc POC for the openID connect commit 9c803a69ff Author: kharhamel <oognic@gmail.com> Date: Tue Jul 27 16:37:01 2021 +0200 FEATURE: users can now login via an openID client commit 74975ac9d8 Merge: 315fe7ca ebdcf880 Author: Kharhamel <Kharhamel@users.noreply.github.com> Date: Fri Jul 30 14:54:33 2021 +0200 Merge pull request #1322 from thecodingmachine/improveCapacityWarning FEATURE: improved the room capacity warning visuals commit ebdcf8804d Author: kharhamel <oognic@gmail.com> Date: Fri Jul 30 14:08:27 2021 +0200 added admin link to the warning container commit 41ac51f291 Author: kharhamel <oognic@gmail.com> Date: Thu Jul 29 18:02:36 2021 +0200 FEATURE: improved the room capacity warning visuals commit 315fe7ca82 Author: David Négrier <d.negrier@thecodingmachine.com> Date: Thu Jul 29 17:49:51 2021 +0200 Adding a "font-family" property for text objects. (#1311) - Tiled displays your system fonts. - Computers have different sets of fonts. Therefore, browsers never rely on system fonts - Which means if you select a font in Tiled, it is quite unlikely it will render properly in WorkAdventure To circumvent this problem, in your text object in Tiled, you can now add an additional property: `font-family`. The `font-family` property can contain any "web-font" that can be loaded by your browser. This allows us to use the "Press Start 2P" 8px font in text objects, which renders way better than the default "Sans serif" font of your browser. commit 7ffe564e8e Author: GRL78 <80678534+GRL78@users.noreply.github.com> Date: Thu Jul 29 17:42:16 2021 +0200 Graphic upgrade of the global message console (#1287) * Graphic upgrade of the global message console Fix: error if LoginScene doesn't exist * Rework graphic of global message console * Rework graphic of global message console * Remove console.log commit 2a1af2a131 Author: grégoire parant <g.parant@thecodingmachine.com> Date: Thu Jul 29 16:42:31 2021 +0200 PWA service workers (#1319) * PWA services worker - [x] Register service worker of PWA to install WorkAdventure application on desktop and mobile - [x] Create webpage specifique for PWA - [ ] Add register service to save and redirect on a card - [ ] Add possibilities to install PWA for one World (with register token if existing) * Finish PWA strategy to load last map visited * Fix feedback @Kharhamel * Fix feedback @Kharhamel
2021-08-02 22:06:24 +02:00 · 2021-08-02 22:06:24 +02:00 · c177f0a1b3
commit c177f0a1b3
parent 6ac25d344b
54 changed files with 1469 additions and 1901 deletions
--- a/.env.template
+++ b/.env.template
@ -19,3 +19,6 @@ ACME_EMAIL=
 MAX_PER_GROUP=4
 MAX_USERNAME_LENGTH=8

+OPID_CLIENT_ID=
+OPID_CLIENT_SECRET=
+OPID_CLIENT_ISSUER=
--- a/.github/workflows/continuous_integration.yml
+++ b/.github/workflows/continuous_integration.yml
@ -50,6 +50,7 @@ jobs:
        run: yarn run build
        env:
          PUSHER_URL: "//localhost:8080"
+          ADMIN_URL: "//localhost:80"
        working-directory: "front"

      - name: "Svelte check"
@ -81,7 +82,7 @@ jobs:
      - name: "Setup NodeJS"
        uses: actions/setup-node@v1
        with:
-          node-version: '12.x'
+          node-version: '14.x'

      - name: Install Protoc
        uses: arduino/setup-protoc@v1
--- a/.github/workflows/push-to-npm.yml
+++ b/.github/workflows/push-to-npm.yml
@ -47,6 +47,7 @@ jobs:
        run: yarn run build-typings
        env:
          PUSHER_URL: "//localhost:8080"
+          ADMIN_URL: "//localhost:80"
        working-directory: "front"

      # We build the front to generate the typings of iframe_api, then we copy those typings in a separate package.
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -2,9 +2,9 @@

 ### Updates
 - New scripting API features: 
-  - Use `WA.room.loadTileset(url: string) : Promise<number>` to load a tileset from a JSON file.
-
-
+  - Use `WA.room.loadTileset(url: string) : Promise<number>` to load a tileset from a JSON file,
+- Rewrote the way  authentication works: the auth jwt token can now contain an email instead of an uuid,
+- Added an OpenId login flow than can be plugged to any OIDC provider.
 ## Version 1.4.10

 ### Updates
--- a/back/src/Services/MapFetcher.ts
+++ b/back/src/Services/MapFetcher.ts
@ -27,7 +27,9 @@ class MapFetcher {
        });

        if (!isTiledMap(res.data)) {
-            throw new Error("Invalid map format for map " + mapUrl);
+            //TODO fixme
+            //throw new Error("Invalid map format for map " + mapUrl);
+            console.error("Invalid map format for map " + mapUrl);
        }

        return res.data;
--- a/back/src/Services/SocketManager.ts
+++ b/back/src/Services/SocketManager.ts
@ -790,7 +790,7 @@ export class SocketManager {
        if (!room) {
            //todo: this should cause the http call to return a 500
            console.error(
-                "In sendAdminRoomMessage, could not find room with id '" +
+                "In dispatchWorldFullWarning, could not find room with id '" +
                    roomId +
                    "'. Maybe the room was closed a few milliseconds ago and there was a race condition?"
            );
--- a/benchmark/index.ts
+++ b/benchmark/index.ts
@ -13,7 +13,6 @@ RoomConnection.setWebsocketFactory((url: string) => {
 });

 async function startOneUser(): Promise<void> {
-    await connectionManager.anonymousLogin(true);
    const onConnect = await connectionManager.connectToRoomSocket(process.env.ROOM_ID ? process.env.ROOM_ID : '_/global/maps.workadventure.localhost/Floor0/floor0.json', 'TEST', ['male3'],
        {
            x: 783,
--- a/docker-compose.single-domain.yaml
+++ b/docker-compose.single-domain.yaml
@ -53,7 +53,7 @@ services:
      - "traefik.http.routers.front-ssl.service=front"

  pusher:
-    image: thecodingmachine/nodejs:12
+    image: thecodingmachine/nodejs:14
    command: yarn dev
    #command: yarn run prod
    #command: yarn run profile
@ -66,6 +66,10 @@ services:
      API_URL: back:50051
      JITSI_URL: $JITSI_URL
      JITSI_ISS: $JITSI_ISS
+      FRONT_URL: http://localhost
+      OPID_CLIENT_ID: $OPID_CLIENT_ID
+      OPID_CLIENT_SECRET: $OPID_CLIENT_SECRET
+      OPID_CLIENT_ISSUER: $OPID_CLIENT_ISSUER
    volumes:
      - ./pusher:/usr/src/app
    labels:
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@ -55,7 +55,7 @@ services:
      - "traefik.http.routers.front-ssl.service=front"

  pusher:
-    image: thecodingmachine/nodejs:12
+    image: thecodingmachine/nodejs:14
    command: yarn dev
    environment:
      DEBUG: "socket:*"
@ -66,6 +66,10 @@ services:
      API_URL: back:50051
      JITSI_URL: $JITSI_URL
      JITSI_ISS: $JITSI_ISS
+      FRONT_URL: http://play.workadventure.localhost
+      OPID_CLIENT_ID: $OPID_CLIENT_ID
+      OPID_CLIENT_SECRET: $OPID_CLIENT_SECRET
+      OPID_CLIENT_ISSUER: $OPID_CLIENT_ISSUER
    volumes:
      - ./pusher:/usr/src/app
    labels:
--- a/docs/maps/text.md
+++ b/docs/maps/text.md
@ -0,0 +1,35 @@
+{.section-title.accent.text-primary}
+# Writing text on a map
+
+## Solution 1: design a specific tileset (recommended)
+
+If you want to write some text on a map, our recommendation is to create a tileset that contains
+your text. You will obtain the most pleasant graphical result with this result, since you will be able
+to control the fonts you use, and you will be able to disable the antialiasing of the font to get a 
+"crispy" result easily.
+
+## Solution 2: using a "text" object in Tiled
+
+On "object" layers, Tiled has support for "Text" objects. You can use these objects to add some
+text on your map.
+
+WorkAdventure will do its best to display the text properly. However, you need to know that:
+
+- Tiled displays your system fonts.
+- Computers have different sets of fonts. Therefore, browsers never rely on system fonts
+- Which means if you select a font in Tiled, it is quite unlikely it will render properly in WorkAdventure
+
+To circumvent this problem, in your text object in Tiled, you can add an additional property: `font-family`.
+
+The `font-family` property can contain any "web-font" that can be loaded by your browser.
+
+{.alert.alert-info}
+**Pro-tip:** By default, WorkAdventure uses the **'"Press Start 2P"'** font, which is a great pixelated
+font that has support for a variety of accents. It renders great when used at *8px* size.
+
+<div>
+    <figure class="figure">
+        <img src="https://workadventu.re/img/docs/text-object.png" class="figure-img img-fluid rounded" alt="" style="width: 70%" />
+        <figcaption class="figure-caption">The "font-family" property</figcaption>
+    </figure>
+</div>
--- a/front/dist/index.tmpl.html
+++ b/front/dist/index.tmpl.html
@ -34,6 +34,7 @@
        <title>WorkAdventure</title>
    </head>
    <body id="body" style="margin: 0; background-color: #000">
+
        <div class="main-container" id="main-container">
            <!-- Create the editor container -->
            <div id="game" class="game">
--- a/front/dist/resources/html/gameMenu.html
+++ b/front/dist/resources/html/gameMenu.html
@ -60,6 +60,9 @@
        <section>
            <button id="enableNotification">Enable notifications</button>
        </section>
+        <section hidden>
+            <button id="oidcLogin">Oauth Login</button>
+        </section>
        <section>
            <button id="sparkButton">Create map</button>
        </section>
--- a/front/dist/resources/html/warningContainer.html
+++ b/front/dist/resources/html/warningContainer.html
@ -1,18 +0,0 @@
-<style>
-    #warningMain {
-        border-radius: 5px;
-        height: 100px;
-        width: 300px;
-        background-color: red;
-        text-align: center;
-    }
-
-    #warningMain h2 {
-        padding: 5px;
-    }
-</style>
-
-<main id="warningMain">
-    <h2>Warning!</h2>
-    <p>This world is close to its limit!</p>
-</main>
--- a/front/dist/resources/service-worker.html
+++ b/front/dist/resources/service-worker.html
@ -0,0 +1,62 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport"
+              content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+        <meta http-equiv="X-UA-Compatible" content="ie=edge">
+
+        <!-- TRACK CODE -->
+        <!-- END TRACK CODE -->
+
+        <link rel="apple-touch-icon" sizes="57x57" href="/static/images/favicons/apple-icon-57x57.png">
+        <link rel="apple-touch-icon" sizes="60x60" href="/static/images/favicons/apple-icon-60x60.png">
+        <link rel="apple-touch-icon" sizes="72x72" href="/static/images/favicons/apple-icon-72x72.png">
+        <link rel="apple-touch-icon" sizes="76x76" href="/static/images/favicons/apple-icon-76x76.png">
+        <link rel="apple-touch-icon" sizes="114x114" href="/static/images/favicons/apple-icon-114x114.png">
+        <link rel="apple-touch-icon" sizes="120x120" href="/static/images/favicons/apple-icon-120x120.png">
+        <link rel="apple-touch-icon" sizes="144x144" href="/static/images/favicons/apple-icon-144x144.png">
+        <link rel="apple-touch-icon" sizes="152x152" href="/static/images/favicons/apple-icon-152x152.png">
+        <link rel="apple-touch-icon" sizes="180x180" href="/static/images/favicons/apple-icon-180x180.png">
+        <link rel="icon" type="image/png" sizes="192x192"  href="/static/images/favicons/android-icon-192x192.png">
+        <link rel="icon" type="image/png" sizes="32x32" href="/static/images/favicons/favicon-32x32.png">
+        <link rel="icon" type="image/png" sizes="96x96" href="/static/images/favicons/favicon-96x96.png">
+        <link rel="icon" type="image/png" sizes="16x16" href="/static/images/favicons/favicon-16x16.png">
+        <meta name="msapplication-TileColor" content="#000000">
+        <meta name="msapplication-TileImage" content="/static/images/favicons/ms-icon-144x144.png">
+        <meta name="theme-color" content="#000000">
+
+        <title>WorkAdventure PWA</title>
+
+        <style>
+            body{
+                font-family: Whitney, Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+            }
+            body img{
+                position: absolute;
+                top: calc( 50% - 25px);
+                height: 59px;
+                width: 307px;
+                left: calc( 50% - 150px);
+            }
+            body p{
+                position: absolute;
+                text-align: center;
+                top: calc( 50% + 50px);
+                left: calc( 50% - 150px);
+                height: 59px;
+                width: 307px;
+                font-size: 20px;
+            }
+        </style>
+    </head>
+    <body>
+        <img src="/static/images/logo.png" alt="WorkAdventure logo"/>
+        <p>Charging your workspace ...</p>
+    <script>
+        setTimeout(() => {
+            window.location = localStorage.getItem('lastRoomUrl');
+        }, 4000);
+    </script>
+    </body>
+</html>
--- a/front/dist/resources/service-worker.js
+++ b/front/dist/resources/service-worker.js
@ -48,6 +48,14 @@ self.addEventListener('fetch', function(event) {
    );
 });

-self.addEventListener('activate', function(event) {
-    //TODO activate service worker
+self.addEventListener('wait', function(event) {
+    //TODO wait
+});
+
+self.addEventListener('update', function(event) {
+    //TODO update
+});
+
+self.addEventListener('beforeinstallprompt', (e) => {
+    //TODO change prompt
 });
--- a/front/dist/static/images/favicons/manifest.json
+++ b/front/dist/static/images/favicons/manifest.json
@ -128,11 +128,12 @@
            "type": "image\/png"
        }
    ],
-    "start_url": "/",
+    "start_url": "/resources/service-worker.html",
    "background_color": "#000000",
    "display_override": ["window-control-overlay", "minimal-ui"],
    "display": "standalone",
-    "scope": "/",
+    "orientation": "portrait-primary",
+    "scope": "/resources/",
    "lang": "en",
    "theme_color": "#000000",
    "shortcuts": [
--- a/front/package.json
+++ b/front/package.json
@ -10,6 +10,7 @@
    "@types/mini-css-extract-plugin": "^1.4.3",
    "@types/node": "^15.3.0",
    "@types/quill": "^1.3.7",
+    "@types/uuidv4": "^5.0.0",
    "@types/webpack-dev-server": "^3.11.4",
    "@typescript-eslint/eslint-plugin": "^4.23.0",
    "@typescript-eslint/parser": "^4.23.0",
@ -53,7 +54,8 @@
    "rxjs": "^6.6.3",
    "simple-peer": "^9.11.0",
    "socket.io-client": "^2.3.0",
-    "standardized-audio-context": "^25.2.4"
+    "standardized-audio-context": "^25.2.4",
+    "uuidv4": "^6.2.10"
  },
  "scripts": {
    "start": "run-p templater serve svelte-check-watch",
--- a/front/src/Components/App.svelte
+++ b/front/src/Components/App.svelte
@ -27,6 +27,8 @@
    import {gameOverlayVisibilityStore} from "../Stores/GameOverlayStoreVisibility";
    import {consoleGlobalMessageManagerVisibleStore} from "../Stores/ConsoleGlobalMessageManagerStore";
    import ConsoleGlobalMessageManager from "./ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte";
+    import {warningContainerStore} from "../Stores/MenuStore";
+    import WarningContainer from "./WarningContainer/WarningContainer.svelte";

    export let game: Game;

@ -91,4 +93,7 @@
    {#if $chatVisibilityStore}
        <Chat></Chat>
    {/if}
+    {#if $warningContainerStore}
+        <WarningContainer></WarningContainer>
+    {/if}
 </div>
--- a/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte
+++ b/front/src/Components/ConsoleGlobalMessageManager/ConsoleGlobalMessageManager.svelte
@ -1,12 +1,27 @@
 <script lang="typescript">
+    import { fly } from 'svelte/transition';
    import InputTextGlobalMessage from "./InputTextGlobalMessage.svelte";
    import UploadAudioGlobalMessage from "./UploadAudioGlobalMessage.svelte";
    import { gameManager } from "../../Phaser/Game/GameManager";
    import type { Game } from "../../Phaser/Game/Game";
+    import { consoleGlobalMessageManagerVisibleStore } from "../../Stores/ConsoleGlobalMessageManagerStore";

    export let game: Game;
    let inputSendTextActive = true;
    let uploadMusicActive = false;
+    let handleSendText: { sendTextMessage(): void };
+    let handleSendAudio: { sendAudioMessage(): Promise<void> };
+    let broadcastToWorld = false;
+
+    function closeConsoleGlobalMessage() {
+        consoleGlobalMessageManagerVisibleStore.set(false)
+    }
+
+    function onKeyDown(e:KeyboardEvent) {
+        if (e.key === 'Escape') {
+            closeConsoleGlobalMessage();
+        }
+    }

    function inputSendTextActivate() {
        inputSendTextActive = true;
@ -17,28 +32,121 @@
        uploadMusicActive = true;
        inputSendTextActive = false;
    }
+
+    function send() {
+        if (inputSendTextActive) {
+            handleSendText.sendTextMessage();
+        }
+        if (uploadMusicActive) {
+            handleSendAudio.sendAudioMessage();
+        }
+    }
 </script>

+<svelte:window on:keydown={onKeyDown}/>

-<div class="main-console nes-container is-rounded">
-<!--    <div class="console nes-container is-rounded">
-       <img class="btn-close" src="resources/logos/send-yellow.svg" alt="Close">
-    </div>-->
-    <div class="main-global-message">
-        <h2> Global Message </h2>
-        <div class="global-message">
-            <div class="menu">
-                <button class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={inputSendTextActivate}>Message</button>
-                <button class="nes-btn {uploadMusicActive ? 'is-disabled' : ''}" on:click|preventDefault={inputUploadMusicActivate}>Audio</button>
+<div class="console-global-message">
+    <div class="menu-console-global-message nes-container is-rounded" transition:fly="{{ x: -1000, duration: 500 }}">
+        <button type="button" class="nes-btn {inputSendTextActive ? 'is-disabled' : ''}" on:click|preventDefault={inputSendTextActivate}>Message</button>
+        <button type="button" class="nes-btn {uploadMusicActive ? 'is-disabled' : ''}" on:click|preventDefault={inputUploadMusicActivate}>Audio</button>
    </div>
-            <div class="main-input">
+    <div class="main-console-global-message nes-container is-rounded" transition:fly="{{ y: -1000, duration: 500 }}">
+        <div class="title-console-global-message">
+            <h2>Global Message</h2>
+            <button type="button" class="nes-btn is-error" on:click|preventDefault={closeConsoleGlobalMessage}><i class="nes-icon close is-small"></i></button>
+        </div>
+        <div class="content-console-global-message">
            {#if inputSendTextActive}
-                    <InputTextGlobalMessage game={game} gameManager={gameManager}></InputTextGlobalMessage>
+                <InputTextGlobalMessage game={game} gameManager={gameManager} bind:handleSending={handleSendText}/>
            {/if}
            {#if uploadMusicActive}
-                    <UploadAudioGlobalMessage game={game} gameManager={gameManager}></UploadAudioGlobalMessage>
+                <UploadAudioGlobalMessage game={game} gameManager={gameManager} bind:handleSending={handleSendAudio}/>
            {/if}
        </div>
+        <div class="footer-console-global-message">
+            <label>
+                <input type="checkbox" class="nes-checkbox is-dark nes-pointer" bind:checked={broadcastToWorld}>
+                <span>Broadcast to all rooms of the world</span>
+            </label>
+            <button class="nes-btn is-primary" on:click|preventDefault={send}>Send</button>
        </div>
    </div>
 </div>
+
+
+
+<style lang="scss">
+
+  .nes-container {
+    padding: 0 5px;
+  }
+
+  div.console-global-message {
+    top: 20vh;
+    width: 50vw;
+    height: 50vh;
+    position: relative;
+
+    display: flex;
+    flex-direction: row;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 0;
+
+    pointer-events: auto;
+
+    div.menu-console-global-message {
+      flex: 1 1 auto;
+      max-width: 180px;
+
+      text-align: center;
+      background-color: #333333;
+
+      button {
+        width: 136px;
+        margin-bottom: 10px;
+      }
+    }
+
+    div.main-console-global-message {
+      flex: 1 1 auto;
+      display: flex;
+      flex-direction: column;
+
+      background-color: #333333;
+
+      div.title-console-global-message {
+        flex: 0 0 auto;
+        height: 50px;
+        margin-bottom: 10px;
+
+        text-align: center;
+        color: whitesmoke;
+
+        .nes-btn {
+          position: absolute;
+          top: 0;
+          right: 0;
+        }
+      }
+
+      div.content-console-global-message {
+        flex: 1 1 auto;
+        max-height: calc(100% - 120px);
+      }
+
+      div.footer-console-global-message {
+        height: 50px;
+        margin-top: 10px;
+        text-align: center;
+
+        label {
+          margin: 0;
+          position: absolute;
+          left: 0;
+          max-width: 30%;
+        }
+      }
+    }
+  }
+</style>
--- a/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte
+++ b/front/src/Components/ConsoleGlobalMessageManager/InputTextGlobalMessage.svelte
@ -6,10 +6,9 @@
    import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
    import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
    import type { Quill } from "quill";
-    import {LoginSceneName} from "../../Phaser/Login/LoginScene";

    //toolbar
-    export const toolbarOptions = [
+    const toolbarOptions = [
        ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
        ['blockquote', 'code-block'],

@ -35,12 +34,31 @@
    export let game: Game;
    export let gameManager: GameManager;

-    let gameScene = gameManager.getCurrentGameScene(game.scene.getScene(LoginSceneName));
+    let gameScene = gameManager.getCurrentGameScene(game.findAnyScene());
    let quill: Quill;
    let INPUT_CONSOLE_MESSAGE: HTMLDivElement;

    const MESSAGE_TYPE = AdminMessageEventTypes.admin;

+    export const handleSending = {
+        sendTextMessage() {
+            if (gameScene == undefined) {
+                return;
+            }
+            const text = quill.getText(0, quill.getLength());
+
+            const GlobalMessage: PlayGlobalMessageInterface = {
+                id: "1", // FIXME: use another ID?
+                message: text,
+                type: MESSAGE_TYPE
+            };
+
+            quill.deleteText(0, quill.getLength());
+            gameScene.connection?.emitGlobalMessage(GlobalMessage);
+            disableConsole();
+        }
+    }
+
    //Quill
    onMount(async () => {

@ -48,6 +66,7 @@
        const {default: Quill} = await import("quill"); // eslint-disable-line @typescript-eslint/no-explicit-any

        quill = new Quill(INPUT_CONSOLE_MESSAGE, {
+            placeholder: 'Enter your message here...',
            theme: 'snow',
            modules: {
                toolbar: toolbarOptions
@ -66,31 +85,10 @@
        consoleGlobalMessageManagerVisibleStore.set(false);
        consoleGlobalMessageManagerFocusStore.set(false);
    }
-
-    function SendTextMessage() {
-        if (gameScene == undefined) {
-            return;
-        }
-        const text = quill.getText(0, quill.getLength());
-
-        const GlobalMessage: PlayGlobalMessageInterface = {
-            id: "1", // FIXME: use another ID?
-            message: text,
-            type: MESSAGE_TYPE
-        };
-
-        quill.deleteText(0, quill.getLength());
-        gameScene.connection?.emitGlobalMessage(GlobalMessage);
-        disableConsole();
-    }
 </script>

-
 <section class="section-input-send-text">
    <div class="input-send-text" bind:this={INPUT_CONSOLE_MESSAGE}></div>
-    <div class="btn-action">
-        <button class="nes-btn is-primary" on:click|preventDefault={SendTextMessage}>Send</button>
-    </div>
 </section>


--- a/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte
+++ b/front/src/Components/ConsoleGlobalMessageManager/UploadAudioGlobalMessage.svelte
@ -6,7 +6,6 @@
    import { AdminMessageEventTypes } from "../../Connexion/AdminMessagesService";
    import type { PlayGlobalMessageInterface } from "../../Connexion/ConnexionModels";
    import uploadFile from "../images/music-file.svg";
-    import {LoginSceneName} from "../../Phaser/Login/LoginScene";

    interface EventTargetFiles extends EventTarget {
        files: Array<File>;
@ -15,23 +14,23 @@
    export let game: Game;
    export let gameManager: GameManager;

-    let gameScene = gameManager.getCurrentGameScene(game.scene.getScene(LoginSceneName));
-    let fileinput: HTMLInputElement;
-    let filename: string;
-    let filesize: string;
-    let errorfile: boolean;
+    let gameScene = gameManager.getCurrentGameScene(game.findAnyScene());
+    let fileInput: HTMLInputElement;
+    let fileName: string;
+    let fileSize: string;
+    let errorFile: boolean;

    const AUDIO_TYPE = AdminMessageEventTypes.audio;

-
-    async function SendAudioMessage() {
+    export const handleSending = {
+        async sendAudioMessage() {
            if (gameScene == undefined) {
                return;
            }
            const inputAudio = HtmlUtils.getElementByIdOrFail<HTMLInputElement>("input-send-audio");
            const selectedFile = inputAudio.files ? inputAudio.files[0] : null;
            if (!selectedFile) {
-            errorfile = true;
+                errorFile = true;
                throw 'no file selected';
            }

@ -48,6 +47,7 @@
            gameScene.connection?.emitGlobalMessage(GlobalMessage);
            disableConsole();
        }
+    }

    function inputAudioFile(event: Event) {
        const eventTarget : EventTargetFiles = (event.target as EventTargetFiles);
@ -60,9 +60,9 @@
            return;
        }

-        filename = file.name;
-        filesize = getFileSize(file.size);
-        errorfile = false;
+        fileName = file.name;
+        fileSize = getFileSize(file.size);
+        errorFile = false;
    }

    function getFileSize(number: number) {
@ -85,46 +85,46 @@


 <section class="section-input-send-audio">
-    <div class="input-send-audio">
-        <img src="{uploadFile}" alt="Upload a file" on:click|preventDefault={ () => {fileinput.click();}}>
-        {#if filename != undefined}
-            <label for="input-send-audio">{filename} : {filesize}</label>
+    <img class="nes-pointer" src="{uploadFile}" alt="Upload a file" on:click|preventDefault={ () => {fileInput.click();}}>
+    {#if fileName !== undefined}
+        <p>{fileName} : {fileSize}</p>
    {/if}
-        {#if errorfile}
+    {#if errorFile}
        <p class="err">No file selected. You need to upload a file before sending it.</p>
    {/if}
-        <input type="file" id="input-send-audio" bind:this={fileinput} on:change={(e) => {inputAudioFile(e)}}>
-    </div>
-    <div class="btn-action">
-        <button class="nes-btn is-primary" on:click|preventDefault={SendAudioMessage}>Send</button>
-    </div>
+    <input type="file" id="input-send-audio" bind:this={fileInput} on:change={(e) => {inputAudioFile(e)}}>
 </section>

 <style lang="scss">
-  //UploadAudioGlobalMessage
-  .section-input-send-audio {
-    margin: 10px;
-  }
+  section.section-input-send-audio {
+    display: flex;
+    flex-direction: column;

-  .section-input-send-audio .input-send-audio {
+    height: 100%;
    text-align: center;
+
+    img {
+      flex: 1 1 auto;
+
+      max-height: 80%;
+      margin-bottom: 20px;
    }

-  .section-input-send-audio #input-send-audio{
+    p {
+      flex: 1 1 auto;
+
+      margin-bottom: 5px;
+
+      color: whitesmoke;
+      font-size: 1rem;
+
+      &.err {
+        color: #ce372b;
+      }
+    }
+
+    input {
      display: none;
    }
-
-  .section-input-send-audio div.input-send-audio label{
-    color: white;
-  }
-
-  .section-input-send-audio div.input-send-audio p.err {
-    color: #ce372b;
-    text-align: center;
-  }
-
-  .section-input-send-audio div.input-send-audio img{
-    height: 150px;
-    cursor: url('../../../style/images/cursor_pointer.png'), pointer;
  }
 </style>
--- a/front/src/Components/WarningContainer/WarningContainer.svelte
+++ b/front/src/Components/WarningContainer/WarningContainer.svelte
@ -0,0 +1,37 @@
+<script lang="typescript">
+    import { fly } from 'svelte/transition';
+    import {userIsAdminStore} from "../../Stores/GameStore";
+    import {ADMIN_URL} from "../../Enum/EnvironmentVariable";
+    
+    const upgradeLink = ADMIN_URL+'/pricing';
+    
+</script>
+
+<main class="warningMain" transition:fly="{{ y: -200, duration: 500 }}">
+    <h2>Warning!</h2>
+    {#if $userIsAdminStore}
+        <p>This world is close to its limit!. You can upgrade its capacity <a href="{upgradeLink}" target="_blank">here</a></p>
+    {:else}
+        <p>This world is close to its limit!</p>
+    {/if}    
+        
+</main>
+
+<style lang="scss">
+  main.warningMain {
+    pointer-events: auto;
+    width: 100vw;
+    background-color: red;
+    text-align: center;
+    position: absolute;
+    left: 50%;
+    transform: translate(-50%, 0);
+    font-family: Lato;
+    min-width: 300px;
+    opacity: 0.9;
+    z-index: 2;
+        h2 {
+          padding: 5px;
+        }
+    }
+</style>
--- a/front/src/Connexion/ConnectionManager.ts
+++ b/front/src/Connexion/ConnectionManager.ts
@ -6,6 +6,7 @@ import { GameConnexionTypes, urlManager } from "../Url/UrlManager";
 import { localUserStore } from "./LocalUserStore";
 import { CharacterTexture, LocalUser } from "./LocalUser";
 import { Room } from "./Room";
+import { _ServiceWorker } from "../Network/ServiceWorker";

 class ConnectionManager {
    private localUser!: LocalUser;
@ -13,6 +14,9 @@ class ConnectionManager {
    private connexionType?: GameConnexionTypes;
    private reconnectingTimeout: NodeJS.Timeout | null = null;
    private _unloading: boolean = false;
+    private authToken: string | null = null;
+
+    private serviceWorker?: _ServiceWorker;

    get unloading() {
        return this._unloading;
@ -24,23 +28,58 @@ class ConnectionManager {
            if (this.reconnectingTimeout) clearTimeout(this.reconnectingTimeout);
        });
    }
+
+    public loadOpenIDScreen() {
+        localUserStore.setAuthToken(null);
+        const state = localUserStore.generateState();
+        const nonce = localUserStore.generateNonce();
+        window.location.assign(`http://${PUSHER_URL}/login-screen?state=${state}&nonce=${nonce}`);
+    }
+
+    public logout() {
+        localUserStore.setAuthToken(null);
+        window.location.reload();
+    }
+
    /**
     * Tries to login to the node server and return the starting map url to be loaded
     */
    public async initGameConnexion(): Promise<Room> {
        const connexionType = urlManager.getGameConnexionType();
        this.connexionType = connexionType;
-        if (connexionType === GameConnexionTypes.register) {
+        let room: Room | null = null;
+        if (connexionType === GameConnexionTypes.jwt) {
+            const urlParams = new URLSearchParams(window.location.search);
+            const code = urlParams.get("code");
+            const state = urlParams.get("state");
+            if (!state || !localUserStore.verifyState(state)) {
+                throw "Could not validate state!";
+            }
+            if (!code) {
+                throw "No Auth code provided";
+            }
+            const nonce = localUserStore.getNonce();
+            const { authToken } = await Axios.get(`${PUSHER_URL}/login-callback`, { params: { code, nonce } }).then(
+                (res) => res.data
+            );
+            localUserStore.setAuthToken(authToken);
+            this.authToken = authToken;
+            room = await Room.createRoom(new URL(localUserStore.getLastRoomUrl()));
+            urlManager.pushRoomIdToUrl(room);
+        } else if (connexionType === GameConnexionTypes.register) {
+            //@deprecated
            const organizationMemberToken = urlManager.getOrganizationToken();
            const data = await Axios.post(`${PUSHER_URL}/register`, { organizationMemberToken }).then(
                (res) => res.data
            );
-            this.localUser = new LocalUser(data.userUuid, data.authToken, data.textures);
+            this.localUser = new LocalUser(data.userUuid, data.textures);
+            this.authToken = data.authToken;
            localUserStore.saveUser(this.localUser);
+            localUserStore.setAuthToken(this.authToken);

            const roomUrl = data.roomUrl;

-            const room = await Room.createRoom(
+            room = await Room.createRoom(
                new URL(
                    window.location.protocol +
                        "//" +
@ -51,30 +90,17 @@ class ConnectionManager {
                )
            );
            urlManager.pushRoomIdToUrl(room);
-            return Promise.resolve(room);
        } else if (
            connexionType === GameConnexionTypes.organization ||
            connexionType === GameConnexionTypes.anonymous ||
            connexionType === GameConnexionTypes.empty
        ) {
-            let localUser = localUserStore.getLocalUser();
-            if (localUser && localUser.jwtToken && localUser.uuid && localUser.textures) {
-                this.localUser = localUser;
-                try {
-                    await this.verifyToken(localUser.jwtToken);
-                } catch (e) {
-                    // If the token is invalid, let's generate an anonymous one.
-                    console.error("JWT token invalid. Did it expire? Login anonymously instead.");
+            this.authToken = localUserStore.getAuthToken();
+            //todo: add here some kind of warning if authToken has expired.
+            if (!this.authToken) {
                await this.anonymousLogin();
            }
-            } else {
-                await this.anonymousLogin();
-            }
-
-            localUser = localUserStore.getLocalUser();
-            if (!localUser) {
-                throw "Error to store local user data";
-            }
+            this.localUser = localUserStore.getLocalUser() as LocalUser; //if authToken exist in localStorage then localUser cannot be null

            let roomPath: string;
            if (connexionType === GameConnexionTypes.empty) {
@ -90,44 +116,44 @@ class ConnectionManager {
            }

            //get detail map for anonymous login and set texture in local storage
-            const room = await Room.createRoom(new URL(roomPath));
+            room = await Room.createRoom(new URL(roomPath));
            if (room.textures != undefined && room.textures.length > 0) {
                //check if texture was changed
-                if (localUser.textures.length === 0) {
-                    localUser.textures = room.textures;
+                if (this.localUser.textures.length === 0) {
+                    this.localUser.textures = room.textures;
                } else {
                    room.textures.forEach((newTexture) => {
-                        const alreadyExistTexture = localUser?.textures.find((c) => newTexture.id === c.id);
-                        if (localUser?.textures.findIndex((c) => newTexture.id === c.id) !== -1) {
+                        const alreadyExistTexture = this.localUser.textures.find((c) => newTexture.id === c.id);
+                        if (this.localUser.textures.findIndex((c) => newTexture.id === c.id) !== -1) {
                            return;
                        }
-                        localUser?.textures.push(newTexture);
+                        this.localUser.textures.push(newTexture);
                    });
                }
-                this.localUser = localUser;
-                localUserStore.saveUser(localUser);
+                localUserStore.saveUser(this.localUser);
            }
-            return Promise.resolve(room);
        }
-
+        if (room == undefined) {
            return Promise.reject(new Error("Invalid URL"));
        }

-    private async verifyToken(token: string): Promise<void> {
-        await Axios.get(`${PUSHER_URL}/verify`, { params: { token } });
+        this.serviceWorker = new _ServiceWorker();
+        return Promise.resolve(room);
    }

    public async anonymousLogin(isBenchmark: boolean = false): Promise<void> {
        const data = await Axios.post(`${PUSHER_URL}/anonymLogin`).then((res) => res.data);
-        this.localUser = new LocalUser(data.userUuid, data.authToken, []);
+        this.localUser = new LocalUser(data.userUuid, []);
+        this.authToken = data.authToken;
        if (!isBenchmark) {
            // In benchmark, we don't have a local storage.
            localUserStore.saveUser(this.localUser);
+            localUserStore.setAuthToken(this.authToken);
        }
    }

    public initBenchmark(): void {
-        this.localUser = new LocalUser("", "test", []);
+        this.localUser = new LocalUser("", []);
    }

    public connectToRoomSocket(
@ -140,7 +166,7 @@ class ConnectionManager {
    ): Promise<OnConnectInterface> {
        return new Promise<OnConnectInterface>((resolve, reject) => {
            const connection = new RoomConnection(
-                this.localUser.jwtToken,
+                this.authToken,
                roomUrl,
                name,
                characterLayers,
@ -148,6 +174,7 @@ class ConnectionManager {
                viewport,
                companion
            );
+
            connection.onConnectError((error: object) => {
                console.log("An error occurred while connecting to socket server. Retrying");
                reject(error);
@ -166,6 +193,9 @@ class ConnectionManager {
            });

            connection.onConnect((connect: OnConnectInterface) => {
+                //save last room url connected
+                localUserStore.setLastRoomUrl(roomUrl);
+
                resolve(connect);
            });
        }).catch((err) => {
--- a/front/src/Connexion/LocalUser.ts
+++ b/front/src/Connexion/LocalUser.ts
@ -1,10 +1,10 @@
 import { MAX_USERNAME_LENGTH } from "../Enum/EnvironmentVariable";

 export interface CharacterTexture {
-    id: number,
-    level: number,
-    url: string,
-    rights: string
+    id: number;
+    level: number;
+    url: string;
+    rights: string;
 }

 export const maxUserNameLength: number = MAX_USERNAME_LENGTH;
@ -24,6 +24,5 @@ export function areCharacterLayersValid(value: string[] | null): boolean {
 }

 export class LocalUser {
-    constructor(public readonly uuid:string, public readonly jwtToken: string, public textures: CharacterTexture[]) {
-    }
+    constructor(public readonly uuid: string, public textures: CharacterTexture[]) {}
 }
--- a/front/src/Connexion/LocalUserStore.ts
+++ b/front/src/Connexion/LocalUserStore.ts
@ -1,23 +1,28 @@
 import { areCharacterLayersValid, isUserNameValid, LocalUser } from "./LocalUser";
+import { v4 as uuidv4 } from "uuid";

-const playerNameKey =           'playerName';
-const selectedPlayerKey =       'selectedPlayer';
-const customCursorPositionKey = 'customCursorPosition';
-const characterLayersKey =      'characterLayers';
-const companionKey =            'companion';
-const gameQualityKey =          'gameQuality';
-const videoQualityKey =         'videoQuality';
-const audioPlayerVolumeKey =    'audioVolume';
-const audioPlayerMuteKey =      'audioMute';
-const helpCameraSettingsShown = 'helpCameraSettingsShown';
-const fullscreenKey =           'fullscreen';
+const playerNameKey = "playerName";
+const selectedPlayerKey = "selectedPlayer";
+const customCursorPositionKey = "customCursorPosition";
+const characterLayersKey = "characterLayers";
+const companionKey = "companion";
+const gameQualityKey = "gameQuality";
+const videoQualityKey = "videoQuality";
+const audioPlayerVolumeKey = "audioVolume";
+const audioPlayerMuteKey = "audioMute";
+const helpCameraSettingsShown = "helpCameraSettingsShown";
+const fullscreenKey = "fullscreen";
+const lastRoomUrl = "lastRoomUrl";
+const authToken = "authToken";
+const state = "state";
+const nonce = "nonce";

 class LocalUserStore {
    saveUser(localUser: LocalUser) {
-        localStorage.setItem('localUser', JSON.stringify(localUser));
+        localStorage.setItem("localUser", JSON.stringify(localUser));
    }
    getLocalUser(): LocalUser | null {
-        const data = localStorage.getItem('localUser');
+        const data = localStorage.getItem("localUser");
        return data ? JSON.parse(data) : null;
    }

@ -25,21 +30,21 @@ class LocalUserStore {
        localStorage.setItem(playerNameKey, name);
    }
    getName(): string | null {
-        const value = localStorage.getItem(playerNameKey) || '';
+        const value = localStorage.getItem(playerNameKey) || "";
        return isUserNameValid(value) ? value : null;
    }

    setPlayerCharacterIndex(playerCharacterIndex: number): void {
-        localStorage.setItem(selectedPlayerKey, ''+playerCharacterIndex);
+        localStorage.setItem(selectedPlayerKey, "" + playerCharacterIndex);
    }
    getPlayerCharacterIndex(): number {
-        return parseInt(localStorage.getItem(selectedPlayerKey) || '');
+        return parseInt(localStorage.getItem(selectedPlayerKey) || "");
    }

    setCustomCursorPosition(activeRow: number, selectedLayers: number[]): void {
        localStorage.setItem(customCursorPositionKey, JSON.stringify({ activeRow, selectedLayers }));
    }
-    getCustomCursorPosition(): {activeRow:number, selectedLayers:number[]}|null  {
+    getCustomCursorPosition(): { activeRow: number; selectedLayers: number[] } | null {
        return JSON.parse(localStorage.getItem(customCursorPositionKey) || "null");
    }

@ -68,45 +73,82 @@ class LocalUserStore {
    }

    setGameQualityValue(value: number): void {
-        localStorage.setItem(gameQualityKey, '' + value);
+        localStorage.setItem(gameQualityKey, "" + value);
    }
    getGameQualityValue(): number {
-        return parseInt(localStorage.getItem(gameQualityKey) || '60');
+        return parseInt(localStorage.getItem(gameQualityKey) || "60");
    }

    setVideoQualityValue(value: number): void {
-        localStorage.setItem(videoQualityKey, '' + value);
+        localStorage.setItem(videoQualityKey, "" + value);
    }
    getVideoQualityValue(): number {
-        return parseInt(localStorage.getItem(videoQualityKey) || '20');
+        return parseInt(localStorage.getItem(videoQualityKey) || "20");
    }

    setAudioPlayerVolume(value: number): void {
-        localStorage.setItem(audioPlayerVolumeKey, '' + value);
+        localStorage.setItem(audioPlayerVolumeKey, "" + value);
    }
    getAudioPlayerVolume(): number {
-        return parseFloat(localStorage.getItem(audioPlayerVolumeKey) || '1');
+        return parseFloat(localStorage.getItem(audioPlayerVolumeKey) || "1");
    }

    setAudioPlayerMuted(value: boolean): void {
        localStorage.setItem(audioPlayerMuteKey, value.toString());
    }
    getAudioPlayerMuted(): boolean {
-        return localStorage.getItem(audioPlayerMuteKey) === 'true';
+        return localStorage.getItem(audioPlayerMuteKey) === "true";
    }

    setHelpCameraSettingsShown(): void {
-        localStorage.setItem(helpCameraSettingsShown, '1');
+        localStorage.setItem(helpCameraSettingsShown, "1");
    }
    getHelpCameraSettingsShown(): boolean {
-        return localStorage.getItem(helpCameraSettingsShown) === '1';
+        return localStorage.getItem(helpCameraSettingsShown) === "1";
    }

    setFullscreen(value: boolean): void {
        localStorage.setItem(fullscreenKey, value.toString());
    }
    getFullscreen(): boolean {
-        return localStorage.getItem(fullscreenKey) === 'true';
+        return localStorage.getItem(fullscreenKey) === "true";
+    }
+
+    setLastRoomUrl(roomUrl: string): void {
+        localStorage.setItem(lastRoomUrl, roomUrl.toString());
+    }
+    getLastRoomUrl(): string {
+        return localStorage.getItem(lastRoomUrl) ?? "";
+    }
+
+    setAuthToken(value: string | null) {
+        value ? localStorage.setItem(authToken, value) : localStorage.removeItem(authToken);
+    }
+    getAuthToken(): string | null {
+        return localStorage.getItem(authToken);
+    }
+
+    generateState(): string {
+        const newState = uuidv4();
+        localStorage.setItem(state, newState);
+        return newState;
+    }
+
+    verifyState(value: string): boolean {
+        const oldValue = localStorage.getItem(state);
+        localStorage.removeItem(state);
+        return oldValue === value;
+    }
+    generateNonce(): string {
+        const newNonce = uuidv4();
+        localStorage.setItem(nonce, newNonce);
+        return newNonce;
+    }
+
+    getNonce(): string | null {
+        const oldValue = localStorage.getItem(nonce);
+        localStorage.removeItem(nonce);
+        return oldValue;
    }
 }

--- a/front/src/Connexion/RoomConnection.ts
+++ b/front/src/Connexion/RoomConnection.ts
@ -32,7 +32,8 @@ import {
    EmotePromptMessage,
    SendUserMessage,
    BanUserMessage,
-    VariableMessage, ErrorMessage,
+    VariableMessage,
+    ErrorMessage,
 } from "../Messages/generated/messages_pb";

 import type { UserSimplePeerInterface } from "../WebRtc/SimplePeer";
@ -54,9 +55,9 @@ import {
 import type { BodyResourceDescriptionInterface } from "../Phaser/Entity/PlayerTextures";
 import { adminMessagesService } from "./AdminMessagesService";
 import { worldFullMessageStream } from "./WorldFullMessageStream";
-import { worldFullWarningStream } from "./WorldFullWarningStream";
 import { connectionManager } from "./ConnectionManager";
 import { emoteEventStream } from "./EmoteEventStream";
+import { warningContainerStore } from "../Stores/MenuStore";

 const manualPingDelay = 20000;

@ -75,7 +76,7 @@ export class RoomConnection implements RoomConnection {

    /**
     *
-     * @param token A JWT token containing the UUID of the user
+     * @param token A JWT token containing the email of the user
     * @param roomUrl The URL of the room in the form "https://example.com/_/[instance]/[map_url]" or "https://example.com/@/[org]/[event]/[map]"
     */
    public constructor(
@ -167,7 +168,7 @@ export class RoomConnection implements RoomConnection {
                        emoteEventStream.fire(emoteMessage.getActoruserid(), emoteMessage.getEmote());
                    } else if (subMessage.hasErrormessage()) {
                        const errorMessage = subMessage.getErrormessage() as ErrorMessage;
-                        console.error('An error occurred server side: '+errorMessage.getMessage());
+                        console.error("An error occurred server side: " + errorMessage.getMessage());
                    } else if (subMessage.hasVariablemessage()) {
                        event = EventMessage.SET_VARIABLE;
                        payload = subMessage.getVariablemessage();
@ -192,7 +193,14 @@ export class RoomConnection implements RoomConnection {
                    try {
                        variables.set(variable.getName(), JSON.parse(variable.getValue()));
                    } catch (e) {
-                        console.error('Unable to unserialize value received from server for variable "'+variable.getName()+'". Value received: "'+variable.getValue()+'". Error: ', e);
+                        console.error(
+                            'Unable to unserialize value received from server for variable "' +
+                                variable.getName() +
+                                '". Value received: "' +
+                                variable.getValue() +
+                                '". Error: ',
+                            e
+                        );
                    }
                }

@ -209,6 +217,9 @@ export class RoomConnection implements RoomConnection {
            } else if (message.hasWorldfullmessage()) {
                worldFullMessageStream.onMessage();
                this.closed = true;
+            } else if (message.hasTokenexpiredmessage()) {
+                connectionManager.loadOpenIDScreen();
+                this.closed = true; //technically, this isn't needed since loadOpenIDScreen() will do window.location.assign() but I prefer to leave it for consistency
            } else if (message.hasWorldconnexionmessage()) {
                worldFullMessageStream.onMessage(message.getWorldconnexionmessage()?.getMessage());
                this.closed = true;
@ -236,7 +247,7 @@ export class RoomConnection implements RoomConnection {
            } else if (message.hasBanusermessage()) {
                adminMessagesService.onSendusermessage(message.getBanusermessage() as BanUserMessage);
            } else if (message.hasWorldfullwarningmessage()) {
-                worldFullWarningStream.onMessage();
+                warningContainerStore.activateWarningContainer();
            } else if (message.hasRefreshroommessage()) {
                //todo: implement a way to notify the user the room was refreshed.
            } else {
@ -659,7 +670,14 @@ export class RoomConnection implements RoomConnection {
                try {
                    value = JSON.parse(serializedValue);
                } catch (e) {
-                    console.error('Unable to unserialize value received from server for variable "'+name+'". Value received: "'+serializedValue+'". Error: ', e);
+                    console.error(
+                        'Unable to unserialize value received from server for variable "' +
+                            name +
+                            '". Value received: "' +
+                            serializedValue +
+                            '". Error: ',
+                        e
+                    );
                }
            }
            callback(name, value);
--- a/front/src/Connexion/WorldFullWarningStream.ts
+++ b/front/src/Connexion/WorldFullWarningStream.ts
@ -1,14 +0,0 @@
-import {Subject} from "rxjs";
-
-class WorldFullWarningStream {
-
-    private _stream:Subject<void> = new Subject();
-    public stream = this._stream.asObservable();
-
-
-    onMessage() {
-        this._stream.next();
-    }
-}
-
-export const worldFullWarningStream = new WorldFullWarningStream();
--- a/front/src/Enum/EnvironmentVariable.ts
+++ b/front/src/Enum/EnvironmentVariable.ts
@ -1,22 +1,24 @@
 const DEBUG_MODE: boolean = process.env.DEBUG_MODE == "true";
-const START_ROOM_URL : string = process.env.START_ROOM_URL || '/_/global/maps.workadventure.localhost/Floor0/floor0.json';
-const PUSHER_URL = process.env.PUSHER_URL || '//pusher.workadventure.localhost';
-const UPLOADER_URL = process.env.UPLOADER_URL || '//uploader.workadventure.localhost';
+const START_ROOM_URL: string =
+    process.env.START_ROOM_URL || "/_/global/maps.workadventure.localhost/Floor1/floor1.json";
+const PUSHER_URL = process.env.PUSHER_URL || "//pusher.workadventure.localhost";
+export const ADMIN_URL = process.env.ADMIN_URL || "//workadventu.re";
+const UPLOADER_URL = process.env.UPLOADER_URL || "//uploader.workadventure.localhost";
 const STUN_SERVER: string = process.env.STUN_SERVER || "stun:stun.l.google.com:19302";
 const TURN_SERVER: string = process.env.TURN_SERVER || "";
 const SKIP_RENDER_OPTIMIZATIONS: boolean = process.env.SKIP_RENDER_OPTIMIZATIONS == "true";
 const DISABLE_NOTIFICATIONS: boolean = process.env.DISABLE_NOTIFICATIONS == "true";
-const TURN_USER: string = process.env.TURN_USER || '';
-const TURN_PASSWORD: string = process.env.TURN_PASSWORD || '';
-const JITSI_URL : string|undefined = (process.env.JITSI_URL === '') ? undefined : process.env.JITSI_URL;
+const TURN_USER: string = process.env.TURN_USER || "";
+const TURN_PASSWORD: string = process.env.TURN_PASSWORD || "";
+const JITSI_URL: string | undefined = process.env.JITSI_URL === "" ? undefined : process.env.JITSI_URL;
 const JITSI_PRIVATE_MODE: boolean = process.env.JITSI_PRIVATE_MODE == "true";
 const POSITION_DELAY = 200; // Wait 200ms between sending position events
 const MAX_EXTRAPOLATION_TIME = 100; // Extrapolate a maximum of 250ms if no new movement is sent by the player
-export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || '') || 8;
-export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || '4');
-export const DISPLAY_TERMS_OF_USE = process.env.DISPLAY_TERMS_OF_USE == 'true';
+export const MAX_USERNAME_LENGTH = parseInt(process.env.MAX_USERNAME_LENGTH || "") || 8;
+export const MAX_PER_GROUP = parseInt(process.env.MAX_PER_GROUP || "4");
+export const DISPLAY_TERMS_OF_USE = process.env.DISPLAY_TERMS_OF_USE == "true";

-export const isMobile = ():boolean => ( ( window.innerWidth <= 800 ) || ( window.innerHeight <= 600 ) );
+export const isMobile = (): boolean => window.innerWidth <= 800 || window.innerHeight <= 600;

 export {
    DEBUG_MODE,
@ -32,5 +34,5 @@ export {
    TURN_USER,
    TURN_PASSWORD,
    JITSI_URL,
-    JITSI_PRIVATE_MODE
-}
+    JITSI_PRIVATE_MODE,
+};
--- a/front/src/Network/ServiceWorker.ts
+++ b/front/src/Network/ServiceWorker.ts
@ -0,0 +1,20 @@
+export class _ServiceWorker {
+    constructor() {
+        if ("serviceWorker" in navigator) {
+            this.init();
+        }
+    }
+
+    init() {
+        window.addEventListener("load", () => {
+            navigator.serviceWorker
+                .register("/resources/service-worker.js")
+                .then((serviceWorker) => {
+                    console.info("Service Worker registered: ", serviceWorker);
+                })
+                .catch((error) => {
+                    console.error("Error registering the Service Worker: ", error);
+                });
+        });
+    }
+}
--- a/front/src/Phaser/Components/TextUtils.ts
+++ b/front/src/Phaser/Components/TextUtils.ts
@ -1,35 +1,43 @@
 import type { ITiledMapObject } from "../Map/ITiledMap";
 import type { GameScene } from "../Game/GameScene";
+import { type } from "os";

 export class TextUtils {
    public static createTextFromITiledMapObject(scene: GameScene, object: ITiledMapObject): void {
        if (object.text === undefined) {
-            throw new Error('This object has not textual representation.');
+            throw new Error("This object has not textual representation.");
        }
        const options: {
-            fontStyle?: string,
-            fontSize?: string,
-            fontFamily?: string,
-            color?: string,
-            align?: string,
+            fontStyle?: string;
+            fontSize?: string;
+            fontFamily?: string;
+            color?: string;
+            align?: string;
            wordWrap?: {
-                width: number,
-                useAdvancedWrap?: boolean
-            }
+                width: number;
+                useAdvancedWrap?: boolean;
+            };
        } = {};
        if (object.text.italic) {
-            options.fontStyle = 'italic';
+            options.fontStyle = "italic";
        }
        // Note: there is no support for "strikeout" and "underline"
        let fontSize: number = 16;
        if (object.text.pixelsize) {
            fontSize = object.text.pixelsize;
        }
-        options.fontSize = fontSize + 'px';
+        options.fontSize = fontSize + "px";
        if (object.text.fontfamily) {
            options.fontFamily = '"' + object.text.fontfamily + '"';
        }
-        let color = '#000000';
+        if (object.properties !== undefined) {
+            for (const property of object.properties) {
+                if (property.name === "font-family" && typeof property.value === "string") {
+                    options.fontFamily = property.value;
+                }
+            }
+        }
+        let color = "#000000";
        if (object.text.color !== undefined) {
            color = object.text.color;
        }
@ -38,7 +46,7 @@ export class TextUtils {
            options.wordWrap = {
                width: object.width,
                //useAdvancedWrap: true
-            }
+            };
        }
        if (object.text.halign !== undefined) {
            options.align = object.text.halign;
--- a/front/src/Phaser/Components/WarningContainer.ts
+++ b/front/src/Phaser/Components/WarningContainer.ts
@ -1,14 +0,0 @@
-
-export const warningContainerKey = 'warningContainer';
-export const warningContainerHtml = 'resources/html/warningContainer.html';
-
-export class WarningContainer extends Phaser.GameObjects.DOMElement {
-    
-    constructor(scene: Phaser.Scene) {
-        super(scene, 100, 0);
-        this.setOrigin(0, 0);
-        this.createFromCache(warningContainerKey);        
-        this.scene.add.existing(this);
-    }
-    
-}
--- a/front/src/Phaser/Game/Game.ts
+++ b/front/src/Phaser/Game/Game.ts
@ -14,10 +14,8 @@ const Events = Phaser.Core.Events;
 * It also automatically calls "onResize" on any scenes extending ResizableScene.
 */
 export class Game extends Phaser.Game {
-
    private _isDirty = false;

-
    constructor(GameConfig: Phaser.Types.Core.GameConfig) {
        super(GameConfig);

@ -27,7 +25,7 @@ export class Game extends Phaser.Game {
                    scene.onResize();
                }
            }
-        })
+        });

        /*window.addEventListener('resize', (event) => {
            // Let's trigger the onResize method of any active scene that is a ResizableScene
@ -39,11 +37,9 @@ export class Game extends Phaser.Game {
        });*/
    }

-    public step(time: number, delta: number)
-    {
+    public step(time: number, delta: number) {
        // @ts-ignore
-        if (this.pendingDestroy)
-        {
+        if (this.pendingDestroy) {
            // @ts-ignore
            return this.runDestroy();
        }
@ -100,15 +96,17 @@ export class Game extends Phaser.Game {
        }

        //  Loop through the scenes in forward order
-        for (let i = 0; i < this.scene.scenes.length; i++)
-        {
+        for (let i = 0; i < this.scene.scenes.length; i++) {
            const scene = this.scene.scenes[i];
            const sys = scene.sys;

-            if (sys.settings.visible && sys.settings.status >= Phaser.Scenes.LOADING && sys.settings.status < Phaser.Scenes.SLEEPING)
-            {
+            if (
+                sys.settings.visible &&
+                sys.settings.status >= Phaser.Scenes.LOADING &&
+                sys.settings.status < Phaser.Scenes.SLEEPING
+            ) {
                // @ts-ignore
-                if(typeof scene.isDirty === 'function') {
+                if (typeof scene.isDirty === "function") {
                    // @ts-ignore
                    const isDirty = scene.isDirty() || scene.tweens.getAllTweens().length > 0;
                    if (isDirty) {
@ -129,4 +127,11 @@ export class Game extends Phaser.Game {
    public markDirty(): void {
        this._isDirty = true;
    }
+
+    /**
+     * Return the first scene found in the game
+     */
+    public findAnyScene(): Phaser.Scene {
+        return this.scene.getScenes()[0];
+    }
 }
--- a/front/src/Phaser/Game/GameScene.ts
+++ b/front/src/Phaser/Game/GameScene.ts
@ -87,6 +87,7 @@ import { SharedVariablesManager } from "./SharedVariablesManager";
 import { playersStore } from "../../Stores/PlayersStore";
 import { chatVisibilityStore } from "../../Stores/ChatStore";
 import Tileset = Phaser.Tilemaps.Tileset;
+import { userIsAdminStore } from "../../Stores/GameStore";

 export interface GameSceneInitInterface {
    initPosition: PointInterface | null;
@ -605,6 +606,8 @@ export class GameScene extends DirtyScene {

                playersStore.connectToRoomConnection(this.connection);

+                userIsAdminStore.set(this.connection.hasTag("admin"));
+
                this.connection.onUserJoins((message: MessageUserJoined) => {
                    const userMessage: AddPlayerInterface = {
                        userId: message.userId,
--- a/front/src/Phaser/Menu/MenuScene.ts
+++ b/front/src/Phaser/Menu/MenuScene.ts
@ -6,8 +6,6 @@ import { localUserStore } from "../../Connexion/LocalUserStore";
 import { gameReportKey, gameReportRessource, ReportMenu } from "./ReportMenu";
 import { connectionManager } from "../../Connexion/ConnectionManager";
 import { GameConnexionTypes } from "../../Url/UrlManager";
-import { WarningContainer, warningContainerHtml, warningContainerKey } from "../Components/WarningContainer";
-import { worldFullWarningStream } from "../../Connexion/WorldFullWarningStream";
 import { menuIconVisible } from "../../Stores/MenuStore";
 import { videoConstraintStore } from "../../Stores/MediaStore";
 import { showReportScreenStore } from "../../Stores/ShowReportScreenStore";
@ -21,6 +19,7 @@ import { get } from "svelte/store";
 import { playersStore } from "../../Stores/PlayersStore";
 import { mediaManager } from "../../WebRtc/MediaManager";
 import { chatVisibilityStore } from "../../Stores/ChatStore";
+import { ADMIN_URL } from "../../Enum/EnvironmentVariable";

 export const MenuSceneName = "MenuScene";
 const gameMenuKey = "gameMenu";
@ -45,8 +44,6 @@ export class MenuScene extends Phaser.Scene {
    private gameQualityValue: number;
    private videoQualityValue: number;
    private menuButton!: Phaser.GameObjects.DOMElement;
-    private warningContainer: WarningContainer | null = null;
-    private warningContainerTimeout: NodeJS.Timeout | null = null;
    private subscriptions = new Subscription();
    constructor() {
        super({ key: MenuSceneName });
@ -91,7 +88,6 @@ export class MenuScene extends Phaser.Scene {
        this.load.html(gameSettingsMenuKey, "resources/html/gameQualityMenu.html");
        this.load.html(gameShare, "resources/html/gameShare.html");
        this.load.html(gameReportKey, gameReportRessource);
-        this.load.html(warningContainerKey, warningContainerHtml);
    }

    create() {
@ -147,7 +143,6 @@ export class MenuScene extends Phaser.Scene {
        this.menuElement.addListener("click");
        this.menuElement.on("click", this.onMenuClick.bind(this));

-        worldFullWarningStream.stream.subscribe(() => this.showWorldCapacityWarning());
        chatVisibilityStore.subscribe((v) => {
            this.menuButton.setVisible(!v);
        });
@ -194,20 +189,6 @@ export class MenuScene extends Phaser.Scene {
        });
    }

-    private showWorldCapacityWarning() {
-        if (!this.warningContainer) {
-            this.warningContainer = new WarningContainer(this);
-        }
-        if (this.warningContainerTimeout) {
-            clearTimeout(this.warningContainerTimeout);
-        }
-        this.warningContainerTimeout = setTimeout(() => {
-            this.warningContainer?.destroy();
-            this.warningContainer = null;
-            this.warningContainerTimeout = null;
-        }, 120000);
-    }
-
    private closeSideMenu(): void {
        if (!this.sideMenuOpened) return;
        this.sideMenuOpened = false;
@ -363,6 +344,9 @@ export class MenuScene extends Phaser.Scene {
            case "editGameSettingsButton":
                this.openGameSettingsMenu();
                break;
+            case "oidcLogin":
+                connectionManager.loadOpenIDScreen();
+                break;
            case "toggleFullscreen":
                this.toggleFullscreen();
                break;
@ -403,6 +387,10 @@ export class MenuScene extends Phaser.Scene {
    private gotToCreateMapPage() {
        //const sparkHost = 'https://'+window.location.host.replace('play.', '')+'/choose-map.html';
        //TODO fix me: this button can to send us on WorkAdventure BO.
+        //const sparkHost = ADMIN_URL + "/getting-started";
+
+        //The redirection must be only on workadventu.re domain
+        //To day the domain staging cannot be use by customer
        const sparkHost = "https://workadventu.re/getting-started";
        window.open(sparkHost, "_blank");
    }
--- a/front/src/Stores/GameStore.ts
+++ b/front/src/Stores/GameStore.ts
@ -3,3 +3,5 @@ import { writable } from "svelte/store";
 export const userMovingStore = writable(false);

 export const requestVisitCardsStore = writable<string | null>(null);
+
+export const userIsAdminStore = writable(false);
--- a/front/src/Stores/MenuStore.ts
+++ b/front/src/Stores/MenuStore.ts
@ -1,3 +1,23 @@
-import { derived, writable, Writable } from "svelte/store";
+import { writable } from "svelte/store";
+import Timeout = NodeJS.Timeout;

 export const menuIconVisible = writable(false);
+
+let warningContainerTimeout: Timeout | null = null;
+function createWarningContainerStore() {
+    const { subscribe, set } = writable<boolean>(false);
+
+    return {
+        subscribe,
+        activateWarningContainer() {
+            set(true);
+            if (warningContainerTimeout) clearTimeout(warningContainerTimeout);
+            warningContainerTimeout = setTimeout(() => {
+                set(false);
+                warningContainerTimeout = null;
+            }, 120000);
+        },
+    };
+}
+
+export const warningContainerStore = createWarningContainerStore();
--- a/front/src/Url/UrlManager.ts
+++ b/front/src/Url/UrlManager.ts
@ -6,21 +6,22 @@ export enum GameConnexionTypes {
    register,
    empty,
    unknown,
+    jwt,
 }

 //this class is responsible with analysing and editing the game's url
 class UrlManager {
-
-    //todo: use that to detect if we can find a token in localstorage
    public getGameConnexionType(): GameConnexionTypes {
        const url = window.location.pathname.toString();
-        if (url.includes('_/')) {
+        if (url === "/jwt") {
+            return GameConnexionTypes.jwt;
+        } else if (url.includes("_/")) {
            return GameConnexionTypes.anonymous;
-        } else if (url.includes('@/')) {
+        } else if (url.includes("@/")) {
            return GameConnexionTypes.organization;
-        } else if(url.includes('register/')) {
+        } else if (url.includes("register/")) {
            return GameConnexionTypes.register;
-        } else if(url === '/') {
+        } else if (url === "/") {
            return GameConnexionTypes.empty;
        } else {
            return GameConnexionTypes.unknown;
@ -36,7 +37,7 @@ class UrlManager {
        if (window.location.pathname === room.id) return;
        const hash = window.location.hash;
        const search = room.search.toString();
-        history.pushState({}, 'WorkAdventure', room.id+(search?'?'+search:'')+hash);
+        history.pushState({}, "WorkAdventure", room.id + (search ? "?" + search : "") + hash);
    }

    public getStartLayerNameFromUrl(): string | null {
--- a/front/src/index.ts
+++ b/front/src/index.ts
@ -162,16 +162,3 @@ const app = new App({
 });

 export default app;
-
-if ("serviceWorker" in navigator) {
-    window.addEventListener("load", function () {
-        navigator.serviceWorker
-            .register("/resources/service-worker.js")
-            .then((serviceWorker) => {
-                console.log("Service Worker registered: ", serviceWorker);
-            })
-            .catch((error) => {
-                console.error("Error registering the Service Worker: ", error);
-            });
-    });
-}
--- a/front/style/index.scss
+++ b/front/style/index.scss
@ -3,4 +3,4 @@
@import "style";
@import "mobile-style.scss";
@import "fonts.scss";
-@import "svelte-style.scss";
+@import "inputTextGlobalMessageSvelte-Style.scss";
--- a/front/style/inputTextGlobalMessageSvelte-Style.scss
+++ b/front/style/inputTextGlobalMessageSvelte-Style.scss
@ -0,0 +1,24 @@
+//InputTextGlobalMessage
+section.section-input-send-text {
+  height: 100%;
+
+  .ql-toolbar{
+    max-height: 100px;
+
+    background: whitesmoke;
+  }
+
+  div.input-send-text{
+    height: auto;
+    max-height: calc(100% - 100px);
+    overflow: auto;
+
+    color: whitesmoke;
+    font-size: 1rem;
+
+    .ql-editor.ql-blank::before {
+      color: whitesmoke;
+      font-size: 1rem;
+    }
+  }
+}
--- a/front/style/svelte-style.scss
+++ b/front/style/svelte-style.scss
@ -1,60 +0,0 @@
-//Contains all styles not unique to a svelte component.
-
-//ConsoleGlobalMessage
-div.main-console.nes-container {
-  pointer-events: auto;
-  margin-left: auto;
-  margin-right: auto;
-  top: 20vh;
-  width: 50vw;
-  height: 50vh;
-  padding: 0;
-  background-color: #333333;
-
-  .btn-action{
-    margin: 10px;
-    text-align: center;
-  }
-
-  .main-global-message {
-    width: 100%;
-    max-height: 100%;
-  }
-
-  .main-global-message h2 {
-    text-align: center;
-    color: white;
-  }
-
-  div.global-message {
-    display: flex;
-    max-height: 100%;
-    width: 100%;
-  }
-
-  div.menu {
-    flex: auto;
-  }
-
-  div.menu button {
-    margin: 7px;
-  }
-
-  .main-input {
-    width: 95%;
-  }
-
-//InputTextGlobalMessage
-  .section-input-send-text {
-    margin: 10px;
-  }
-
-  .section-input-send-text .input-send-text .ql-editor{
-    color: white;
-    min-height: 200px;
-  }
-
-  .section-input-send-text .ql-toolbar{
-    background: white;
-  }
-}
--- a/front/webpack.config.ts
+++ b/front/webpack.config.ts
@ -189,7 +189,7 @@ module.exports = {
            DISABLE_NOTIFICATIONS: false,
            PUSHER_URL: undefined,
            UPLOADER_URL: null,
-            ADMIN_URL: null,
+            ADMIN_URL: undefined,
            DEBUG_MODE: null,
            STUN_SERVER: null,
            TURN_SERVER: null,
--- a/front/yarn.lock
+++ b/front/yarn.lock
@ -291,6 +291,18 @@
  dependencies:
    source-map "^0.6.1"

+"@types/uuid@8.3.0":
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.0.tgz#215c231dff736d5ba92410e6d602050cce7e273f"
+  integrity sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ==
+
+"@types/uuidv4@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/uuidv4/-/uuidv4-5.0.0.tgz#2c94e67b0c06d5adb28fb7ced1a1b5f0866ecd50"
+  integrity sha512-xUrhYSJnkTq9CP79cU3svoKTLPCIbMMnu9Twf/tMpHATYSHCAAeDNeb2a/29YORhk5p4atHhCTMsIBU/tvdh6A==
+  dependencies:
+    uuidv4 "*"
+
 "@types/webpack-dev-server@^3.11.4":
  version "3.11.4"
  resolved "https://registry.yarnpkg.com/@types/webpack-dev-server/-/webpack-dev-server-3.11.4.tgz#90d47dd660b696d409431ab8c1e9fa3615103a07"
@ -5775,11 +5787,24 @@ utils-merge@1.0.1:
  resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=

+uuid@8.3.2:
+  version "8.3.2"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
+  integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
+
 uuid@^3.3.2, uuid@^3.4.0:
  version "3.4.0"
  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==

+uuidv4@*, uuidv4@^6.2.10:
+  version "6.2.10"
+  resolved "https://registry.yarnpkg.com/uuidv4/-/uuidv4-6.2.10.tgz#42fc1c12b6f85ad536c2c5c1e836079d1e15003c"
+  integrity sha512-FMo1exd9l5UvoUPHRR6NrtJ/OJRePh0ca7IhPwBuMNuYRqjtuh8lE3WDxAUvZ4Yss5FbCOsPFjyWJf9lVTEmnw==
+  dependencies:
+    "@types/uuid" "8.3.0"
+    uuid "8.3.2"
+
 v8-compile-cache@^2.0.3, v8-compile-cache@^2.2.0:
  version "2.3.0"
  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
--- a/maps/tests/jitsi_custom_url.json
+++ b/maps/tests/jitsi_custom_url.json
@ -58,11 +58,17 @@
                 "height":94.6489098314831,
                 "id":1,
                 "name":"",
+                 "properties":[
+                        {
+                         "name":"font-family",
+                         "type":"string",
+                         "value":"\"Press Start 2P\""
+                        }],
                 "rotation":0,
                 "text":
                    {
                     "fontfamily":"Sans Serif",
-                     "pixelsize":11,
+                     "pixelsize":8,
                     "text":"Test:\nWalk on the carpet and press space\nResult:\nJitsi opens on meet.jit.si (check this in the network tab). Note: this test only makes sense if the default configured Jitsi instance is NOT meet.jit.si  (check your .env file)",
                     "wrap":true
                    },
--- a/messages/protos/messages.proto
+++ b/messages/protos/messages.proto
@ -247,6 +247,8 @@ message RefreshRoomMessage{

 message WorldFullMessage{
 }
+message TokenExpiredMessage{
+}

 message WorldConnexionMessage{
  string message = 2;
@ -278,6 +280,7 @@ message ServerToClientMessage {
    RefreshRoomMessage refreshRoomMessage = 17;
    WorldConnexionMessage worldConnexionMessage = 18;
    EmoteEventMessage emoteEventMessage = 19;
+    TokenExpiredMessage tokenExpiredMessage = 20;
  }
 }

--- a/pusher/package.json
+++ b/pusher/package.json
@ -49,6 +49,7 @@
    "grpc": "^1.24.4",
    "jsonwebtoken": "^8.5.1",
    "mkdirp": "^1.0.4",
+    "openid-client": "^4.7.4",
    "prom-client": "^12.0.0",
    "query-string": "^6.13.3",
    "uWebSockets.js": "uNetworking/uWebSockets.js#v18.5.0",
--- a/pusher/src/Controller/AuthenticateController.ts
+++ b/pusher/src/Controller/AuthenticateController.ts
@ -4,6 +4,7 @@ import { BaseController } from "./BaseController";
 import { adminApi } from "../Services/AdminApi";
 import { jwtTokenManager } from "../Services/JWTTokenManager";
 import { parse } from "query-string";
+import { openIDClient } from "../Services/OpenIDClient";

 export interface TokenInterface {
    userUuid: string;
@ -12,11 +13,58 @@ export interface TokenInterface {
 export class AuthenticateController extends BaseController {
    constructor(private App: TemplatedApp) {
        super();
+        this.openIDLogin();
+        this.openIDCallback();
        this.register();
-        this.verify();
        this.anonymLogin();
    }

+    openIDLogin() {
+        //eslint-disable-next-line @typescript-eslint/no-misused-promises
+        this.App.get("/login-screen", async (res: HttpResponse, req: HttpRequest) => {
+            res.onAborted(() => {
+                console.warn("/message request was aborted");
+            });
+
+            const { nonce, state } = parse(req.getQuery());
+            if (!state || !nonce) {
+                res.writeStatus("400 Unauthorized").end("missing state and nonce URL parameters");
+                return;
+            }
+            try {
+                const loginUri = await openIDClient.authorizationUrl(state as string, nonce as string);
+                res.writeStatus("302");
+                res.writeHeader("Location", loginUri);
+                return res.end();
+            } catch (e) {
+                return this.errorToResponse(e, res);
+            }
+        });
+    }
+
+    openIDCallback() {
+        //eslint-disable-next-line @typescript-eslint/no-misused-promises
+        this.App.get("/login-callback", async (res: HttpResponse, req: HttpRequest) => {
+            res.onAborted(() => {
+                console.warn("/message request was aborted");
+            });
+            const { code, nonce } = parse(req.getQuery());
+            try {
+                const userInfo = await openIDClient.getUserInfo(code as string, nonce as string);
+                const email = userInfo.email || userInfo.sub;
+                if (!email) {
+                    throw new Error("No email in the response");
+                }
+                const authToken = jwtTokenManager.createAuthToken(email);
+                res.writeStatus("200");
+                this.addCorsHeaders(res);
+                return res.end(JSON.stringify({ authToken }));
+            } catch (e) {
+                return this.errorToResponse(e, res);
+            }
+        });
+    }
+
    //Try to login with an admin token
    private register() {
        this.App.options("/register", (res: HttpResponse, req: HttpRequest) => {
@ -39,11 +87,12 @@ export class AuthenticateController extends BaseController {
                    if (typeof organizationMemberToken != "string") throw new Error("No organization token");
                    const data = await adminApi.fetchMemberDataByToken(organizationMemberToken);
                    const userUuid = data.userUuid;
+                    const email = data.email;
                    const roomUrl = data.roomUrl;
                    const mapUrlStart = data.mapUrlStart;
                    const textures = data.textures;

-                    const authToken = jwtTokenManager.createJWTToken(userUuid);
+                    const authToken = jwtTokenManager.createAuthToken(email || userUuid);
                    res.writeStatus("200 OK");
                    this.addCorsHeaders(res);
                    res.end(
@ -63,45 +112,6 @@ export class AuthenticateController extends BaseController {
        });
    }

-    private verify() {
-        this.App.options("/verify", (res: HttpResponse, req: HttpRequest) => {
-            this.addCorsHeaders(res);
-
-            res.end();
-        });
-
-        this.App.get("/verify", (res: HttpResponse, req: HttpRequest) => {
-            (async () => {
-                const query = parse(req.getQuery());
-
-                res.onAborted(() => {
-                    console.warn("verify request was aborted");
-                });
-
-                try {
-                    await jwtTokenManager.getUserUuidFromToken(query.token as string);
-                } catch (e) {
-                    res.writeStatus("400 Bad Request");
-                    this.addCorsHeaders(res);
-                    res.end(
-                        JSON.stringify({
-                            success: false,
-                            message: "Invalid JWT token",
-                        })
-                    );
-                    return;
-                }
-                res.writeStatus("200 OK");
-                this.addCorsHeaders(res);
-                res.end(
-                    JSON.stringify({
-                        success: true,
-                    })
-                );
-            })();
-        });
-    }
-
    //permit to login on application. Return token to connect on Websocket IO.
    private anonymLogin() {
        this.App.options("/anonymLogin", (res: HttpResponse, req: HttpRequest) => {
@ -115,7 +125,7 @@ export class AuthenticateController extends BaseController {
            });

            const userUuid = v4();
-            const authToken = jwtTokenManager.createJWTToken(userUuid);
+            const authToken = jwtTokenManager.createAuthToken(userUuid);
            res.writeStatus("200 OK");
            this.addCorsHeaders(res);
            res.end(
--- a/pusher/src/Controller/IoSocketController.ts
+++ b/pusher/src/Controller/IoSocketController.ts
@ -22,7 +22,7 @@ import {
 import { UserMovesMessage } from "../Messages/generated/messages_pb";
 import { TemplatedApp } from "uWebSockets.js";
 import { parse } from "query-string";
-import { jwtTokenManager } from "../Services/JWTTokenManager";
+import { jwtTokenManager, tokenInvalidException } from "../Services/JWTTokenManager";
 import { adminApi, FetchMemberDataByUuidResponse } from "../Services/AdminApi";
 import { SocketManager, socketManager } from "../Services/SocketManager";
 import { emitInBatch } from "../Services/IoSocketHelpers";
@ -173,31 +173,34 @@ export class IoSocketController {
                            characterLayers = [characterLayers];
                        }

-                        const userUuid = await jwtTokenManager.getUserUuidFromToken(token, IPAddress, roomId);
+                        const tokenData =
+                            token && typeof token === "string" ? jwtTokenManager.decodeJWTToken(token) : null;
+                        const userIdentifier = tokenData ? tokenData.identifier : "";

                        let memberTags: string[] = [];
                        let memberVisitCardUrl: string | null = null;
                        let memberMessages: unknown;
                        let memberTextures: CharacterTexture[] = [];
                        const room = await socketManager.getOrCreateRoom(roomId);
-                        if (ADMIN_API_URL) {
-                            try {
                        let userData: FetchMemberDataByUuidResponse = {
-                                    uuid: v4(),
+                            userUuid: userIdentifier,
                            tags: [],
                            visitCardUrl: null,
                            textures: [],
                            messages: [],
                            anonymous: true,
                        };
+                        if (ADMIN_API_URL) {
                            try {
-                                    userData = await adminApi.fetchMemberDataByUuid(userUuid, roomId);
+                                try {
+                                    userData = await adminApi.fetchMemberDataByUuid(userIdentifier, roomId, IPAddress);
                                } catch (err) {
                                    if (err?.response?.status == 404) {
                                        // If we get an HTTP 404, the token is invalid. Let's perform an anonymous login!
+
                                        console.warn(
-                                            'Cannot find user with uuid "' +
-                                                userUuid +
+                                            'Cannot find user with email "' +
+                                                (userIdentifier || "anonymous") +
                                                '". Performing an anonymous login instead.'
                                        );
                                    } else if (err?.response?.status == 403) {
@ -235,7 +238,12 @@ export class IoSocketController {
                                    throw new Error("Use the login URL to connect");
                                }
                            } catch (e) {
-                                console.log("access not granted for user " + userUuid + " and room " + roomId);
+                                console.log(
+                                    "access not granted for user " +
+                                        (userIdentifier || "anonymous") +
+                                        " and room " +
+                                        roomId
+                                );
                                console.error(e);
                                throw new Error("User cannot access this world");
                            }
@ -257,7 +265,7 @@ export class IoSocketController {
                                // Data passed here is accessible on the "websocket" socket object.
                                url,
                                token,
-                                userUuid,
+                                userUuid: userData.userUuid,
                                IPAddress,
                                roomId,
                                name,
@ -287,15 +295,10 @@ export class IoSocketController {
                            context
                        );
                    } catch (e) {
-                        /*if (e instanceof Error) {
-                            console.log(e.message);
-                            res.writeStatus("401 Unauthorized").end(e.message);
-                        } else {
-                            res.writeStatus("500 Internal Server Error").end('An error occurred');
-                        }*/
-                        return res.upgrade(
+                        res.upgrade(
                            {
                                rejected: true,
+                                reason: e.reason || null,
                                message: e.message ? e.message : "500 Internal Server Error",
                            },
                            websocketKey,
@ -310,12 +313,14 @@ export class IoSocketController {
            open: (ws) => {
                if (ws.rejected === true) {
                    //FIX ME to use status code
-                    if (ws.message === "World is full") {
+                    if (ws.reason === tokenInvalidException) {
+                        socketManager.emitTokenExpiredMessage(ws);
+                    } else if (ws.message === "World is full") {
                        socketManager.emitWorldFullMessage(ws);
                    } else {
                        socketManager.emitConnexionErrorMessage(ws, ws.message as string);
                    }
-                    ws.close();
+                    setTimeout(() => ws.close(), 0);
                    return;
                }

--- a/pusher/src/Enum/EnvironmentVariable.ts
+++ b/pusher/src/Enum/EnvironmentVariable.ts
@ -1,11 +1,8 @@
 const SECRET_KEY = process.env.SECRET_KEY || "THECODINGMACHINE_SECRET_KEY";
-const MINIMUM_DISTANCE = process.env.MINIMUM_DISTANCE ? Number(process.env.MINIMUM_DISTANCE) : 64;
-const GROUP_RADIUS = process.env.GROUP_RADIUS ? Number(process.env.GROUP_RADIUS) : 48;
 const ALLOW_ARTILLERY = process.env.ALLOW_ARTILLERY ? process.env.ALLOW_ARTILLERY == "true" : false;
 const API_URL = process.env.API_URL || "";
 const ADMIN_API_URL = process.env.ADMIN_API_URL || "";
 const ADMIN_API_TOKEN = process.env.ADMIN_API_TOKEN || "myapitoken";
-const MAX_USERS_PER_ROOM = parseInt(process.env.MAX_USERS_PER_ROOM || "") || 600;
 const CPU_OVERHEAT_THRESHOLD = Number(process.env.CPU_OVERHEAT_THRESHOLD) || 80;
 const JITSI_URL: string | undefined = process.env.JITSI_URL === "" ? undefined : process.env.JITSI_URL;
 const JITSI_ISS = process.env.JITSI_ISS || "";
@ -13,14 +10,16 @@ const SECRET_JITSI_KEY = process.env.SECRET_JITSI_KEY || "";
 const PUSHER_HTTP_PORT = parseInt(process.env.PUSHER_HTTP_PORT || "8080") || 8080;
 export const SOCKET_IDLE_TIMER = parseInt(process.env.SOCKET_IDLE_TIMER as string) || 30; // maximum time (in second) without activity before a socket is closed

+export const FRONT_URL = process.env.FRONT_URL || "http://localhost";
+export const OPID_CLIENT_ID = process.env.OPID_CLIENT_ID || "";
+export const OPID_CLIENT_SECRET = process.env.OPID_CLIENT_SECRET || "";
+export const OPID_CLIENT_ISSUER = process.env.OPID_CLIENT_ISSUER || "";
+
 export {
    SECRET_KEY,
-    MINIMUM_DISTANCE,
    API_URL,
    ADMIN_API_URL,
    ADMIN_API_TOKEN,
-    MAX_USERS_PER_ROOM,
-    GROUP_RADIUS,
    ALLOW_ARTILLERY,
    CPU_OVERHEAT_THRESHOLD,
    JITSI_URL,
--- a/pusher/src/Services/AdminApi.ts
+++ b/pusher/src/Services/AdminApi.ts
@ -7,6 +7,7 @@ import { RoomRedirect } from "./AdminApi/RoomRedirect";

 export interface AdminApiData {
    roomUrl: string;
+    email: string | null;
    mapUrlStart: string;
    tags: string[];
    policy_type: number;
@ -21,7 +22,7 @@ export interface AdminBannedData {
 }

 export interface FetchMemberDataByUuidResponse {
-    uuid: string;
+    userUuid: string;
    tags: string[];
    visitCardUrl: string | null;
    textures: CharacterTexture[];
@ -46,12 +47,16 @@ class AdminApi {
        return res.data;
    }

-    async fetchMemberDataByUuid(uuid: string, roomId: string): Promise<FetchMemberDataByUuidResponse> {
+    async fetchMemberDataByUuid(
+        userIdentifier: string | null,
+        roomId: string,
+        ipAddress: string
+    ): Promise<FetchMemberDataByUuidResponse> {
        if (!ADMIN_API_URL) {
            return Promise.reject(new Error("No admin backoffice set!"));
        }
        const res = await Axios.get(ADMIN_API_URL + "/api/room/access", {
-            params: { uuid, roomId },
+            params: { userIdentifier, roomId, ipAddress },
            headers: { Authorization: `${ADMIN_API_TOKEN}` },
        });
        return res.data;
--- a/pusher/src/Services/JWTTokenManager.ts
+++ b/pusher/src/Services/JWTTokenManager.ts
@ -1,100 +1,25 @@
 import { ADMIN_API_URL, ALLOW_ARTILLERY, SECRET_KEY } from "../Enum/EnvironmentVariable";
 import { uuid } from "uuidv4";
-import Jwt from "jsonwebtoken";
+import Jwt, { verify } from "jsonwebtoken";
 import { TokenInterface } from "../Controller/AuthenticateController";
 import { adminApi, AdminBannedData } from "../Services/AdminApi";

+export interface AuthTokenData {
+    identifier: string; //will be a email if logged in or an uuid if anonymous
+}
+export const tokenInvalidException = "tokenInvalid";
+
 class JWTTokenManager {
-    public createJWTToken(userUuid: string) {
-        return Jwt.sign({ userUuid: userUuid }, SECRET_KEY, { expiresIn: "200d" }); //todo: add a mechanic to refresh or recreate token
+    public createAuthToken(identifier: string) {
+        return Jwt.sign({ identifier }, SECRET_KEY, { expiresIn: "3d" });
    }

-    public async getUserUuidFromToken(token: unknown, ipAddress?: string, roomUrl?: string): Promise<string> {
-        if (!token) {
-            throw new Error("An authentication error happened, a user tried to connect without a token.");
+    public decodeJWTToken(token: string): AuthTokenData {
+        try {
+            return Jwt.verify(token, SECRET_KEY, { ignoreExpiration: false }) as AuthTokenData;
+        } catch (e) {
+            throw { reason: tokenInvalidException, message: e.message };
        }
-        if (typeof token !== "string") {
-            throw new Error("Token is expected to be a string");
-        }
-
-        if (token === "test") {
-            if (ALLOW_ARTILLERY) {
-                return uuid();
-            } else {
-                throw new Error(
-                    "In order to perform a load-testing test on this environment, you must set the ALLOW_ARTILLERY environment variable to 'true'"
-                );
-            }
-        }
-
-        return new Promise<string>((resolve, reject) => {
-            Jwt.verify(token, SECRET_KEY, {}, (err, tokenDecoded) => {
-                const tokenInterface = tokenDecoded as TokenInterface;
-                if (err) {
-                    console.error("An authentication error happened, invalid JsonWebToken.", err);
-                    reject(new Error("An authentication error happened, invalid JsonWebToken. " + err.message));
-                    return;
-                }
-                if (tokenDecoded === undefined) {
-                    console.error("Empty token found.");
-                    reject(new Error("Empty token found."));
-                    return;
-                }
-
-                //verify token
-                if (!this.isValidToken(tokenInterface)) {
-                    reject(new Error("Authentication error, invalid token structure."));
-                    return;
-                }
-
-                if (ADMIN_API_URL) {
-                    //verify user in admin
-                    let promise = new Promise((resolve) => resolve());
-                    if (ipAddress && roomUrl) {
-                        promise = this.verifyBanUser(tokenInterface.userUuid, ipAddress, roomUrl);
-                    }
-                    promise
-                        .then(() => {
-                            adminApi
-                                .fetchCheckUserByToken(tokenInterface.userUuid)
-                                .then(() => {
-                                    resolve(tokenInterface.userUuid);
-                                })
-                                .catch((err) => {
-                                    //anonymous user
-                                    if (err.response && err.response.status && err.response.status === 404) {
-                                        resolve(tokenInterface.userUuid);
-                                        return;
-                                    }
-                                    reject(err);
-                                });
-                        })
-                        .catch((err) => {
-                            reject(err);
-                        });
-                } else {
-                    resolve(tokenInterface.userUuid);
-                }
-            });
-        });
-    }
-
-    private verifyBanUser(userUuid: string, ipAddress: string, roomUrl: string): Promise<AdminBannedData> {
-        return adminApi
-            .verifyBanUser(userUuid, ipAddress, roomUrl)
-            .then((data: AdminBannedData) => {
-                if (data && data.is_banned) {
-                    throw new Error("User was banned");
-                }
-                return data;
-            })
-            .catch((err) => {
-                throw err;
-            });
-    }
-
-    private isValidToken(token: object): token is TokenInterface {
-        return !(typeof (token as TokenInterface).userUuid !== "string");
    }
 }

--- a/pusher/src/Services/OpenIDClient.ts
+++ b/pusher/src/Services/OpenIDClient.ts
@ -0,0 +1,43 @@
+import { Issuer, Client } from "openid-client";
+import { OPID_CLIENT_ID, OPID_CLIENT_SECRET, OPID_CLIENT_ISSUER, FRONT_URL } from "../Enum/EnvironmentVariable";
+
+const opidRedirectUri = FRONT_URL + "/jwt";
+
+class OpenIDClient {
+    private issuerPromise: Promise<Client> | null = null;
+
+    private initClient(): Promise<Client> {
+        if (!this.issuerPromise) {
+            this.issuerPromise = Issuer.discover(OPID_CLIENT_ISSUER).then((issuer) => {
+                return new issuer.Client({
+                    client_id: OPID_CLIENT_ID,
+                    client_secret: OPID_CLIENT_SECRET,
+                    redirect_uris: [opidRedirectUri],
+                    response_types: ["code"],
+                });
+            });
+        }
+        return this.issuerPromise;
+    }
+
+    public authorizationUrl(state: string, nonce: string) {
+        return this.initClient().then((client) => {
+            return client.authorizationUrl({
+                scope: "openid email",
+                prompt: "login",
+                state: state,
+                nonce: nonce,
+            });
+        });
+    }
+
+    public getUserInfo(code: string, nonce: string): Promise<{ email: string; sub: string }> {
+        return this.initClient().then((client) => {
+            return client.callback(opidRedirectUri, { code }, { nonce }).then((tokenSet) => {
+                return client.userinfo(tokenSet);
+            });
+        });
+    }
+}
+
+export const openIDClient = new OpenIDClient();
--- a/pusher/src/Services/SocketManager.ts
+++ b/pusher/src/Services/SocketManager.ts
@ -28,6 +28,7 @@ import {
    UserLeftRoomMessage,
    AdminMessage,
    BanMessage,
+    TokenExpiredMessage,
    RefreshRoomMessage,
    EmotePromptMessage,
    VariableMessage,
@ -117,7 +118,7 @@ export class SocketManager implements ZoneEventListener {
                console.warn("Admin connection lost to back server");
                // Let's close the front connection if the back connection is closed. This way, we can retry connecting from the start.
                if (!client.disconnecting) {
-                    this.closeWebsocketConnection(client, 1011, "Connection lost to back server");
+                    this.closeWebsocketConnection(client, 1011, "Admin Connection lost to back server");
                }
                console.log("A user left");
            })
@ -140,24 +141,6 @@ export class SocketManager implements ZoneEventListener {
        }
    }

-    getAdminSocketDataFor(roomId: string): AdminSocketData {
-        throw new Error("Not reimplemented yet");
-        /*const data:AdminSocketData = {
-            rooms: {},
-            users: {},
-        }
-        const room = this.Worlds.get(roomId);
-        if (room === undefined) {
-            return data;
-        }
-        const users = room.getUsers();
-        data.rooms[roomId] = users.size;
-        users.forEach(user => {
-            data.users[user.uuid] = true
-        })
-        return data;*/
-    }
-
    async handleJoinRoom(client: ExSocketInterface): Promise<void> {
        const viewport = client.viewport;
        try {
@ -598,8 +581,20 @@ export class SocketManager implements ZoneEventListener {
        const serverToClientMessage = new ServerToClientMessage();
        serverToClientMessage.setWorldfullmessage(errorMessage);

+        if (!client.disconnecting) {
            client.send(serverToClientMessage.serializeBinary().buffer, true);
        }
+    }
+    public emitTokenExpiredMessage(client: WebSocket) {
+        const errorMessage = new TokenExpiredMessage();
+
+        const serverToClientMessage = new ServerToClientMessage();
+        serverToClientMessage.setTokenexpiredmessage(errorMessage);
+
+        if (!client.disconnecting) {
+            client.send(serverToClientMessage.serializeBinary().buffer, true);
+        }
+    }

    public emitConnexionErrorMessage(client: WebSocket, message: string) {
        const errorMessage = new WorldConnexionMessage();
--- a/pusher/yarn.lock
+++ b/pusher/yarn.lock