From 79d36431a1ff76a488c5446414afbb5e54b4cc47 Mon Sep 17 00:00:00 2001 From: Harsh Pandey Date: Thu, 9 Dec 2021 18:30:04 -0500 Subject: [PATCH 1/3] implement email login via magic-link --- examples/pong/rtag.yml | 2 ++ generate.ts | 1 + templates/base/client/.rtag/App.tsx.hbs | 33 +++++++++++++++++--- templates/base/client/.rtag/base.ts.hbs | 2 ++ templates/base/client/.rtag/client.ts.hbs | 14 +++++++++ templates/base/client/.rtag/package.json.hbs | 3 ++ templates/base/server/.rtag/base.ts.hbs | 2 ++ templates/base/server/.rtag/protocol.ts.hbs | 2 ++ 8 files changed, 55 insertions(+), 4 deletions(-) diff --git a/examples/pong/rtag.yml b/examples/pong/rtag.yml index b304e1c9..94bf0b45 100644 --- a/examples/pong/rtag.yml +++ b/examples/pong/rtag.yml @@ -23,6 +23,8 @@ methods: auth: anonymous: separator: "-" + email: + magicPublicApiKey: pk_live_C51086447ADD349D userState: PlayerState initialize: createGame diff --git a/generate.ts b/generate.ts index 47a68bd2..52647cf8 100644 --- a/generate.ts +++ b/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(), diff --git a/templates/base/client/.rtag/App.tsx.hbs b/templates/base/client/.rtag/App.tsx.hbs index 1ad6ee7e..82e6c3a3 100644 --- a/templates/base/client/.rtag/App.tsx.hbs +++ b/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(""); + {{/if}} return (

Login

{{#each auth}} -{{#if (eq @key "anonymous")}}
+{{#if (eq @key "anonymous")}} -
{{else if (eq @key "google")}} -
@@ -155,8 +156,32 @@ function Login({ setToken }: { setToken: (token: string) => void }) { .catch((e) => toast.error("Authentication error: " + e.reason)) } /> -
+{{else if (eq @key "email")}} + 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" + /> + {{/if}} +
{{/each}}
diff --git a/templates/base/client/.rtag/base.ts.hbs b/templates/base/client/.rtag/base.ts.hbs index 9988a5a2..ec443f3a 100644 --- a/templates/base/client/.rtag/base.ts.hbs +++ b/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}} diff --git a/templates/base/client/.rtag/client.ts.hbs b/templates/base/client/.rtag/client.ts.hbs index 146dad97..b6375213 100644 --- a/templates/base/client/.rtag/client.ts.hbs +++ b/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 { + 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( diff --git a/templates/base/client/.rtag/package.json.hbs b/templates/base/client/.rtag/package.json.hbs index d03d24ba..83fdd43c 100644 --- a/templates/base/client/.rtag/package.json.hbs +++ b/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}} diff --git a/templates/base/server/.rtag/base.ts.hbs b/templates/base/server/.rtag/base.ts.hbs index 9988a5a2..ec443f3a 100644 --- a/templates/base/server/.rtag/base.ts.hbs +++ b/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}} diff --git a/templates/base/server/.rtag/protocol.ts.hbs b/templates/base/server/.rtag/protocol.ts.hbs index 4f66b2ce..3a203c1f 100644 --- a/templates/base/server/.rtag/protocol.ts.hbs +++ b/templates/base/server/.rtag/protocol.ts.hbs @@ -43,6 +43,8 @@ export function register(store: Store): Promise { anonymous: { separator: "{{separator}}" }, {{else if (eq @key "google")}} google: { clientId: "{{clientId}}" }, +{{else if (eq @key "email")}} + email: { magicSecretApiKey: process.env.MAGIC_SECRET_KEY! }, {{/if}} {{/each}} }, From 1fd6015f45629787e756b84038a469cdbe70f211 Mon Sep 17 00:00:00 2001 From: Harsh Pandey Date: Thu, 9 Dec 2021 18:35:18 -0500 Subject: [PATCH 2/3] rename --- templates/base/server/.rtag/protocol.ts.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/base/server/.rtag/protocol.ts.hbs b/templates/base/server/.rtag/protocol.ts.hbs index 3a203c1f..242d9633 100644 --- a/templates/base/server/.rtag/protocol.ts.hbs +++ b/templates/base/server/.rtag/protocol.ts.hbs @@ -44,7 +44,7 @@ export function register(store: Store): Promise { {{else if (eq @key "google")}} google: { clientId: "{{clientId}}" }, {{else if (eq @key "email")}} - email: { magicSecretApiKey: process.env.MAGIC_SECRET_KEY! }, + email: { secretApiKey: process.env.MAGIC_SECRET_KEY! }, {{/if}} {{/each}} }, From 64e210c7a89c1aa3444aaef6e6f7d57830198083 Mon Sep 17 00:00:00 2001 From: Harsh Pandey Date: Thu, 9 Dec 2021 18:37:39 -0500 Subject: [PATCH 3/3] display error if email field blank --- templates/base/client/.rtag/App.tsx.hbs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/templates/base/client/.rtag/App.tsx.hbs b/templates/base/client/.rtag/App.tsx.hbs index 82e6c3a3..7117c09b 100644 --- a/templates/base/client/.rtag/App.tsx.hbs +++ b/templates/base/client/.rtag/App.tsx.hbs @@ -174,6 +174,8 @@ function Login({ setToken }: { setToken: (token: string) => void }) { 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"