From 5c507bf76b2c83ad90febaac72024be94a1d9abb Mon Sep 17 00:00:00 2001 From: Taylor Dawson Date: Tue, 17 Dec 2024 18:17:18 -0800 Subject: [PATCH 1/8] Adds postcss-import plugin + fixes import for react phone styles --- packages/sdk-react/package.json | 9 +-- packages/sdk-react/rollup.config.mjs | 69 +++++++++++-------- .../src/components/auth/PhoneInput.css | 1 - .../src/components/auth/PhoneInput.tsx | 3 +- packages/sdk-react/src/index.ts | 1 - pnpm-lock.yaml | 19 ++++- 6 files changed, 62 insertions(+), 40 deletions(-) delete mode 100644 packages/sdk-react/src/components/auth/PhoneInput.css diff --git a/packages/sdk-react/package.json b/packages/sdk-react/package.json index f975c3b8c..f1c10c343 100644 --- a/packages/sdk-react/package.json +++ b/packages/sdk-react/package.json @@ -55,21 +55,22 @@ "@mui/material": "^6.1.5", "@noble/hashes": "1.4.0", "@react-oauth/google": "^0.12.1", - "@turnkey/sdk-browser": "workspace:*", - "@turnkey/wallet-stamper": "workspace:*", "@turnkey/crypto": "workspace:*", + "@turnkey/sdk-browser": "workspace:*", "@turnkey/sdk-server": "workspace:*", - "usehooks-ts": "^3.1.0", + "@turnkey/wallet-stamper": "workspace:*", "libphonenumber-js": "^1.11.14", "next": "^15.0.2", "react-apple-login": "^1.1.6", - "react-international-phone": "^4.3.0" + "react-international-phone": "^4.3.0", + "usehooks-ts": "^3.1.0" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "devDependencies": { "@types/react": "^18.2.75", + "postcss-import": "^16.1.0", "react": "^18.2.0" }, "engines": { diff --git a/packages/sdk-react/rollup.config.mjs b/packages/sdk-react/rollup.config.mjs index fef551e5a..8edbd6153 100644 --- a/packages/sdk-react/rollup.config.mjs +++ b/packages/sdk-react/rollup.config.mjs @@ -1,47 +1,54 @@ -import typescript from "@rollup/plugin-typescript"; -import nodeExternals from "rollup-plugin-node-externals"; -import path from "node:path"; -import postcss from "rollup-plugin-postcss"; -import preserveDirectives from "rollup-preserve-directives"; -import url from "@rollup/plugin-url"; -import alias from "@rollup/plugin-alias"; -import copy from "rollup-plugin-copy"; +import typescript from '@rollup/plugin-typescript'; +import nodeExternals from 'rollup-plugin-node-externals'; +import path from 'node:path'; +import postcss from 'rollup-plugin-postcss'; +import preserveDirectives from 'rollup-preserve-directives'; +import url from '@rollup/plugin-url'; +import alias from '@rollup/plugin-alias'; +import copy from 'rollup-plugin-copy'; +import postcssImport from 'postcss-import'; const getFormatConfig = (format) => { - const pkgPath = path.join(process.cwd(), "package.json"); + const pkgPath = path.join(process.cwd(), 'package.json'); const __dirname = path.dirname(new URL(import.meta.url).pathname); return { input: 'src/index.ts', output: { format, - dir: "dist", + dir: 'dist', entryFileNames: `[name].${format === 'esm' ? 'mjs' : 'js'}`, preserveModules: true, sourcemap: true, }, plugins: [ - alias({ // required for svg assets + alias({ + // required for svg assets entries: [ - { find: 'assets', replacement: path.resolve(__dirname, 'src/assets') } - ] + { + find: 'assets', + replacement: path.resolve(__dirname, 'src/assets'), + }, + ], }), - postcss({ // required for css module bundling + postcss({ + // required for css module bundling modules: true, extensions: ['.css', '.scss'], use: ['sass'], extract: `styles.${format}.css`, minimize: true, sourceMap: true, + plugins: [postcssImport()], }), typescript({ outputToFilesystem: true, tsconfig: './tsconfig.json', compilerOptions: { - outDir: "dist", + outDir: 'dist', composite: false, declaration: format === 'esm', - declarationMap: format === "esm", + declarationMap: format === 'esm', sourceMap: true, }, }), @@ -50,29 +57,31 @@ const getFormatConfig = (format) => { packagePath: pkgPath, builtinsPrefix: 'ignore', }), - url({ // required for fonts and assets + url({ + // required for fonts and assets include: [ - '**/*.svg', - '**/*.png', - '**/*.jpg', + '**/*.svg', + '**/*.png', + '**/*.jpg', '**/*.gif', - '**/*.woff', - '**/*.woff2', - '**/*.ttf', - '**/*.eot' + '**/*.woff', + '**/*.woff2', + '**/*.ttf', + '**/*.eot', ], limit: 8192, - emitFiles: true, - fileName: 'assets/fonts/[name].[hash][extname]', + emitFiles: true, + fileName: 'assets/fonts/[name].[hash][extname]', }), - copy({ // required for fonts + copy({ + // required for fonts targets: [ { - src: path.resolve(__dirname, "src/assets/fonts/**/*"), - dest: path.resolve(__dirname, "dist/assets/fonts"), + src: path.resolve(__dirname, 'src/assets/fonts/**/*'), + dest: path.resolve(__dirname, 'dist/assets/fonts'), }, ], - verbose: false, + verbose: false, }), ], }; diff --git a/packages/sdk-react/src/components/auth/PhoneInput.css b/packages/sdk-react/src/components/auth/PhoneInput.css deleted file mode 100644 index cb5c8c99f..000000000 --- a/packages/sdk-react/src/components/auth/PhoneInput.css +++ /dev/null @@ -1 +0,0 @@ -@import "react-international-phone/style.css"; diff --git a/packages/sdk-react/src/components/auth/PhoneInput.tsx b/packages/sdk-react/src/components/auth/PhoneInput.tsx index 1cb84b0c4..7aa1c5c28 100644 --- a/packages/sdk-react/src/components/auth/PhoneInput.tsx +++ b/packages/sdk-react/src/components/auth/PhoneInput.tsx @@ -1,4 +1,3 @@ -import "./PhoneInput.css"; import { BaseTextFieldProps, InputAdornment, @@ -14,7 +13,7 @@ import { usePhoneInput, } from "react-international-phone"; import { FlagImage as OriginalFlagImage } from "react-international-phone"; - +import "react-international-phone/style.css"; const FlagImage = OriginalFlagImage as React.ElementType; const allowedCountries = ["us", "ca"]; diff --git a/packages/sdk-react/src/index.ts b/packages/sdk-react/src/index.ts index a9c1b54c5..524d933ef 100644 --- a/packages/sdk-react/src/index.ts +++ b/packages/sdk-react/src/index.ts @@ -1,6 +1,5 @@ import "./components/auth/Auth.module.css"; import "./components/auth/OtpVerification.module.css"; -import "./components/auth/PhoneInput.css"; import "./components/export/Export.module.css"; import "./components/import/Import.module.css"; import "./components/theme.css"; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5640a20fa..cc2b1869c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1874,6 +1874,9 @@ importers: '@types/react': specifier: ^18.2.75 version: 18.2.75 + postcss-import: + specifier: ^16.1.0 + version: 16.1.0(postcss@8.4.38) react: specifier: ^18.2.0 version: 18.2.0 @@ -7293,10 +7296,10 @@ packages: dependencies: '@babel/runtime': 7.26.0 '@emotion/cache': 11.13.1 - '@emotion/react': 11.13.3(@types/react@18.2.14)(react@18.2.0) + '@emotion/react': 11.13.3(@types/react@18.2.75)(react@18.2.0) '@emotion/serialize': 1.3.2 '@emotion/sheet': 1.4.0 - '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.2.14)(react@18.2.0) + '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.2.75)(react@18.2.0) csstype: 3.1.3 prop-types: 15.8.1 react: 18.2.0 @@ -21593,6 +21596,18 @@ packages: read-cache: 1.0.0 resolve: 1.22.8 + /postcss-import@16.1.0(postcss@8.4.38): + resolution: {integrity: sha512-7hsAZ4xGXl4MW+OKEWCnF6T5jqBw80/EE9aXg1r2yyn1RsVEU8EtKXbijEODa+rg7iih4bKf7vlvTGYR4CnPNg==} + engines: {node: '>=18.0.0'} + peerDependencies: + postcss: ^8.0.0 + dependencies: + postcss: 8.4.38 + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.8 + dev: true + /postcss-js@4.0.1(postcss@8.4.38): resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} engines: {node: ^12 || ^14 || >= 16} From e7cba5288c589e91e766179c0a8da0cce47a4d30 Mon Sep 17 00:00:00 2001 From: Taylor Dawson Date: Tue, 17 Dec 2024 18:46:42 -0800 Subject: [PATCH 2/8] Add use client directive --- packages/sdk-react/src/components/auth/Auth.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx index aee230c0f..ad3c1ecf8 100644 --- a/packages/sdk-react/src/components/auth/Auth.tsx +++ b/packages/sdk-react/src/components/auth/Auth.tsx @@ -1,3 +1,5 @@ +"use client"; + import styles from "./Auth.module.css"; import React, { useEffect, useState } from "react"; import { initOtpAuth, getSuborgs, createSuborg, oauth } from "../../actions/"; From a41777bc7223f5e9c5c617c6ece2bd1606b0edf3 Mon Sep 17 00:00:00 2001 From: Taylor Dawson Date: Tue, 17 Dec 2024 19:35:05 -0800 Subject: [PATCH 3/8] Move react types to peer deps --- packages/sdk-react/package.json | 4 ++-- packages/sdk-react/src/components/auth/Auth.tsx | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/sdk-react/package.json b/packages/sdk-react/package.json index f1c10c343..9a3861cc4 100644 --- a/packages/sdk-react/package.json +++ b/packages/sdk-react/package.json @@ -66,10 +66,10 @@ "usehooks-ts": "^3.1.0" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "@types/react": "^18.2.75" }, "devDependencies": { - "@types/react": "^18.2.75", "postcss-import": "^16.1.0", "react": "^18.2.0" }, diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx index ad3c1ecf8..2de0b631c 100644 --- a/packages/sdk-react/src/components/auth/Auth.tsx +++ b/packages/sdk-react/src/components/auth/Auth.tsx @@ -18,6 +18,8 @@ import { useTurnkey } from "../../hooks/use-turnkey"; import { getVerifiedSuborgs } from "../../actions/getVerifiedSuborgs"; import { FilterType, OtpType, authErrors } from "./constants"; +type AuthSection = "email" | "passkey" | "phone" | "socials"; + const passkeyIcon = ( = ({ ); }; - const renderSection = (section: string) => { + const renderSection = (section: AuthSection) => { switch (section) { case "email": return authConfig.emailEnabled && !otpId ? ( From 200f68683dccbced48cd40c821076df807537c30 Mon Sep 17 00:00:00 2001 From: Taylor Dawson Date: Wed, 18 Dec 2024 09:27:14 -0800 Subject: [PATCH 4/8] use AuthSection type in the configOrder --- .../sdk-react/src/components/auth/Auth.tsx | 158 +++++++++--------- 1 file changed, 79 insertions(+), 79 deletions(-) diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx index 2de0b631c..5c7a367bd 100644 --- a/packages/sdk-react/src/components/auth/Auth.tsx +++ b/packages/sdk-react/src/components/auth/Auth.tsx @@ -1,24 +1,24 @@ -"use client"; - -import styles from "./Auth.module.css"; -import React, { useEffect, useState } from "react"; -import { initOtpAuth, getSuborgs, createSuborg, oauth } from "../../actions/"; -import { MuiPhone } from "./PhoneInput"; -import GoogleAuthButton from "./Google"; -import AppleAuthButton from "./Apple"; -import FacebookAuthButton from "./Facebook"; -import { CircularProgress, TextField } from "@mui/material"; -import turnkeyIcon from "assets/turnkey.svg"; -import googleIcon from "assets/google.svg"; -import facebookIcon from "assets/facebook.svg"; -import appleIcon from "assets/apple.svg"; -import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; -import OtpVerification from "./OtpVerification"; -import { useTurnkey } from "../../hooks/use-turnkey"; -import { getVerifiedSuborgs } from "../../actions/getVerifiedSuborgs"; -import { FilterType, OtpType, authErrors } from "./constants"; - -type AuthSection = "email" | "passkey" | "phone" | "socials"; +'use client'; + +import styles from './Auth.module.css'; +import React, { useEffect, useState } from 'react'; +import { initOtpAuth, getSuborgs, createSuborg, oauth } from '../../actions/'; +import { MuiPhone } from './PhoneInput'; +import GoogleAuthButton from './Google'; +import AppleAuthButton from './Apple'; +import FacebookAuthButton from './Facebook'; +import { CircularProgress, TextField } from '@mui/material'; +import turnkeyIcon from 'assets/turnkey.svg'; +import googleIcon from 'assets/google.svg'; +import facebookIcon from 'assets/facebook.svg'; +import appleIcon from 'assets/apple.svg'; +import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; +import OtpVerification from './OtpVerification'; +import { useTurnkey } from '../../hooks/use-turnkey'; +import { getVerifiedSuborgs } from '../../actions/getVerifiedSuborgs'; +import { FilterType, OtpType, authErrors } from './constants'; + +type AuthSection = 'email' | 'passkey' | 'phone' | 'socials'; const passkeyIcon = ( @@ -64,7 +64,7 @@ interface AuthProps { facebookEnabled: boolean; googleEnabled: boolean; }; - configOrder: string[]; + configOrder: AuthSection[]; customSmsMessage?: string; } @@ -76,15 +76,15 @@ const Auth: React.FC = ({ customSmsMessage, }) => { const { passkeyClient, authIframeClient } = useTurnkey(); - const [email, setEmail] = useState(""); - const [phone, setPhone] = useState(""); + const [email, setEmail] = useState(''); + const [phone, setPhone] = useState(''); const [otpId, setOtpId] = useState(null); - const [step, setStep] = useState("auth"); - const [oauthLoading, setOauthLoading] = useState(""); - const [suborgId, setSuborgId] = useState(""); + const [step, setStep] = useState('auth'); + const [oauthLoading, setOauthLoading] = useState(''); + const [suborgId, setSuborgId] = useState(''); const [passkeySignupScreen, setPasskeySignupScreen] = useState(false); const [passkeyCreationScreen, setPasskeyCreationScreen] = useState(false); - const [passkeySignupError, setPasskeySignupError] = useState(""); + const [passkeySignupError, setPasskeySignupError] = useState(''); const [loading, setLoading] = useState(true); const [passkeyCreated, setPasskeyCreated] = useState(false); @@ -172,16 +172,16 @@ const Auth: React.FC = ({ }; const handleSignupWithPasskey = async () => { - setPasskeySignupError(""); + setPasskeySignupError(''); const siteInfo = `${ new URL(window.location.href).hostname } - ${new Date().toLocaleString(undefined, { - year: "numeric", - month: "long", - day: "numeric", - hour: "2-digit", - minute: "2-digit", - second: "2-digit", + year: 'numeric', + month: 'long', + day: 'numeric', + hour: '2-digit', + minute: '2-digit', + second: '2-digit', })}`; setPasskeySignupScreen(false); setPasskeyCreationScreen(true); @@ -196,7 +196,7 @@ const Auth: React.FC = ({ const response = await createSuborg({ email, passkey: { - authenticatorName: "First Passkey", + authenticatorName: 'First Passkey', challenge: encodedChallenge, attestation, }, @@ -289,20 +289,20 @@ const Auth: React.FC = ({ { setPasskeyCreationScreen(false); - setPasskeySignupError(""); + setPasskeySignupError(''); setPasskeySignupScreen(false); setOtpId(null); }} sx={{ - color: "var(--text-secondary)", - position: "absolute", + color: 'var(--text-secondary)', + position: 'absolute', top: 16, left: 16, zIndex: 10, - cursor: "pointer", - borderRadius: "50%", - padding: "6px", - transition: "background-color 0.3s ease", + cursor: 'pointer', + borderRadius: '50%', + padding: '6px', + transition: 'background-color 0.3s ease', }} /> ); @@ -311,13 +311,13 @@ const Auth: React.FC = ({ const { googleEnabled, appleEnabled, facebookEnabled } = authConfig; const layout = [googleEnabled, appleEnabled, facebookEnabled].filter(Boolean).length >= 2 - ? "inline" - : "stacked"; + ? 'inline' + : 'stacked'; return (
= ({ clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID!} iframePublicKey={authIframeClient!.iframePublicKey!} onSuccess={(response: any) => - handleOAuthLogin(response.idToken, "Google") + handleOAuthLogin(response.idToken, 'Google') } /> )} @@ -338,7 +338,7 @@ const Auth: React.FC = ({ clientId={process.env.NEXT_PUBLIC_APPLE_CLIENT_ID!} iframePublicKey={authIframeClient!.iframePublicKey!} onSuccess={(response: any) => - handleOAuthLogin(response.idToken, "Apple") + handleOAuthLogin(response.idToken, 'Apple') } /> )} @@ -348,7 +348,7 @@ const Auth: React.FC = ({ clientId={process.env.NEXT_PUBLIC_FACEBOOK_CLIENT_ID!} iframePublicKey={authIframeClient!.iframePublicKey!} onSuccess={(response: any) => - handleOAuthLogin(response.id_token, "Facebook") + handleOAuthLogin(response.id_token, 'Facebook') } /> )} @@ -358,7 +358,7 @@ const Auth: React.FC = ({ const renderSection = (section: AuthSection) => { switch (section) { - case "email": + case 'email': return authConfig.emailEnabled && !otpId ? (
@@ -371,23 +371,23 @@ const Auth: React.FC = ({ onChange={(e) => setEmail(e.target.value)} fullWidth sx={{ - "& .MuiOutlinedInput-root": { - color: "var(--input-text)", - "& fieldset": { - borderColor: "var(--input-border)", + '& .MuiOutlinedInput-root': { + color: 'var(--input-text)', + '& fieldset': { + borderColor: 'var(--input-border)', }, - "&:hover fieldset": { - borderColor: "var(--input-hover-border)", + '&:hover fieldset': { + borderColor: 'var(--input-hover-border)', }, - "&.Mui-focused fieldset": { - borderColor: "var(--input-focus-border)", - border: "1px solid", + '&.Mui-focused fieldset': { + borderColor: 'var(--input-focus-border)', + border: '1px solid', }, }, - "& .MuiInputBase-input": { - padding: "12px", + '& .MuiInputBase-input': { + padding: '12px', }, - backgroundColor: "var(--input-bg)", + backgroundColor: 'var(--input-bg)', }} variant="outlined" /> @@ -405,7 +405,7 @@ const Auth: React.FC = ({
) : null; - case "passkey": + case 'passkey': return authConfig.passkeyEnabled && !otpId ? (
) : null; - case "phone": + case 'phone': return authConfig.phoneEnabled && !otpId ? (
@@ -443,7 +443,7 @@ const Auth: React.FC = ({
) : null; - case "socials": + case 'socials': return authConfig.googleEnabled || authConfig.appleEnabled || authConfig.facebookEnabled @@ -500,15 +500,15 @@ const Auth: React.FC = ({

{passkeySignupError - ? "Authentication error" + ? 'Authentication error' : passkeyCreated - ? "Logging in with passkey..." - : "Creating passkey..."} + ? 'Logging in with passkey...' + : 'Creating passkey...'}

-
{passkeySignupError ? passkeySignupError : ""}
+
{passkeySignupError ? passkeySignupError : ''}
{passkeySignupError && ( @@ -523,7 +523,7 @@ const Auth: React.FC = ({
) : (
- {oauthLoading !== "" ? ( + {oauthLoading !== '' ? (

Verifying with {oauthLoading} @@ -534,13 +534,13 @@ const Auth: React.FC = ({ thickness={1} className={styles.circularProgress!} /> - {oauthLoading === "Google" && ( + {oauthLoading === 'Google' && ( )} - {oauthLoading === "Facebook" && ( + {oauthLoading === 'Facebook' && ( )} - {oauthLoading === "Apple" && ( + {oauthLoading === 'Apple' && ( )}

@@ -553,7 +553,7 @@ const Auth: React.FC = ({
{otpId && renderBackButton()}

- {!otpId && "Log in or sign up"} + {!otpId && 'Log in or sign up'}

{!otpId && @@ -584,7 +584,7 @@ const Auth: React.FC = ({ {!otpId && (
- By continuing, you agree to our{" "} + By continuing, you agree to our{' '} = ({ className={styles.tosBold} > Terms of Service - {" "} - &{" "} + {' '} + &{' '} = ({ > Privacy Policy - {"."} + {'.'}
)}
- (window.location.href = "https://www.turnkey.com/") + (window.location.href = 'https://www.turnkey.com/') } className={styles.poweredBy} > From eedf260b95949ac272005dafd5865f3836455489 Mon Sep 17 00:00:00 2001 From: Taylor Dawson Date: Wed, 18 Dec 2024 10:30:25 -0800 Subject: [PATCH 5/8] Fix formatting --- .../sdk-react/src/components/auth/Auth.tsx | 156 +++++++++--------- 1 file changed, 78 insertions(+), 78 deletions(-) diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx index 5c7a367bd..4d7f49368 100644 --- a/packages/sdk-react/src/components/auth/Auth.tsx +++ b/packages/sdk-react/src/components/auth/Auth.tsx @@ -1,24 +1,24 @@ -'use client'; - -import styles from './Auth.module.css'; -import React, { useEffect, useState } from 'react'; -import { initOtpAuth, getSuborgs, createSuborg, oauth } from '../../actions/'; -import { MuiPhone } from './PhoneInput'; -import GoogleAuthButton from './Google'; -import AppleAuthButton from './Apple'; -import FacebookAuthButton from './Facebook'; -import { CircularProgress, TextField } from '@mui/material'; -import turnkeyIcon from 'assets/turnkey.svg'; -import googleIcon from 'assets/google.svg'; -import facebookIcon from 'assets/facebook.svg'; -import appleIcon from 'assets/apple.svg'; -import ChevronLeftIcon from '@mui/icons-material/ChevronLeft'; -import OtpVerification from './OtpVerification'; -import { useTurnkey } from '../../hooks/use-turnkey'; -import { getVerifiedSuborgs } from '../../actions/getVerifiedSuborgs'; -import { FilterType, OtpType, authErrors } from './constants'; - -type AuthSection = 'email' | 'passkey' | 'phone' | 'socials'; +"use client"; + +import styles from "./Auth.module.css"; +import React, { useEffect, useState } from "react"; +import { initOtpAuth, getSuborgs, createSuborg, oauth } from "../../actions/"; +import { MuiPhone } from "./PhoneInput"; +import GoogleAuthButton from "./Google"; +import AppleAuthButton from "./Apple"; +import FacebookAuthButton from "./Facebook"; +import { CircularProgress, TextField } from "@mui/material"; +import turnkeyIcon from "assets/turnkey.svg"; +import googleIcon from "assets/google.svg"; +import facebookIcon from "assets/facebook.svg"; +import appleIcon from "assets/apple.svg"; +import ChevronLeftIcon from "@mui/icons-material/ChevronLeft"; +import OtpVerification from "./OtpVerification"; +import { useTurnkey } from "../../hooks/use-turnkey"; +import { getVerifiedSuborgs } from "../../actions/getVerifiedSuborgs"; +import { FilterType, OtpType, authErrors } from "./constants"; + +type AuthSection = "email" | "passkey" | "phone" | "socials"; const passkeyIcon = ( @@ -76,15 +76,15 @@ const Auth: React.FC = ({ customSmsMessage, }) => { const { passkeyClient, authIframeClient } = useTurnkey(); - const [email, setEmail] = useState(''); - const [phone, setPhone] = useState(''); + const [email, setEmail] = useState(""); + const [phone, setPhone] = useState(""); const [otpId, setOtpId] = useState(null); - const [step, setStep] = useState('auth'); - const [oauthLoading, setOauthLoading] = useState(''); - const [suborgId, setSuborgId] = useState(''); + const [step, setStep] = useState("auth"); + const [oauthLoading, setOauthLoading] = useState(""); + const [suborgId, setSuborgId] = useState(""); const [passkeySignupScreen, setPasskeySignupScreen] = useState(false); const [passkeyCreationScreen, setPasskeyCreationScreen] = useState(false); - const [passkeySignupError, setPasskeySignupError] = useState(''); + const [passkeySignupError, setPasskeySignupError] = useState(""); const [loading, setLoading] = useState(true); const [passkeyCreated, setPasskeyCreated] = useState(false); @@ -172,16 +172,16 @@ const Auth: React.FC = ({ }; const handleSignupWithPasskey = async () => { - setPasskeySignupError(''); + setPasskeySignupError(""); const siteInfo = `${ new URL(window.location.href).hostname } - ${new Date().toLocaleString(undefined, { - year: 'numeric', - month: 'long', - day: 'numeric', - hour: '2-digit', - minute: '2-digit', - second: '2-digit', + year: "numeric", + month: "long", + day: "numeric", + hour: "2-digit", + minute: "2-digit", + second: "2-digit", })}`; setPasskeySignupScreen(false); setPasskeyCreationScreen(true); @@ -196,7 +196,7 @@ const Auth: React.FC = ({ const response = await createSuborg({ email, passkey: { - authenticatorName: 'First Passkey', + authenticatorName: "First Passkey", challenge: encodedChallenge, attestation, }, @@ -289,20 +289,20 @@ const Auth: React.FC = ({ { setPasskeyCreationScreen(false); - setPasskeySignupError(''); + setPasskeySignupError(""); setPasskeySignupScreen(false); setOtpId(null); }} sx={{ - color: 'var(--text-secondary)', - position: 'absolute', + color: "var(--text-secondary)", + position: "absolute", top: 16, left: 16, zIndex: 10, - cursor: 'pointer', - borderRadius: '50%', - padding: '6px', - transition: 'background-color 0.3s ease', + cursor: "pointer", + borderRadius: "50%", + padding: "6px", + transition: "background-color 0.3s ease", }} /> ); @@ -311,13 +311,13 @@ const Auth: React.FC = ({ const { googleEnabled, appleEnabled, facebookEnabled } = authConfig; const layout = [googleEnabled, appleEnabled, facebookEnabled].filter(Boolean).length >= 2 - ? 'inline' - : 'stacked'; + ? "inline" + : "stacked"; return (
= ({ clientId={process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID!} iframePublicKey={authIframeClient!.iframePublicKey!} onSuccess={(response: any) => - handleOAuthLogin(response.idToken, 'Google') + handleOAuthLogin(response.idToken, "Google") } /> )} @@ -338,7 +338,7 @@ const Auth: React.FC = ({ clientId={process.env.NEXT_PUBLIC_APPLE_CLIENT_ID!} iframePublicKey={authIframeClient!.iframePublicKey!} onSuccess={(response: any) => - handleOAuthLogin(response.idToken, 'Apple') + handleOAuthLogin(response.idToken, "Apple") } /> )} @@ -348,7 +348,7 @@ const Auth: React.FC = ({ clientId={process.env.NEXT_PUBLIC_FACEBOOK_CLIENT_ID!} iframePublicKey={authIframeClient!.iframePublicKey!} onSuccess={(response: any) => - handleOAuthLogin(response.id_token, 'Facebook') + handleOAuthLogin(response.id_token, "Facebook") } /> )} @@ -358,7 +358,7 @@ const Auth: React.FC = ({ const renderSection = (section: AuthSection) => { switch (section) { - case 'email': + case "email": return authConfig.emailEnabled && !otpId ? (
@@ -371,23 +371,23 @@ const Auth: React.FC = ({ onChange={(e) => setEmail(e.target.value)} fullWidth sx={{ - '& .MuiOutlinedInput-root': { - color: 'var(--input-text)', - '& fieldset': { - borderColor: 'var(--input-border)', + "& .MuiOutlinedInput-root": { + color: "var(--input-text)", + "& fieldset": { + borderColor: "var(--input-border)", }, - '&:hover fieldset': { - borderColor: 'var(--input-hover-border)', + "&:hover fieldset": { + borderColor: "var(--input-hover-border)", }, - '&.Mui-focused fieldset': { - borderColor: 'var(--input-focus-border)', - border: '1px solid', + "&.Mui-focused fieldset": { + borderColor: "var(--input-focus-border)", + border: "1px solid", }, }, - '& .MuiInputBase-input': { - padding: '12px', + "& .MuiInputBase-input": { + padding: "12px", }, - backgroundColor: 'var(--input-bg)', + backgroundColor: "var(--input-bg)", }} variant="outlined" /> @@ -405,7 +405,7 @@ const Auth: React.FC = ({
) : null; - case 'passkey': + case "passkey": return authConfig.passkeyEnabled && !otpId ? (
) : null; - case 'phone': + case "phone": return authConfig.phoneEnabled && !otpId ? (
@@ -443,7 +443,7 @@ const Auth: React.FC = ({
) : null; - case 'socials': + case "socials": return authConfig.googleEnabled || authConfig.appleEnabled || authConfig.facebookEnabled @@ -500,15 +500,15 @@ const Auth: React.FC = ({

{passkeySignupError - ? 'Authentication error' + ? "Authentication error" : passkeyCreated - ? 'Logging in with passkey...' - : 'Creating passkey...'} + ? "Logging in with passkey..." + : "Creating passkey..."}

-
{passkeySignupError ? passkeySignupError : ''}
+
{passkeySignupError ? passkeySignupError : ""}
{passkeySignupError && ( @@ -523,7 +523,7 @@ const Auth: React.FC = ({
) : (
- {oauthLoading !== '' ? ( + {oauthLoading !== "" ? (

Verifying with {oauthLoading} @@ -534,13 +534,13 @@ const Auth: React.FC = ({ thickness={1} className={styles.circularProgress!} /> - {oauthLoading === 'Google' && ( + {oauthLoading === "Google" && ( )} - {oauthLoading === 'Facebook' && ( + {oauthLoading === "Facebook" && ( )} - {oauthLoading === 'Apple' && ( + {oauthLoading === "Apple" && ( )}

@@ -553,7 +553,7 @@ const Auth: React.FC = ({
{otpId && renderBackButton()}

- {!otpId && 'Log in or sign up'} + {!otpId && "Log in or sign up"}

{!otpId && @@ -584,7 +584,7 @@ const Auth: React.FC = ({ {!otpId && (
- By continuing, you agree to our{' '} + By continuing, you agree to our{" "} = ({ className={styles.tosBold} > Terms of Service - {' '} - &{' '} + {" "} + &{" "} = ({ > Privacy Policy - {'.'} + {"."}
)}
- (window.location.href = 'https://www.turnkey.com/') + (window.location.href = "https://www.turnkey.com/") } className={styles.poweredBy} > From 82368e48795e0f4170c951149e9604fe86e67a0b Mon Sep 17 00:00:00 2001 From: Taylor Dawson Date: Wed, 18 Dec 2024 10:36:46 -0800 Subject: [PATCH 6/8] Update lockfile --- pnpm-lock.yaml | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index cc2b1869c..686000940 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1855,6 +1855,9 @@ importers: '@turnkey/wallet-stamper': specifier: workspace:* version: link:../wallet-stamper + '@types/react': + specifier: ^18.2.75 + version: 18.2.75 libphonenumber-js: specifier: ^1.11.14 version: 1.11.14 @@ -1871,9 +1874,6 @@ importers: specifier: ^3.1.0 version: 3.1.0(react@18.2.0) devDependencies: - '@types/react': - specifier: ^18.2.75 - version: 18.2.75 postcss-import: specifier: ^16.1.0 version: 16.1.0(postcss@8.4.38) @@ -7296,10 +7296,10 @@ packages: dependencies: '@babel/runtime': 7.26.0 '@emotion/cache': 11.13.1 - '@emotion/react': 11.13.3(@types/react@18.2.75)(react@18.2.0) + '@emotion/react': 11.13.3(@types/react@18.2.14)(react@18.2.0) '@emotion/serialize': 1.3.2 '@emotion/sheet': 1.4.0 - '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.2.75)(react@18.2.0) + '@emotion/styled': 11.13.0(@emotion/react@11.13.3)(@types/react@18.2.14)(react@18.2.0) csstype: 3.1.3 prop-types: 15.8.1 react: 18.2.0 @@ -13023,6 +13023,7 @@ packages: dependencies: '@types/prop-types': 15.7.5 csstype: 3.1.2 + dev: false /@types/react@18.3.3: resolution: {integrity: sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==} From 65054ca9aff21a72cdd23fde531d1a645c5161f7 Mon Sep 17 00:00:00 2001 From: Mohammad Cheikh Date: Thu, 19 Dec 2024 11:45:57 -0500 Subject: [PATCH 7/8] revert other non bundle releated changes --- packages/sdk-react/src/components/auth/Auth.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx index 4d7f49368..ad3c1ecf8 100644 --- a/packages/sdk-react/src/components/auth/Auth.tsx +++ b/packages/sdk-react/src/components/auth/Auth.tsx @@ -18,8 +18,6 @@ import { useTurnkey } from "../../hooks/use-turnkey"; import { getVerifiedSuborgs } from "../../actions/getVerifiedSuborgs"; import { FilterType, OtpType, authErrors } from "./constants"; -type AuthSection = "email" | "passkey" | "phone" | "socials"; - const passkeyIcon = ( = ({ ); }; - const renderSection = (section: AuthSection) => { + const renderSection = (section: string) => { switch (section) { case "email": return authConfig.emailEnabled && !otpId ? ( From eaf3e20d41c0d9bb77bf6873e06410ab523d5a8f Mon Sep 17 00:00:00 2001 From: Mohammad Cheikh Date: Thu, 19 Dec 2024 11:57:08 -0500 Subject: [PATCH 8/8] add changeset --- .changeset/cuddly-starfishes-own.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/cuddly-starfishes-own.md diff --git a/.changeset/cuddly-starfishes-own.md b/.changeset/cuddly-starfishes-own.md new file mode 100644 index 000000000..e2cf5d194 --- /dev/null +++ b/.changeset/cuddly-starfishes-own.md @@ -0,0 +1,5 @@ +--- +"@turnkey/sdk-react": patch +--- + +Fix build issues with React 19+ & NextJs 15+