[WIP] Added Social, SMS and Webauthn to Magic.Link

packages/auth/package.json

@@ -13,6 +13,8 @@
     "@clerk/clerk-js": "1.33.0",
     "@clerk/clerk-sdk-node": "0.5.2",
     "@clerk/types": "1.13.0",
+    "@magic-ext/oauth": "^0.10.0",
+    "@magic-ext/webauthn": "^0.2.0",
     "@supabase/supabase-js": "1.22.6",
     "@types/netlify-identity-widget": "1.9.2",
     "@types/react": "17.0.21",

packages/auth/src/authClients/magicLink.ts

@@ -1,28 +1,109 @@
+import { OAuthRedirectConfiguration } from '@magic-ext/oauth'
 import type { Magic, MagicUserMetadata } from 'magic-sdk'
 
 import type { AuthClient } from './'
 
 export type MagicLink = Magic
 export type MagicUser = MagicUserMetadata
 export interface AuthClientMagicLink extends AuthClient {
-  login(options: { email: string; showUI?: boolean }): Promise<any>
+  login(options: LoginProps): Promise<any>
+  signup(options: LoginProps): Promise<any>
 }
 
+type SocialProps = { type: 'social' } & OAuthRedirectConfiguration
+
+type WebAuthnProps =
+  | {
+      type: 'webauthn'
+      authType: 'login'
+      username: string
+    }
+  | {
+      type: 'webauthn'
+      authType: 'signup'
+      username: string
+      nickname: string
+    }
+
+type LoginProps =
+  | { type: 'email'; email: string; showUI?: boolean }
+  | { type: 'phoneNumber'; phoneNumber: string }
+  | SocialProps
+  | WebAuthnProps
+
 export const magicLink = (client: MagicLink): AuthClientMagicLink => {
   let token: string | null
   let expireTime = 0
+
+  const authFlow = async (options: LoginProps) => {
+    switch (options.type) {
+      case 'email': {
+        const { email, showUI } = options
+        return await client.auth.loginWithMagicLink({ email, showUI })
+      }
+      case 'phoneNumber': {
+        const { phoneNumber } = options
+        return await client.auth.loginWithSMS({
+          phoneNumber,
+        })
+      }
+      case 'social': {
+        const { provider, redirectURI, scope, loginHint } = options
+        if (!client.oauth) {
+          console.error(
+            'please install the OAuth2 NPM Package https://magic.link/docs/login-methods/social-logins/oauth-implementation/web'
+          )
+        }
+        //@ts-ignore
+        return await client.oauth.loginWithRedirect({
+          provider,
+          redirectURI,
+          scope,
+          loginHint,
+        })
+      }
+      case 'webauthn': {
+        if (!client.oauth) {
+          console.error(
+            'please install the OAuth2 NPM Package https://magic.link/docs/login-methods/social-logins/oauth-implementation/web'
+          )
+        }
+        switch (options.authType) {
+          case 'login': {
+            const { username } = options
+
+            //@ts-ignore
+            return await client.webauthn.login({
+              username,
+            })
+          }
+          case 'signup': {
+            const { username, nickname } = options
+
+            //@ts-ignore
+            return await client.webauthn.registerNewUser({
+              username,
+              nickname,
+            })
+          }
+        }
+      }
+      default:
+        console.error(`please provide an "type"`)
+        break
+    }
+  }
+
   return {
     type: 'magicLink',
     client,
-    login: async ({ email, showUI = true }) =>
-      await client.auth.loginWithMagicLink({ email, showUI }),
+    login: async (options) => await authFlow(options),
     logout: async () => {
       token = null
       expireTime = 0
       await client.user.logout()
     },
-    signup: async ({ email, showUI = true }) =>
-      await client.auth.loginWithMagicLink({ email, showUI }),
+    signup: async (options) => await authFlow(options),
     getToken: async () => {
       if (!token || Date.now() <= expireTime) {
         expireTime = Date.now() + 600 // now + 10 min

tasks/test-project/yarn.lock

@@ -1267,7 +1267,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jscodeshift@npm:^0.13.0":
+"jscodeshift@npm:0.13.0":
   version: 0.13.0
   resolution: "jscodeshift@npm:0.13.0"
   dependencies:
@@ -1647,7 +1647,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "redwoodjs-tutorial-codemods@workspace:."
   dependencies:
-    jscodeshift: ^0.13.0
+    jscodeshift: 0.13.0
   languageName: unknown
   linkType: soft
 

yarn.lock

@@ -3548,6 +3548,23 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@magic-ext/oauth@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "@magic-ext/oauth@npm:0.10.0"
+  dependencies:
+    "@magic-sdk/types": ^5.1.0
+    crypto-js: ^3.3.0
+  checksum: e90816be63a3dea999d2a1d3ebdce3a11f8403e219532ca3b318a49ce281e85685b7ee79da995b99a651f2403612a24565f2a733305fa3e3ffcd9b000100ae68
+  languageName: node
+  linkType: hard
+
+"@magic-ext/webauthn@npm:^0.2.0":
+  version: 0.2.0
+  resolution: "@magic-ext/webauthn@npm:0.2.0"
+  checksum: d6c60fd10e50718a22f46d4e7af68111c0930e3b0c120b845096edfa6bb79d420a4e010739b089f819938a662148dddca8285d6d25ad0236e8cc0df391e24967
+  languageName: node
+  linkType: hard
+
 "@magic-sdk/commons@npm:^2.0.5":
   version: 2.1.0
   resolution: "@magic-sdk/commons@npm:2.1.0"
@@ -4174,6 +4191,8 @@ __metadata:
     "@clerk/clerk-js": 1.33.0
     "@clerk/clerk-sdk-node": 0.5.2
     "@clerk/types": 1.13.0
+    "@magic-ext/oauth": ^0.10.0
+    "@magic-ext/webauthn": ^0.2.0
     "@supabase/supabase-js": 1.22.6
     "@types/netlify-identity-widget": 1.9.2
     "@types/react": 17.0.21
@@ -10498,6 +10517,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"crypto-js@npm:^3.3.0":
+  version: 3.3.0
+  resolution: "crypto-js@npm:3.3.0"
+  checksum: 10b5d91bdc85095df9be01f9d0d954b8a3aba6202f143efa6215b8b3d5dd984e0883e10aeff792ef4a51b77cd4442320242b496acf6dce5069d0e0fc2e1d75d2
+  languageName: node
+  linkType: hard
+
 "crypto-random-string@npm:^1.0.0":
   version: 1.0.0
   resolution: "crypto-random-string@npm:1.0.0"