Jwt authentication nodejs

.env-examlple

@@ -0,0 +1 @@
+ABLY_API_KEY={your-api-key}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+.env

README.md

@@ -1,13 +1,11 @@
-[![Ably](https://s3.amazonaws.com/files.ably.io/logo-with-type.png)](https://www.ably.io)
+[![Ably](https://static.ably.dev/logo-h-black.svg?jwt-authentication-nodejs)](https://www.ably.com)
 
 ---
 
-# Tutorials repository
+# JWT auth tutorial
 
-_[Ably](https://ably.com) is the platform that powers synchronized digital experiences in realtime. Whether attending an event in a virtual venue, receiving realtime financial information, or monitoring live car performance data – consumers simply expect realtime digital experiences as standard. Ably provides a suite of APIs to build, extend, and deliver powerful digital experiences in realtime for more than 250 million devices across 80 countries each month. Organizations like Bloomberg, HubSpot, Verizon, and Hopin depend on Ably’s platform to offload the growing complexity of business-critical realtime data synchronization at global scale. For more information, see the [Ably documentation](https://ably.com/documentation)._
+This repository contains the working code for [Ably JWT auth tutorial](https://www.ably.com/tutorials/jwt-authentication). See [JWT documentation](https://www.ably.com/docs/general/authentication#token-authentication) to understand more about it.
 
-This repository contains the working code for many of the [Ably tutorials](https://www.ably.io/tutorials).
+See [https://www.ably.com/tutorials](https://www.ably.com/tutorials) for a complete list of Ably tutorials. The source code for each tutorial exists as a branch in this repo, see [the complete list of tutorial branches in this repository](https://github.com/ably/tutorials/branches/all).
 
-See [https://www.ably.io/tutorials](https://www.ably.io/tutorials) for a complete list of Ably tutorials. The source code for each tutorial exists as a branch in this repo, see [the complete list of tutorial branches in this repository](https://github.com/ably/tutorials/branches/all).
-
-To find out more Ably and our realtime data delivery platform, visit [https://www.ably.io](https://www.ably.io)
+To find out more Ably and our realtime data delivery platform, visit [https://www.ably.com](https://www.ably.com)

css/style.css

@@ -0,0 +1,96 @@
+section {
+  display: block;
+}
+
+html,
+body {
+  height: 100%;
+}
+
+body {
+  font: 16px/20px sans-serif;
+  color: #404040;
+  background: #ffffff;
+  margin: 0;
+  padding: 0;
+}
+
+form {
+  padding: 1.1rem 1.6rem 1.6rem;
+}
+
+input {
+  display: block;
+  margin: 10px 0;
+  padding: 12px 16px;
+  width: 200px;
+  color: #222222;
+  background: #ebebeb;
+  border: 1px solid;
+  border-color: #c9c9c9;
+  border-radius: 2px;
+  font-size: 14px;
+}
+
+button[type="submit"] {
+  margin-top: 32px;
+  background-color: #03020d;
+  border-radius: 6px;
+  font-size: 1rem;
+  font-weight: 500;
+  line-height: 1.125rem;
+  color: #ffffff;
+  padding: 0.9375rem 1.5rem;
+  border: 0;
+  font-weight: 700;
+}
+
+button[type="submit"]:hover {
+  background: #ff5416;
+}
+
+.container::after {
+  content: "";
+  position: fixed;
+  z-index: 1;
+  top: 0;
+  left: 0;
+  font-size: 30px;
+  width: 100%;
+  height: 100%;
+  background-position: 10% 20%;
+  background-repeat: no-repeat;
+  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg width='552' height='552' viewBox='0 0 552 552' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='276' cy='276' r='55' stroke='%23FF0000' stroke-width='2'/%3e%3ccircle cx='276' cy='276' r='127' stroke='%23FF0000' stroke-width='2'/%3e%3ccircle cx='276' cy='276' r='194' stroke='%23FF0000' stroke-width='2'/%3e%3ccircle cx='276' cy='276' r='274' stroke='%23FF0000' stroke-width='2'/%3e%3c/svg%3e ");
+  transform: translate(1000px, 60px) scale(2);
+}
+
+.login {
+  position: relative;
+  margin: auto;
+  padding: 0;
+  background: white;
+  border-radius: 2px;
+  box-shadow: 0 0 200px #72727255;
+}
+
+.login h1 {
+  margin: 0;
+  padding: 1rem 0;
+  font-size: 1rem;
+  font-weight: 900;
+  color: #fff;
+  text-align: center;
+  background: #000000;
+  border-radius: 4px 4px 0 0;
+}
+
+.login {
+  z-index: 2;
+  margin: auto;
+  width: unset;
+}
+
+.container {
+  display: flex;
+  height: 100%;
+}

index.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>JWT authentication with Ably</title>
+    <link rel="stylesheet" href="css/style.css" />
+    <link
+      rel="icon"
+      href="https://static.ably.dev/motif-red.svg?jwt-authentication-nodejs"
+      type="image/svg+xml"
+    />
+    <script
+      src="https://cdn.ably.io/lib/ably.min-2.js"
+      type="text/javascript"
+    ></script>
+    <script type="text/javascript">
+      /*
+        Set up a Realtime client that authenticates
+        with the local web server auth endpoint
+        and outputs the JWT to the console.log
+      */
+
+      function login(e) {
+        e.preventDefault();
+
+        const username = document.querySelector("#username").value;
+        const password = document.querySelector("#password").value;
+
+        if (!`${username}`.trim() || !`${password}`.trim()) {
+          return alert("Error! Require username and password");
+        }
+
+        // Send user details to the auth server
+        const authUrl = `/auth?clientId=${username}:${password}`;
+        const realtime = new Ably.Realtime({ authUrl });
+
+        console.log("Fetching JWT token from auth server", username, password);
+
+        realtime.connection.once("connected", () => {
+          const { tokenDetails } = realtime.auth;
+          console.log("Client connected to Ably using JWT", tokenDetails);
+          alert("Client successfully connected to Ably using JWT auth");
+        });
+      }
+    </script>
+  </head>
+
+  <body>
+    <section class="container">
+      <div class="login">
+        <h1>Ably JWT auth example</h1>
+        <form>
+          <label for="username">Username</label>
+          <input type="text" placeholder="Enter Username" id="username" />
+          <label for="password">Password</label>
+          <input type="password" placeholder="Password" id="password" />
+          <button type="submit" onclick="login(event)">Login</button>
+        </form>
+      </div>
+    </section>
+  </body>
+</html>