Feat: Email OTP, Bootstrap recognition, and removal of the loading spinner

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamless-auth/react",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "A drop-in authentication solution for modern React applications.",
   "type": "module",
   "exports": {

src/AuthProvider.tsx

@@ -9,7 +9,6 @@
 } from 'react';
 
 import { AuthMode, createFetchWithAuth } from './fetchWithAuth';
-import LoadingSpinner from './components/LoadingSpinner';
 import { usePreviousSignIn } from './hooks/usePreviousSignIn';
 import {
   AuthenticatorTransportFuture,
@@ -42,6 +41,7 @@
   credentials: Credential[];
   updateCredential: (credential: Credential) => Promise<Credential>;
   deleteCredential: (credentialId: string) => Promise<void>;
+  loading: boolean;
 }
 
 export interface Credential {
@@ -136,6 +136,7 @@
   const hasRole = (role: string) => user?.roles?.includes(role);
 
   const validateToken = async () => {
+    setLoading(true);
     try {
       const response = await fetchWithAuth(`users/me`, {
         method: 'GET',
@@ -189,7 +190,7 @@
 
   useEffect(() => {
     validateToken();
   }, []);
 
   useEffect(() => {
     if (user && isAuthenticated) {
@@ -197,19 +198,12 @@
     }
   }, [user, isAuthenticated, markSignedIn]);
 
-  if (loading) {
-    return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-100">
-        <LoadingSpinner />;
-      </div>
-    );
-  }
-
   return (
     <AuthContext.Provider
       value={{
         user,
         logout,
+        loading,
         deleteUser,
         isAuthenticated,
         hasRole,

src/components/OtpInput.tsx

@@ -4,16 +4,28 @@ import styles from '@/styles/otpInput.module.css';
 interface Props {
   length?: number;
   value: string;
+  inputMode?: 'numeric' | 'text';
   onChange: (value: string) => void;
 }
 
-const OtpInput: React.FC<Props> = ({ length = 6, value, onChange }) => {
+const OtpInput: React.FC<Props> = ({
+  length = 6,
+  value,
+  inputMode = 'numeric',
+  onChange,
+}) => {
   const inputs = useRef<Array<HTMLInputElement | null>>([]);
 
   const values = value.split('').concat(Array(length).fill('')).slice(0, length);
 
   const handleChange = (index: number, char: string) => {
-    if (!/^\d?$/.test(char)) return;
+    if (inputMode === 'numeric') {
+      if (!/^\d?$/.test(char)) return;
+    }
+
+    if (inputMode === 'text') {
+      if (!/[a-z]/i.test(char)) return;
+    }
 
     const newValue = value.substring(0, index) + char + value.substring(index + 1);
 
@@ -48,7 +60,7 @@ const OtpInput: React.FC<Props> = ({ length = 6, value, onChange }) => {
           key={i}
           ref={el => (inputs.current[i] = el)}
           type="text"
-          inputMode="numeric"
+          inputMode={inputMode}
           maxLength={1}
           value={digit || ''}
           className={styles.otpInput}

src/views/EmailRegistration.tsx

@@ -6,6 +6,7 @@ import styles from '@/styles/verifyOTP.module.css';
 import { createFetchWithAuth } from '@/fetchWithAuth';
 import { isPasskeySupported } from '@/utils';
 import { useInternalAuth } from '@/context/InternalAuthContext';
+import OtpInput from '@/components/OtpInput';
 
 const EmailRegistration: React.FC = () => {
   const navigate = useNavigate();
@@ -129,16 +130,11 @@ const EmailRegistration: React.FC = () => {
                 — Code expires in {formatTime(emailTimeLeft)}
               </span>
             </label>
-
-            <input
-              id="emailCode"
-              type="text"
-              maxLength={6}
+            <OtpInput
+              length={6}
               value={emailOtp}
-              autoComplete="off"
-              onChange={e => setEmailOtp(e.target.value)}
-              className={styles.input}
-              required
+              onChange={setEmailOtp}
+              inputMode="text"
             />
 
             <button type="button" onClick={onResendEmail} className={styles.resend}>

src/views/Login.tsx

@@ -24,6 +24,7 @@ const Login: React.FC = () => {
   const [identifierError, setIdentifierError] = useState<string>('');
   const [passkeyAvailable, setPasskeyAvailable] = useState(false);
   const [showFallbackOptions, setShowFallbackOptions] = useState(false);
+  const [bootstrapToken, setBootstrapToken] = useState<string | null>(null);
 
   const fetchWithAuth = createFetchWithAuth({
     authMode,
@@ -41,6 +42,14 @@ const Login: React.FC = () => {
     if (hasSignedInBefore) {
       setMode('login');
     }
+
+    const params = new URLSearchParams(window.location.search);
+    const token = params.get('bootstrapToken');
+
+    if (token && token.length > 10) {
+      setBootstrapToken(token);
+      console.log('Bootstrap token detected in URL');
+    }
   }, [hasSignedInBefore]);
 
   const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -134,7 +143,11 @@ const Login: React.FC = () => {
     try {
       const response = await fetchWithAuth(`/registration/register`, {
         method: 'POST',
-        body: JSON.stringify({ email, phone }),
+        body: JSON.stringify({
+          email,
+          phone,
+          ...(bootstrapToken ? { bootstrapToken } : {}),
+        }),
       });
 
       if (!response.ok) {

tests/EmailRegistration.test.tsx

@@ -17,6 +17,14 @@ jest.mock('react-router-dom', () => ({
   useNavigate: jest.fn(),
 }));
 
+jest.mock('@/components/OtpInput', () => (props: any) => (
+  <input
+    data-testid="otp-input"
+    value={props.value}
+    onChange={e => props.onChange(e.target.value)}
+  />
+));
+
 describe('EmailRegistration', () => {
   const navigate = jest.fn();
   const validateToken = jest.fn();
@@ -57,12 +65,11 @@ describe('EmailRegistration', () => {
   test('shows validation error if OTP is not 6 digits', async () => {
     render(<EmailRegistration />);
 
-    fireEvent.change(screen.getByLabelText(/email verification code/i), {
-      target: { value: '123' },
+    fireEvent.change(screen.getByTestId('otp-input'), {
+      target: { value: 'ABC' },
     });
 
     fireEvent.click(screen.getByRole('button', { name: /verify & continue/i }));
-
     expect(screen.getByText(/please enter a valid code/i)).toBeInTheDocument();
   });
 
@@ -71,8 +78,8 @@ describe('EmailRegistration', () => {
 
     render(<EmailRegistration />);
 
-    fireEvent.change(screen.getByLabelText(/email verification code/i), {
-      target: { value: '123456' },
+    fireEvent.change(screen.getByTestId('otp-input'), {
+      target: { value: 'ABCDEF' },
     });
 
     await act(async () => {
@@ -124,8 +131,8 @@ describe('EmailRegistration', () => {
       expect(isPasskeySupported).toHaveBeenCalled();
     });
 
-    fireEvent.change(screen.getByLabelText(/email verification code/i), {
-      target: { value: '123456' },
+    fireEvent.change(screen.getByTestId('otp-input'), {
+      target: { value: 'ABCDEF' },
     });
 
     await act(async () => {
@@ -145,8 +152,8 @@ describe('EmailRegistration', () => {
 
     render(<EmailRegistration />);
 
-    fireEvent.change(screen.getByLabelText(/email verification code/i), {
-      target: { value: '123456' },
+    fireEvent.change(screen.getByTestId('otp-input'), {
+      target: { value: 'ABCDEF' },
     });
 
     await act(async () => {

tests/authProvider.test.tsx

@@ -3,7 +3,6 @@ import { AuthProvider, useAuth } from '../src/AuthProvider';
 import { createFetchWithAuth } from '../src/fetchWithAuth';
 
 jest.mock('../src/fetchWithAuth');
-jest.mock('../src/components/LoadingSpinner', () => () => <div>Loading...</div>);
 jest.mock('@/context/InternalAuthContext', () => ({
   InternalAuthProvider: ({ children }: any) => <div>{children}</div>,
 }));
@@ -31,17 +30,6 @@ describe('AuthProvider', () => {
     jest.clearAllMocks();
   });
 
-  it('renders loading spinner initially', async () => {
-    await act(async () => {
-      render(
-        <AuthProvider apiHost={apiHost}>
-          <div>Child</div>
-        </AuthProvider>
-      );
-    });
-    expect(screen.getByText('Child')).toBeInTheDocument();
-  });
-
   it('loads user and token successfully', async () => {
     mockFetchWithAuthImpl.mockResolvedValueOnce({
       ok: true,