Add WebAuthn and Magic Links in auth-remix (#899)

packages/auth-core/src/errors.ts

@@ -88,6 +88,13 @@ export class OAuthProviderFailureError extends UserError {
   }
 }
 
+/** Magic link flow failed. */
+export class MagicLinkFailureError extends UserError {
+  get type() {
+    return "MagicLinkFailure";
+  }
+}
+
 /** Error with email verification. */
 export class VerificationError extends UserError {
   get type() {

packages/auth-core/src/webauthn.ts

@@ -4,8 +4,6 @@ import { requestGET, requestPOST } from "./utils";
 import type {
   PublicKeyCredentialCreationOptionsJSON,
   PublicKeyCredentialRequestOptionsJSON,
-  SignupResponse,
-  TokenData,
 } from "./types";
 
 interface WebAuthnClientOptions {
@@ -31,7 +29,7 @@ export class WebAuthnClient {
     this.verifyUrl = options.verifyUrl;
   }
 
-  public async signUp(email: string): Promise<SignupResponse> {
+  public async signUp<T>(email: string): Promise<T> {
     const options = await requestGET<PublicKeyCredentialCreationOptionsJSON>(
       this.signupOptionsUrl,
       { email },
@@ -79,7 +77,7 @@ export class WebAuthnClient {
       type: credentials.type,
     };
 
-    return await requestPOST<SignupResponse>(
+    return await requestPOST<T>(
       this.signupUrl,
       {
         email,

packages/auth-remix/readme.md

@@ -41,7 +41,7 @@ export default auth;
 
    import createServerAuth from "@edgedb/auth-remix/server";
    import { createClient } from "edgedb";
-   import { options } from "./auth.client";
+   import { options } from "./auth";
 
    export const client = createClient({
      //Note: when developing locally you will need to set tls  security to insecure, because the dev server uses  self-signed certificates which will cause api calls with the fetch api to fail.
@@ -65,13 +65,13 @@ export default auth;
    // app/routes/auth.$.ts
 
    import { redirect } from "@remix-run/node";
-   import { auth } from "~/services/auth.server";
+   import auth from "~/services/auth.server";
 
    export const { loader } = auth.createAuthRouteHandlers({
-     onOAuthCallback({ error, tokenData, provider, isSignUp }) {
+     async onOAuthCallback({ error, tokenData, provider, isSignUp }) {
        return redirect("/");
      },
-     onSignout() {
+     async onSignout() {
        return redirect("/");
      },
    });
@@ -116,9 +116,9 @@ Now you have auth all configured and user's can signin/signup/etc. you can use t
 import type { LoaderFunctionArgs } from "@remix-run/node";
 import { json } from "@remix-run/node";
 import { useLoaderData, Link } from "@remix-run/react";
+
 import auth, { client } from "~/services/auth.server";
 import clientAuth from "~/services/auth.client";
-import { transformSearchParams } from "~/utils";
 
 export const loader = async ({ request }: LoaderFunctionArgs) => {
   const session = auth.getSession(request);

packages/auth-remix/src/client.ts

@@ -1,14 +1,16 @@
 import type { BuiltinOAuthProviderNames } from "@edgedb/auth-core";
+import { WebAuthnClient } from "@edgedb/auth-core/webauthn";
 
 export interface RemixAuthOptions {
   baseUrl: string;
   authRoutesPath?: string;
   authCookieName?: string;
   pkceVerifierCookieName?: string;
   passwordResetPath?: string;
+  magicLinkFailurePath?: string;
 }
 
-type OptionalOptions = "passwordResetPath";
+type OptionalOptions = "passwordResetPath" | "magicLinkFailurePath";
 
 export default function createClientAuth(options: RemixAuthOptions) {
   return new RemixClientAuth(options);
@@ -19,17 +21,24 @@ export class RemixClientAuth {
     Omit<RemixAuthOptions, OptionalOptions>
   > &
     Pick<RemixAuthOptions, OptionalOptions>;
+  readonly webAuthnClient: WebAuthnClient;
 
   /** @internal */
   constructor(options: RemixAuthOptions) {
     this.options = {
+      authCookieName: "edgedb-session",
+      pkceVerifierCookieName: "edgedb-pkce-verifier",
+      ...options,
       baseUrl: options.baseUrl.replace(/\/$/, ""),
       authRoutesPath: options.authRoutesPath?.replace(/^\/|\/$/g, "") ?? "auth",
-      authCookieName: options.authCookieName ?? "edgedb-session",
-      pkceVerifierCookieName:
-        options.pkceVerifierCookieName ?? "edgedb-pkce-verifier",
-      passwordResetPath: options.passwordResetPath,
     };
+    this.webAuthnClient = new WebAuthnClient({
+      signupOptionsUrl: `${this._authRoute}/webauthn/signup/options`,
+      signupUrl: `${this._authRoute}/webauthn/signup`,
+      signinOptionsUrl: `${this._authRoute}/webauthn/signin/options`,
+      signinUrl: `${this._authRoute}/webauthn/signin`,
+      verifyUrl: `${this._authRoute}/webauthn/verify`,
+    });
   }
 
   protected get _authRoute() {