MagicV2 + Farcaster login + SMS login

libs/shared/src/types/protocol.ts

@@ -83,6 +83,8 @@ export enum WalletSsoSource {
   Twitter = 'twitter',
   Apple = 'apple',
   Email = 'email',
+  Farcaster = 'farcaster',
+  SMS = 'SMS',
   Unknown = 'unknown', // address created after we launched SSO, before we started recording WalletSsoSource
 }
 

packages/commonwealth/client/scripts/controllers/app/login.ts

@@ -1,29 +1,29 @@
 /**
  * @file Manages logged-in user accounts and local storage.
  */
+import { SIWESigner } from '@canvas-js/chain-ethereum';
+import { Session } from '@canvas-js/interfaces';
+
+import { ExtendedCommunity } from '@hicommonwealth/schemas';
 import {
+  CANVAS_TOPIC,
   ChainBase,
+  chainBaseToCanvasChainId,
+  getSessionSigners,
+  serializeCanvas,
   WalletId,
   WalletSsoSource,
-  chainBaseToCanvasChainId,
 } from '@hicommonwealth/shared';
+import { CosmosExtension } from '@magic-ext/cosmos';
+import { FarcasterExtension } from '@magic-ext/farcaster';
+import { OAuthExtension } from '@magic-ext/oauth';
+import { OAuthExtension as OAuthExtensionV2 } from '@magic-ext/oauth2';
+import axios from 'axios';
 import { notifyError } from 'controllers/app/notifications';
 import { getMagicCosmosSessionSigner } from 'controllers/server/sessions';
 import { isSameAccount } from 'helpers';
-
-import { getSessionSigners } from '@hicommonwealth/shared';
-import { initAppState } from 'state';
-
-import { SIWESigner } from '@canvas-js/chain-ethereum';
-import { Session } from '@canvas-js/interfaces';
-import { CANVAS_TOPIC, serializeCanvas } from '@hicommonwealth/shared';
-import { CosmosExtension } from '@magic-ext/cosmos';
-import { OAuthExtension } from '@magic-ext/oauth';
 import { Magic } from 'magic-sdk';
