diff --git a/package-lock.json b/package-lock.json
index 9289441..f57295a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@seamless-auth/react",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@seamless-auth/react",
-      "version": "0.0.7",
+      "version": "0.0.8",
       "license": "AGPL-3.0-only",
       "dependencies": {
         "@simplewebauthn/browser": "^13.1.0",
@@ -5784,9 +5784,9 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.4.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.1.tgz",
-      "integrity": "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==",
+      "version": "3.4.2",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.2.tgz",
+      "integrity": "sha512-PjDse7RzhcPkIJwy5t7KPWQSZ9cAbzQXcafsetQoD7sOJRQlGikNbx7yZp2OotDnJyrDcbyRq3Ttb18iYOqkxA==",
       "dev": true,
       "license": "ISC"
     },
diff --git a/package.json b/package.json
index 1b0f2b4..2fb6419 100644
--- a/package.json
+++ b/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": {
diff --git a/src/AuthProvider.tsx b/src/AuthProvider.tsx
index 651bce6..53fac7b 100644
--- a/src/AuthProvider.tsx
+++ b/src/AuthProvider.tsx
@@ -9,7 +9,6 @@ import React, {
 } from 'react';
 
 import { AuthMode, createFetchWithAuth } from './fetchWithAuth';
-import LoadingSpinner from './components/LoadingSpinner';
 import { usePreviousSignIn } from './hooks/usePreviousSignIn';
 import {
   AuthenticatorTransportFuture,
@@ -42,6 +41,7 @@ export interface AuthContextType {
   credentials: Credential[];
   updateCredential: (credential: Credential) => Promise<Credential>;
   deleteCredential: (credentialId: string) => Promise<void>;
+  loading: boolean;
 }
 
 export interface Credential {
@@ -136,6 +136,7 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
   const hasRole = (role: string) => user?.roles?.includes(role);
 
   const validateToken = async () => {
+    setLoading(true);
     try {
       const response = await fetchWithAuth(`users/me`, {
         method: 'GET',
@@ -197,19 +198,12 @@ export const AuthProvider: React.FC<AuthProviderProps> = ({
     }
   }, [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,
diff --git a/src/components/LoadingSpinner.tsx b/src/components/LoadingSpinner.tsx
deleted file mode 100644
index fc8ecad..0000000
--- a/src/components/LoadingSpinner.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-
-const LoadingSpinner: React.FC = () => {
-  return (
-    <div className="flex items-center justify-center min-h-screen bg-gray-900">
-      <div
-        data-testid="loading"
-        className="w-12 h-12 border-4 border-gray-600 border-t-blue-500 rounded-full animate-spin"
-      ></div>
-    </div>
-  );
-};
-
-export default LoadingSpinner;
diff --git a/src/components/OtpInput.tsx b/src/components/OtpInput.tsx
index 038c41d..1d17591 100644
--- a/src/components/OtpInput.tsx
+++ b/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}
diff --git a/src/views/EmailRegistration.tsx b/src/views/EmailRegistration.tsx
index ba04668..75a9acd 100644
--- a/src/views/EmailRegistration.tsx
+++ b/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}>
diff --git a/src/views/Login.tsx b/src/views/Login.tsx
index 489dad1..1f4a0d8 100644
--- a/src/views/Login.tsx
+++ b/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) {
diff --git a/tests/EmailRegistration.test.tsx b/tests/EmailRegistration.test.tsx
index 5f5cb52..387c8d4 100644
--- a/tests/EmailRegistration.test.tsx
+++ b/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 () => {
diff --git a/tests/OtpInuput.test.tsx b/tests/OtpInput.test.tsx
similarity index 100%
rename from tests/OtpInuput.test.tsx
rename to tests/OtpInput.test.tsx
diff --git a/tests/authProvider.test.tsx b/tests/authProvider.test.tsx
index 3285abf..79f9110 100644
--- a/tests/authProvider.test.tsx
+++ b/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,
diff --git a/tests/loadingSpinner.test.tsx b/tests/loadingSpinner.test.tsx
deleted file mode 100644
index 0f06a67..0000000
--- a/tests/loadingSpinner.test.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import '@testing-library/jest-dom';
-
-import { render, screen } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
-
-import LoadingSpinner from '../src/components/LoadingSpinner';
-
-describe('Login Component', () => {
-  it('renders the login form correctly', () => {
-    render(
-      <MemoryRouter>
-        <LoadingSpinner />
-      </MemoryRouter>
-    );
-
-    expect(screen.getByTestId('loading')).toBeInTheDocument();
-  });
-});