@springmicro/auth 0.1.8 → 0.2.0-alpha.0

package/src/components/provider/Web3Auth.jsx

@@ -0,0 +1,365 @@
+// // Copyright 2023 The Casdoor Authors. All Rights Reserved.
+// //
+// // Licensed under the Apache License, Version 2.0 (the "License");
+// // you may not use this file except in compliance with the License.
+// // You may obtain a copy of the License at
+// //
+// //      http://www.apache.org/licenses/LICENSE-2.0
+// //
+// // Unless required by applicable law or agreed to in writing, software
+// // distributed under the License is distributed on an "AS IS" BASIS,
+// // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// // See the License for the specific language governing permissions and
+// // limitations under the License.
+
+import * as Setting from "../forms/util/core";
+
+import i18next from "i18next";
+import { v4 as uuidv4 } from "uuid";
+import {
+  SignTypedDataVersion,
+  recoverTypedSignature,
+} from "@metamask/eth-sig-util";
+import { getAuthUrl } from "../forms/util/provider";
+import { Buffer } from "buffer";
+import Onboard from "@web3-onboard/core";
+import injectedModule from "@web3-onboard/injected-wallets";
+import infinityWalletModule from "@web3-onboard/infinity-wallet";
+// import sequenceModule from "@web3-onboard/sequence";
+import trustModule from "@web3-onboard/trust";
+import frontierModule from "@web3-onboard/frontier";
+import tahoModule from "@web3-onboard/taho";
+import coinbaseModule from "@web3-onboard/coinbase";
+import gnosisModule from "@web3-onboard/gnosis";
+// import keystoneModule from "@web3-onboard/keystone";
+// import keepkeyModule from "@web3-onboard/keepkey";
+// import dcentModule from "@web3-onboard/dcent";
+// import ledgerModule from "@web3-onboard/ledger";
+// import trezorModule from "@web3-onboard/trezor";
+// import walletConnectModule from "@web3-onboard/walletconnect";
+// import fortmaticModule from "@web3-onboard/fortmatic";
+// import portisModule from "@web3-onboard/portis";
+// import magicModule from "@web3-onboard/magic";
+
+global.Buffer = Buffer;
+
+export function generateNonce() {
+  const nonce = uuidv4();
+  return nonce;
+}
+
+export function getWeb3AuthTokenKey(address) {
+  return `Web3AuthToken_${address}`;
+}
+
+export function setWeb3AuthToken(token) {
+  const key = getWeb3AuthTokenKey(token.address);
+  localStorage.setItem(key, JSON.stringify(token));
+}
+
+export function getWeb3AuthToken(address) {
+  const key = getWeb3AuthTokenKey(address);
+  return JSON.parse(localStorage.getItem(key));
+}
+
+export function delWeb3AuthToken(address) {
+  const key = getWeb3AuthTokenKey(address);
+  localStorage.removeItem(key);
+}
+
+export function clearWeb3AuthToken() {
+  const keys = Object.keys(localStorage);
+  keys.forEach((key) => {
+    if (key.startsWith("Web3AuthToken_")) {
+      localStorage.removeItem(key);
+    }
+  });
+}
+
+export function detectMetaMaskPlugin() {
+  // check if ethereum extension MetaMask is installed
+  return window.ethereum && window.ethereum.isMetaMask;
+}
+
+export function requestEthereumAccount() {
+  const method = "eth_requestAccounts";
+  const selectedAccount = window.ethereum
+    .request({ method })
+    .then((accounts) => {
+      return accounts[0];
+    });
+  return selectedAccount;
+}
+
+export function signEthereumTypedData(from, nonce) {
+  // https://docs.metamask.io/wallet/how-to/sign-data/
+  const date = new Date();
+  const typedData = JSON.stringify({
+    domain: {
+      chainId: window.ethereum.chainId,
+      name: "Casdoor",
+      version: "1",
+    },
+    message: {
+      prompt:
+        "In order to authenticate to this website, sign this request and your public address will be sent to the server in a verifiable way.",
+      nonce: nonce,
+      createAt: `${date.toLocaleString()}`,
+    },
+    primaryType: "AuthRequest",
+    types: {
+      EIP712Domain: [
+        { name: "name", type: "string" },
+        { name: "version", type: "string" },
+        { name: "chainId", type: "uint256" },
+      ],
+      AuthRequest: [
+        { name: "prompt", type: "string" },
+        { name: "nonce", type: "string" },
+        { name: "createAt", type: "string" },
+      ],
+    },
+  });
+
+  const method = "eth_signTypedData_v4";
+  const params = [from, typedData];
+
+  return window.ethereum.request({ method, params }).then((sign) => {
+    return {
+      address: from,
+      createAt: Math.floor(date.getTime() / 1000),
+      typedData: typedData,
+      signature: sign,
+    };
+  });
+}
+
+export function checkEthereumSignedTypedData(token) {
+  if (token === undefined || token === null) {
+    return false;
+  }
+  if (token.address && token.typedData && token.signature) {
+    const recoveredAddr = recoverTypedSignature({
+      data: JSON.parse(token.typedData),
+      signature: token.signature,
+      version: SignTypedDataVersion.V4,
+    });
+    // const recoveredAddr = token.address;
+    return recoveredAddr === token.address;
+    // return toChecksumAddress(recoveredAddr) === toChecksumAddress(token.address);
+  }
+  return false;
+}
+
+export async function authViaMetaMask(application, provider, method) {
+  if (!detectMetaMaskPlugin()) {
+    Setting.showMessage(
+      "error",
+      `${i18next.t("login:MetaMask plugin not detected")}`
+    );
+    return;
+  }
+  try {
+    const account = await requestEthereumAccount();
+    let token = getWeb3AuthToken(account);
+    if (!checkEthereumSignedTypedData(token)) {
+      const nonce = generateNonce();
+      token = await signEthereumTypedData(account, nonce);
+      setWeb3AuthToken(token);
+    }
+    const redirectUri = `${getAuthUrl(
+      application,
+      provider,
+      method
+    )}&web3AuthTokenKey=${getWeb3AuthTokenKey(account)}`;
+    Setting.goToLink(redirectUri);
+  } catch (err) {
+    Setting.showMessage(
+      "error",
+      `${i18next.t("login:Failed to obtain MetaMask authorization")}: ${
+        err.message
+      }`
+    );
+  }
+}
+
+const web3Wallets = {
+  // injected wallets
+  injected: {
+    label: "Injected",
+    wallet: injectedModule(),
+  },
+  // sdk wallets
+  coinbase: {
+    label: "Coinbase",
+    wallet: coinbaseModule(),
+  },
+  trust: {
+    label: "Trust",
+    wallet: trustModule(),
+  },
+  gnosis: {
+    label: "Gnosis",
+    wallet: gnosisModule(),
+  },
+  // Broken
+  // sequence: {
+  //   label: "Sequence",
+  //   wallet: sequenceModule(),
+  // },
+  taho: {
+    label: "Taho",
+    wallet: tahoModule(),
+  },
+  frontier: {
+    label: "Frontier",
+    wallet: frontierModule(),
+  },
+  infinityWallet: {
+    label: "Infinity Wallet",
+    wallet: infinityWalletModule(),
+  },
+  // hardware wallets
+  // keystone: {
+  //   label: "Keystone",
+  //   wallet: keystoneModule(),
+  // },
+  // keepkey: {
+  //   label: "KeepKey",
+  //   wallet: keepkeyModule(),
+  // },
+  // dcent: {
+  //   label: "D'CENT",
+  //   wallet: dcentModule(),
+  // },
+
+  // some wallet need custome `apiKey` or `projectId` configure item
+  // const magic = magicModule({
+  //   apiKey: "magicApiKey",
+  // });
+  // const fortmatic = fortmaticModule({
+  //   apiKey: "fortmaticApiKey",
+  // });
+  // const portis = portisModule({
+  //   apiKey: "portisApiKey",
+  // });
+  // const ledger = ledgerModule({
+  //   projectId: "ledgerProjectId"
+  // });
+  // const walletConnect = walletConnectModule({
+  //   projectId: "walletConnectProjectId",
+  // });
+};
+
+export function getWeb3OnboardWalletsOptions() {
+  return Object.entries(web3Wallets).map(([key, value]) => ({
+    label: value.label,
+    value: key,
+  }));
+}
+
+function getWeb3OnboardWallets(options) {
+  if (options === null || options === undefined || !Array.isArray(options)) {
+    return [];
+  }
+  return options.map((walletType) => {
+    if (walletType && web3Wallets[walletType]?.wallet) {
+      return web3Wallets[walletType]?.wallet;
+    }
+  });
+}
+
+export function initWeb3Onboard(application, provider) {
+  // init wallet
+  // options = ["injected","coinbase",...]
+  const options = JSON.parse(provider.metadata);
+  const wallets = getWeb3OnboardWallets(options);
+
+  // init chain
+  // const InfuraKey = "2fa45cbe531e4e65be4fcbf408e651a8";
+  const chains = [
+    // {
+    //   id: "0x1",
+    //   token: "ETH",
+    //   label: "Ethereum Mainnet",
+    //   rpcUrl: `https://mainnet.infura.io/v3/${InfuraKey}`,
+    // },
+    // {
+    //   id: "0x5",
+    //   token: "ETH",
+    //   label: "Goerli",
+    //   rpcUrl: `https://goerli.infura.io/v3/${InfuraKey}`,
+    // },
+    {
+      id: "0x13881",
+      token: "MATIC",
+      label: "Polygon - Mumbai",
+      rpcUrl: "https://matic-mumbai.chainstacklabs.com",
+    },
+    {
+      id: "0x38",
+      token: "BNB",
+      label: "Binance",
+      rpcUrl: "https://bsc-dataseed.binance.org/",
+    },
+    {
+      id: "0xA",
+      token: "OETH",
+      label: "Optimism",
+      rpcUrl: "https://mainnet.optimism.io",
+    },
+    {
+      id: "0xA4B1",
+      token: "ARB-ETH",
+      label: "Arbitrum",
+      rpcUrl: "https://rpc.ankr.com/arbitrum",
+    },
+  ];
+
+  const appMetadata = {
+    name: "Casdoor",
+    description: "Connect a wallet using Casdoor",
+    recommendedInjectedWallets: [
+      { name: "MetaMask", url: "https://metamask.io" },
+      { name: "Coinbase", url: "https://www.coinbase.com/wallet" },
+    ],
+  };
+
+  const web3Onboard = Onboard({
+    wallets,
+    chains,
+    appMetadata,
+  });
+  return web3Onboard;
+}
+
+export async function authViaWeb3Onboard(application, provider, method) {
+  try {
+    const onboard = initWeb3Onboard(application, provider);
+    const connectedWallets = await onboard.connectWallet();
+    if (connectedWallets.length > 0) {
+      const wallet = connectedWallets[0];
+      const account = wallet.accounts[0];
+      const address = account.address;
+      const token = {
+        address: address, // e.g."0xbd5444d31fe4139ee36bea29e43d4ac67ae276de"
+        walletType: wallet.label, // e.g."MetaMask"
+        createAt: Math.floor(new Date().getTime() / 1000),
+      };
+      setWeb3AuthToken(token);
+      const redirectUri = `${getAuthUrl(
+        application,
+        provider,
+        method
+      )}&web3AuthTokenKey=${getWeb3AuthTokenKey(address)}`;
+      Setting.goToLink(redirectUri);
+    }
+  } catch (err) {
+    Setting.showMessage(
+      "error",
+      `${i18next.t(
+        "login:Failed to obtain Web3-Onboard authorization"
+      )}: ${err}`
+    );
+  }
+}

