From 8df17913136b3a089f866a6d2fdb49bffff3e074 Mon Sep 17 00:00:00 2001 From: Taylor Dawson Date: Wed, 18 Dec 2024 09:27:14 -0800 Subject: [PATCH] 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 2de0b631..5c7a367b 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} >