-
-import { ExtendedCommunity } from '@hicommonwealth/schemas';
-import axios from 'axios';
-import app from 'state';
+import app, { initAppState } from 'state';
 import { EXCEPTION_CASE_VANILLA_getCommunityById } from 'state/api/communities/getCommuityById';
 import { SERVER_URL } from 'state/api/config';
 import {
@@ -37,6 +37,17 @@ import { z } from 'zod';
 import Account from '../../models/Account';
 import AddressInfo from '../../models/AddressInfo';
 import type BlockInfo from '../../models/BlockInfo';
+import { fetchCachedCustomDomain } from '../../state/api/configuration/index';
+
+// need to instantiate it early because the farcaster sdk has an async constructor which will cause a race condition
+// if instantiated right before the login is called;
+export const defaultMagic = new Magic(process.env.MAGIC_PUBLISHABLE_KEY!, {
+  extensions: [
+    new FarcasterExtension(),
+    new OAuthExtension(),
+    new OAuthExtensionV2(),
+  ],
+});
 
 function storeActiveAccount(account: Account) {
   const user = userStore.getState();
@@ -287,42 +298,48 @@ export async function createUserWithAddress(
 }
 
 async function constructMagic(isCosmos: boolean, chain?: string) {
+  if (!isCosmos) {
+    return defaultMagic;
+  }
+
   if (isCosmos && !chain) {
     throw new Error('Must be in a community to sign in with Cosmos magic link');
   }
 
   if (process.env.MAGIC_PUBLISHABLE_KEY === undefined) {
     throw new Error('Missing magic key');
   }
+
   return new Magic(process.env.MAGIC_PUBLISHABLE_KEY, {
-    extensions: !isCosmos
-      ? [new OAuthExtension()]
-      : [
-          new OAuthExtension(),
-          new CosmosExtension({
-            // Magic has a strict cross-origin policy that restricts rpcs to whitelisted URLs,
-            // so we can't use app.chain.meta?.node?.url
-            rpcUrl: `${document.location.origin}${SERVER_URL}/magicCosmosProxy/${chain}`,
-          }),
-        ],
+    extensions: [
+      new OAuthExtension(),
+      new OAuthExtensionV2(),
+      new CosmosExtension({
+        // Magic has a strict cross-origin policy that restricts rpcs to whitelisted URLs,
+        // so we can't use app.chain.meta?.node?.url
+        rpcUrl: `${document.location.origin}${SERVER_URL}/magicCosmosProxy/${chain}`,
+      }),
+    ],
   });
 }
 
 export async function startLoginWithMagicLink({
   email,
+  phoneNumber,
   provider,
-  redirectTo,
   chain,
   isCosmos,
 }: {
   email?: string;
+  phoneNumber?: string;
   provider?: WalletSsoSource;
-  redirectTo?: string;
   chain?: string;
   isCosmos: boolean;
 }) {
-  if (!email && !provider)
-    throw new Error('Must provide email or SSO provider');
+  if (!email && !phoneNumber && !provider)
+    throw new Error('Must provide email or SMS or SSO provider');
+
+  const { isCustomDomain } = fetchCachedCustomDomain() || {};
   const magic = await constructMagic(isCosmos, chain);
 
   if (email) {
@@ -334,18 +351,51 @@ export async function startLoginWithMagicLink({
     });
 
     return { bearer, address };
-  } else {
-    const params = `?redirectTo=${
-      redirectTo ? encodeURIComponent(redirectTo) : ''
-    }&chain=${chain || ''}&sso=${provider}`;
-    await magic.oauth.loginWithRedirect({
-      provider,
-      redirectURI: new URL(
-        '/finishsociallogin' + params,
-        window.location.origin,
-      ).href,
+  } else if (provider === WalletSsoSource.Farcaster) {
+    const bearer = await magic.farcaster.login();
+
+    const { address } = await handleSocialLoginCallback({
+      bearer,
+      walletSsoSource: WalletSsoSource.Farcaster,
+    });
+
+    return { bearer, address };
+  } else if (phoneNumber) {
+    const bearer = await magic.auth.loginWithSMS({
+      phoneNumber,
+      showUI: true,
+    });
+
+    const { address } = await handleSocialLoginCallback({
+      bearer,
+      walletSsoSource: WalletSsoSource.SMS,
     });
 
+    return { bearer, address };
+  } else {
+    localStorage.setItem('magic_provider', provider!);
+    localStorage.setItem('magic_chain', chain!);
+    localStorage.setItem('magic_redirect_to', window.location.href);
+
+    if (isCustomDomain) {
+      const redirectTo = document.location.pathname + document.location.search;
+      const params = `?redirectTo=${
+        redirectTo ? encodeURIComponent(redirectTo) : ''
+      }&chain=${chain || ''}&sso=${provider}`;
+      await magic.oauth.loginWithRedirect({
+        provider,
+        redirectURI: new URL(
+          '/finishsociallogin' + params,
+          window.location.origin,
+        ).href,
+      });
+    } else {
+      await magic.oauth2.loginWithRedirect({
+        provider,
+        redirectURI: new URL('/finishsociallogin', window.location.origin).href,
+      });
+    }
+
     // magic should redirect away from this page, but we return after 5 sec if it hasn't
     await new Promise<void>((resolve) => setTimeout(() => resolve(), 5000));
     const info = await magic.user.getInfo();
@@ -404,12 +454,15 @@ export async function handleSocialLoginCallback({
   }
   const isCosmos = desiredChain?.base === ChainBase.CosmosSDK;
   const magic = await constructMagic(isCosmos, desiredChain?.id);
-  const isEmail = walletSsoSource === WalletSsoSource.Email;
 
   // Code up to this line might run multiple times because of extra calls to useEffect().
   // Those runs will be rejected because getRedirectResult purges the browser search param.
   let profileMetadata, magicAddress;
-  if (isEmail) {
+  if (
+    walletSsoSource === WalletSsoSource.Email ||
+    walletSsoSource === WalletSsoSource.Farcaster ||
+    walletSsoSource === WalletSsoSource.SMS
+  ) {
     const metadata = await magic.user.getMetadata();
     profileMetadata = { username: null };
 
@@ -423,7 +476,7 @@ export async function handleSocialLoginCallback({
       magicAddress = utils.getAddress(metadata.publicAddress);
     }
   } else {
-    const result = await magic.oauth.getRedirectResult();
+    const result = await magic.oauth2.getRedirectResult();
 
     if (!bearer) {
       console.log('No bearer token found in magic redirect result');
@@ -444,7 +497,8 @@ export async function handleSocialLoginCallback({
   try {
     // Sign a session
     if (isCosmos && desiredChain) {
-      const signer = { signMessage: magic.cosmos.sign };
+      // eslint-disable-next-line
+      const signer = { signMessage: (magic as unknown as any).cosmos.sign };
       const prefix = app.chain?.meta?.bech32_prefix || 'cosmos';
       const canvasChainId = chainBaseToCanvasChainId(
         ChainBase.CosmosSDK,

packages/commonwealth/client/scripts/helpers/index.tsx

@@ -2,9 +2,10 @@ import { TopicWeightedVoting } from '@hicommonwealth/schemas';
 import BigNumber from 'bignumber.js';
 import moment from 'moment';
 import React from 'react';
-import app from 'state';
 import Account from '../models/Account';
+import { IBlockInfo } from '../models/interfaces';
 import { ThreadStage } from '../models/types';
+import type { IApp } from '../state/index';
 
 export async function sleep(msec) {
   return new Promise((resolve) => setTimeout(resolve, msec));
@@ -26,7 +27,11 @@ export function threadStageToLabel(stage: string) {
   }
 }
 
-export function isDefaultStage(stage: string, customStages?: string[]) {
+export function isDefaultStage(
+  app: IApp,
+  stage: string,
+  customStages?: string[],
+) {
   return (
     stage === ThreadStage.Discussion ||
     stage ===
@@ -174,16 +179,19 @@ export function renderMultilineText(text: string) {
  * blocknum helpers
  */
 
-export function blocknumToTime(blocknum: number): moment.Moment {
-  const currentBlocknum = app.chain.block.height;
-  const blocktime = app.chain.block.duration;
-  const lastBlockTime: moment.Moment = app.chain.block.lastTime.clone();
+export function blocknumToTime(
+  block: IBlockInfo,
+  blocknum: number,
+): moment.Moment {
+  const currentBlocknum = block.height;
+  const blocktime = block.duration;
+  const lastBlockTime: moment.Moment = block.lastTime.clone();
   return lastBlockTime.add((blocknum - currentBlocknum) * blocktime, 'seconds');
 }
 
-export function blocknumToDuration(blocknum: number) {
+export function blocknumToDuration(block: IBlockInfo, blocknum: number) {
   return moment
-    .duration(blocknumToTime(blocknum).diff(moment()))
+    .duration(blocknumToTime(block, blocknum).diff(moment()))
     .asMilliseconds();
 }
 

packages/commonwealth/client/scripts/views/components/AuthButton/constants.ts

@@ -152,4 +152,18 @@ export const AUTH_TYPES: AuthTypesList = {
     },
     label: 'Email',
   },
+  SMS: {
+    icon: {
+      name: 'SMS',
+      isCustom: true,
+    },
+    label: 'SMS',
+  },
+  farcaster: {
+    icon: {
+      name: 'farcaster',
+      isCustom: true,
+    },
+    label: 'Farcaster',
+  },
 };

packages/commonwealth/client/scripts/views/components/AuthButton/types.ts

@@ -9,7 +9,9 @@ export type AuthSSOs =
   | 'x'
   | 'github'
   | 'apple'
-  | 'email';
+  | 'email'
+  | 'farcaster'
+  | 'SMS';
 export type CosmosWallets = 'keplr' | 'leap';
 export type SubstrateWallets = 'polkadot';
 export type SolanaWallets = 'phantom';