package/src/components/provider/WechatLoginButton.jsx

@@ -0,0 +1,37 @@
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { createButton } from "react-social-login-buttons";
+import { StaticBaseUrl } from "../forms/util/core";
+
+function Icon({ width = 24, height = 24, color }) {
+  return (
+    <img
+      src={`${StaticBaseUrl}/buttons/wechat.svg`}
+      alt="Sign in with Wechat"
+    />
+  );
+}
+
+const config = {
+  text: "Sign in with Wechat",
+  icon: Icon,
+  iconFormat: (name) => `fa fa-${name}`,
+  style: { background: "rgb(0,194,80)" },
+  activeStyle: { background: "rgb(0,158,64)" },
+};
+
+const WechatLoginButton = createButton(config);
+
+export default WechatLoginButton;

package/src/components/provider/WeiboLoginButton.jsx

@@ -0,0 +1,34 @@
+// Copyright 2021 The Casdoor Authors. All Rights Reserved.
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//      http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { createButton } from "react-social-login-buttons";
+import { StaticBaseUrl } from "../forms/util/core";
+
+function Icon({ width = 24, height = 24, color }) {
+  return (
+    <img src={`${StaticBaseUrl}/buttons/weibo.svg`} alt="Sign in with Weibo" />
+  );
+}
+
+const config = {
+  text: "Sign in with Weibo",
+  icon: Icon,
+  iconFormat: (name) => `fa fa-${name}`,
+  style: { background: "#e62329" },
+  activeStyle: { background: "#e54329" },
+};
+
+const WeiboLoginButton = createButton(config);
+
+export default WeiboLoginButton;

