Email auth

examples/pong/rtag.yml

@@ -23,6 +23,8 @@ methods:
 auth:
   anonymous:
     separator: "-"
+  email:
+    magicPublicApiKey: pk_live_C51086447ADD349D
 
 userState: PlayerState
 initialize: createGame

generate.ts

@@ -13,6 +13,7 @@ const RtagConfig = z
       .object({
         anonymous: z.optional(z.object({ separator: z.string() }).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/client/.rtag/App.tsx.hbs

@@ -117,14 +117,17 @@ function NavBar({ token }: { token?: string }) {
 }
 
 function Login({ setToken }: { setToken: (token: string) => void }) {
+  {{#if auth.email}}
+  const [email, setEmail] = useState<string>("");
+  {{/if}}
   return (
     <div className="flex flex-col w-full md:justify-center">
       <div className="w-6/12 m-auto">
         <h2 className="text-base text-xl font-semibold text-gray-900">Login</h2>
         <div className="flex flex-col mt-2">
 {{#each auth}}
-{{#if (eq @key "anonymous")}}
           <div className="w-6/12 mb-4">
+{{#if (eq @key "anonymous")}}
             <button
               type="button"
               onClick={() =>
@@ -140,9 +143,7 @@ function Login({ setToken }: { setToken: (token: string) => void }) {
             >
               Login (Anonymous)
             </button>
-          </div>
 {{else if (eq @key "google")}}
-          <div className="w-6/12">
             <GoogleLogin
               clientId="{{clientId}}"
               onSuccess={({ tokenId }: any) =>
@@ -155,8 +156,34 @@ function Login({ setToken }: { setToken: (token: string) => void }) {
                   .catch((e) => toast.error("Authentication error: " + e.reason))
               }
             />
-          </div>
+{{else if (eq @key "email")}}
+            <input
+              type="text"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              className="block w-full mb-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
+            />
+            <button
+              type="button"
+              onClick={() => {
+                if (email.length > 0) {
+                  client
+                    .loginEmail(email)
+                    .then((token) => {
+                      sessionStorage.setItem("token", token);
+                      setToken(token);
+                    })
+                    .catch((e) => toast.error("Authentication error: " + e.reason));
+                } 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>
 {{/if}}
+          </div>
 {{/each}}
         </div>
       </div>

templates/base/client/.rtag/base.ts.hbs

@@ -33,6 +33,8 @@ export interface {{capitalize @key}}UserData {
   email: string;
   locale: string;
   picture: string;
+{{else if (eq @key "email")}}
+  email: string;
 {{/if}}
 }
 {{/each}}

templates/base/client/.rtag/client.ts.hbs

@@ -3,6 +3,9 @@ import WebSocket from "isomorphic-ws";
 import getRandomValues from "get-random-values";
 import axios from "axios";
 import jwtDecode from "jwt-decode";
+{{#if auth.email}}
+import { Magic } from "magic-sdk";
+{{/if}}
 import { UserData, Response, Method } from "./base";
 import { computePatch } from "./patch";
 import {
@@ -14,6 +17,9 @@ import {
 } from "./types";
 
 const COORDINATOR_HOST = "rtag.dev";
+{{#with auth.email}}
+const magic = new Magic("{{magicPublicApiKey}}");
+{{/with}}
 
 export type StateId = string;
 
@@ -35,6 +41,14 @@ export class RtagClient {
     return (await axios.post(`https://${COORDINATOR_HOST}/${this.appId}/login/google`, { idToken })).data.token;
   }
 
+{{else if (eq @key "email")}}
+  public async loginEmail(email: string): Promise<string> {
+    return magic.auth
+      .loginWithMagicLink({ email })
+      .then((didToken) => axios.post(`https://${COORDINATOR_HOST}/${this.appId}/login/email`, { didToken }))
+      .then((res) => res.data.token);
+  }
+
 {{/if}}
 {{/each}}
   public connectNew(

templates/base/client/.rtag/package.json.hbs

@@ -7,6 +7,9 @@
     "@heroicons/react": "1.0.5",
     "isomorphic-ws": "4.0.1",
     "jwt-decode": "3.1.2",
+    {{#if auth.email}}
+    "magic-sdk": "6.2.1",
+    {{/if}}
     "react": "17.0.2",
     "react-dom": "17.0.2",
     {{#if auth.google}}

templates/base/server/.rtag/base.ts.hbs

@@ -33,6 +33,8 @@ export interface {{capitalize @key}}UserData {
   email: string;
   locale: string;
   picture: string;
+{{else if (eq @key "email")}}
+  email: string;
 {{/if}}
 }
 {{/each}}

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

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