Add email auth provider

examples/avalon/hathora.yml

@@ -74,6 +74,8 @@ auth:
   nickname: {}
   google:
     clientId: 848412826788-m4msrb6q44dm2ue3kgvui0fq7kda55ls.apps.googleusercontent.com
+  email:
+    magicPublicApiKey: pk_live_C51086447ADD349D
 
 userState: PlayerState
 error: string

src/generate.ts

@@ -16,6 +16,7 @@ const HathoraConfig = z
         anonymous: z.optional(z.object({ separator: z.optional(z.string()).default("-") }).strict()),
         nickname: z.optional(z.object({}).strict()),
         google: z.optional(z.object({ clientId: z.string() }).strict()),
+        email: z.optional(z.object({ magicPublicApiKey: z.string() }).strict()),
       })
       .strict(),
     userState: z.string(),

templates/base/api/base.ts.hbs

@@ -51,6 +51,8 @@ export interface {{capitalize @key}}UserData {
   email: string;
   locale: string;
   picture: string;
+{{else if (eq @key "email")}}
+  email: string;
 {{/if}}
 }
 {{/each}}
@@ -62,18 +64,18 @@ export function lookupUser(userId: T.UserId): Promise<UserData> {
 
 export function getUserDisplayName(user: UserData) {
   switch (user.type) {
-    {{#each auth}}
+{{#each auth}}
     case "{{@key}}":
-      {{#if (eq @key "anonymous")}}
+{{#if (eq @key "anonymous")}}
       return user.name;
-      {{else if (eq @key "nickname")}}
+{{else if (eq @key "nickname")}}
       return user.name;
-      {{else if (eq @key "google")}}
+{{else if (eq @key "google")}}
       return user.name;
-      {{else if (eq @key "email")}}
+{{else if (eq @key "email")}}
       return user.email;
-      {{/if}}
-    {{/each}}
+{{/if}}
+{{/each}}
   }
 }
 {{#*inline "renderTypeArg"}}

templates/base/client/.hathora/client.ts.hbs

@@ -51,6 +51,12 @@ export class HathoraClient {
     return res.data.token;
   }
 
+{{else if (eq @key "email")}}
+  public async loginEmail(didToken: string): Promise<string> {
+    const res = await axios.post(`https://${COORDINATOR_HOST}/${this.appId}/login/email`, { didToken });
+    return res.data.token;
+  }
+
 {{/if}}
 {{/each}}
   public async create(token: string, request: IInitializeRequest): Promise<string> {

templates/base/client/prototype-ui/Login.tsx.hbs

@@ -1,3 +1,6 @@
+{{#if auth.email}}
+import { Magic } from "magic-sdk";
+{{/if}}
 import React, { useState } from "react";
 import { toast } from "react-toastify";
 {{#if auth.google}}
@@ -6,7 +9,13 @@ import { GoogleLogin } from "react-google-login";
 import { HathoraClient } from "../.hathora/client";
 
 export function Login({ client, setToken }: { client: HathoraClient; setToken: (token: string) => void }) {
+  {{#if auth.nickname}}
   const [nickname, setNickname] = useState<string>("");
+  {{/if}}
+  {{#if auth.email}}
+  const [email, setEmail] = useState<string>("");
+  const magic = new Magic("{{auth.email.magicPublicApiKey}}");
+  {{/if}}
   return (
     <div className="flex flex-col w-full md:justify-center">
       <div className="w-6/12 m-auto">
@@ -72,6 +81,40 @@ export function Login({ client, setToken }: { client: HathoraClient; setToken: (
               onFailure={(error) => toast.error("Authentication error: " + error.details)}
             />
           </div>
+{{else if (eq @key "email")}}
+          <div className="w-6/12 mb-4">
+            <input
+              type="text"
+              value={email}
+              placeholder="Email"
+              onChange={(e) => setEmail(e.target.value)}
+              className="mr-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+            />
+            <button
+              type="button"
+              onClick={async () => {
+                if (email.length > 0) {
+                  const didToken = await magic.auth.loginWithMagicLink({ email });
+                  if (didToken !== null) {
+                    client
+                      .loginEmail(didToken)
+                      .then((token) => {
+                        sessionStorage.setItem("token", token);
+                        setToken(token);
+                      })
+                      .catch((e) => toast.error("Authentication error: " + e.reason));
+                  } else {
+                    toast.error("Error logging in with magic link");
+                  }
+                } else {
+                  toast.error("Enter valid email");
+                }
+              }}
+              className="inline-flex items-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
+            >
+              Login (Email)
+            </button>
+          </div>
 {{/if}}
 {{/each}}
         </div>

templates/base/client/prototype-ui/package.json.hbs

@@ -3,6 +3,9 @@
   "dependencies": {
     "@headlessui/react": "1.4.3",
     "@heroicons/react": "1.0.5",
+    {{#if auth.email}}
+    "magic-sdk": "8.1.1",
+    {{/if}}
     "react": "17.0.2",
     "react-dom": "17.0.2",
     {{#if auth.google}}

templates/base/server/.hathora/protocol.ts.hbs

@@ -51,6 +51,8 @@ export function register(store: Store): Promise<CoordinatorClient> {
             nickname: {},
 {{else if (eq @key "google")}}
             google: { clientId: "{{clientId}}" },
+{{else if (eq @key "email")}}
+            email: { secretApiKey: process.env.MAGIC_SECRET_KEY! },
 {{/if}}
 {{/each}}
           },