package/src/components/util.tsx

@@ -0,0 +1,173 @@
+import React from "react";
+
+export type SignupItem = {
+  name: string;
+  label: string;
+  placeholder: string;
+  prompted: boolean;
+  required: boolean;
+  rule: string;
+  visible: boolean;
+};
+
+export function getIcon(
+  signupItem: SignupItem,
+  options: {
+    password: {
+      state: Record<string, boolean>;
+      setState: React.Dispatch<React.SetStateAction<Record<string, boolean>>>;
+    };
+  },
+  Button: React.JSX.ElementType
+) {
+  const eye = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className="lucide lucide-eye"
+    >
+      <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" />
+      <circle cx="12" cy="12" r="3" />
+    </svg>
+  );
+  const eyeOff = (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      className="lucide lucide-eye-off"
+    >
+      <path d="M9.88 9.88a3 3 0 1 0 4.24 4.24" />
+      <path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68" />
+      <path d="M6.61 6.61A13.526 13.526 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61" />
+      <line x1="2" x2="22" y1="2" y2="22" />
+    </svg>
+  );
+  const type = getType(signupItem);
+  const key = getKey(signupItem);
+  if (type === "password") {
+    const showPassword = options.password.state[key];
+    return (
+      <Button
+        variant="ghost"
+        size="icon"
+        className="absolute top-1/2 right-2 -translate-y-1/2"
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          options.password.setState({
+            ...options.password.state,
+            [key]: !showPassword,
+          });
+        }}
+      >
+        {showPassword ? eyeOff : eye}
+        <span className="sr-only">Toggle password visibility</span>
+      </Button>
+    );
+  } else {
+    return null;
+  }
+}
+
+export function getKey(signupItem: SignupItem) {
+  const nameMap = {
+    ID: "id",
+    Username: "username",
+    // also firstName, lastName
+    "Display name": "name",
+    Affiliation: "affiliation",
+    "ID card": "idCard",
+    Email: "email",
+    Phone: "phone",
+    Password: "password",
+    "Confirm password": "confirm",
+    "Invitation code": "invitationCode",
+    "Country/Region": "country_region",
+    Agreement: "agreement",
+  };
+  if (Object.keys(nameMap).includes(signupItem.name)) {
+    return nameMap[signupItem.name];
+  } else {
+    return signupItem.name;
+  }
+}
+
+export function getType(
+  signupItem: SignupItem,
+  options?: { hidePassword: Record<string, boolean> }
+) {
+  const password = ["password", "confirm"];
+  const key = getKey(signupItem);
+  if (password.includes(key) && !options?.hidePassword[key]) {
+    return "password";
+  } else {
+    return "text";
+  }
+}
+
+export function getPasswordVisibilityRecord(
+  signupItems: SignupItem[]
+): Record<string, boolean> {
+  return Object.fromEntries(
+    signupItems
+      .filter((item) => getType(item) === "password")
+      .map((item) => [getKey(item), false])
+  );
+}
+
+export function getFormProps(signupItem: SignupItem) {
+  return {
+    name: getKey(signupItem),
+    label: signupItem.label || signupItem.name,
+    placeholder: signupItem.placeholder,
+    required: signupItem.required,
+    type: getType(signupItem),
+  };
+}
+
+export function getZod(z: any, signupItem: SignupItem) {
+  const key = getKey(signupItem);
+  let validator: any = z.string();
+  if (key === "email") {
+    validator = validator.email();
+  }
+  if (!signupItem.required) {
+    validator = validator.optional();
+  }
+  return validator;
+}
+
+export function getDefaultValues(signupItems: SignupItem[]) {
+  const entries = signupItems.map((item) => {
+    return [getKey(item), ""];
+  });
+  // add codes
+  const codes = signupItems
+    .filter((item) => requiresCode(item))
+    .map((item) => {
+      return [getKey(item) + "Code", ""];
+    });
+  return Object.fromEntries([...entries, ...codes]);
+}
+
+export function requiresCode(signupItem: SignupItem) {
+  const key = getKey(signupItem);
+  return (
+    (key === "email" || key === "phone") &&
+    signupItem.rule !== "No verification"
+  );
+}

package/src/i18n/en/signup.json

@@ -0,0 +1,48 @@
+{
+  "translation": {
+    "signup": {
+      "username": "Username",
+      "confirm": "Confirm password",
+      "signInNow": "Sign In Now",
+      "signUp": "Sign Up",
+      "haveAccount": "Have account?"
+    },
+    "forget": {
+      "username": "Please input your username.",
+      "firstName": "Please input your first name.",
+      "lastName": "Please input your last name.",
+      "realName": "Please input your real name.",
+      "displayName": "Please input your display name.",
+      "affliation": "Please input your affliation.",
+      "idCard": "Please input your ID card number.",
+      "code": "Please input your verification code.",
+      "email": "Please input your email.",
+      "confirm": "Please confirm your password and ensure it matches.",
+      "invitationCode": "Please input your invitation code."
+    },
+    "format": {
+      "idCard": "The ID card number format is incorrect."
+    },
+    "general": {
+      "firstName": "First name",
+      "lastName": "Last name",
+      "displayName": "Display name",
+      "realName": "Real name",
+      "email": "Email",
+      "password": "Password",
+      "captcha": "Captcha"
+    },
+    "user": {
+      "affliation": "Affliation",
+      "idCard": "ID card"
+    },
+    "code": {
+      "email": "Email code",
+      "sending": "Sending",
+      "sendCode": "Send code"
+    },
+    "application": {
+      "invitationCode": "Invitation code"
+    }
+  }
+}

package/src/i18n/index.ts

@@ -0,0 +1,17 @@
+import i18n from "i18next";
+// import detector from "i18next-browser-languagedetector";
+import { initReactI18next } from "react-i18next";
+import en from "./en/signup.json";
+
+i18n
+  // .use(detector)
+  .use(initReactI18next) // passes i18n down to react-i18next
+  .init({
+    lng: "en",
+    fallbackLng: "en", // use en if detected lng is not available
+    resources: {
+      en,
+    },
+  });
+
+export default i18n;

package/src/index.tsx

@@ -1,3 +1,8 @@
 import getAuthConfig from "./auth/config";
+import { SignUp, useSignUp, SignUpProvider } from "./components/SignUp";
 
-export { getAuthConfig };
+// function SignUp() {
+//   return <>Sign up</>;
+// }
+
+export { getAuthConfig, SignUp, useSignUp, SignUpProvider };