take this from their official docs :
import { useState } from 'react';
import { useOkto } from '@okto_web3/react-sdk';
function EmailAuthentication() {
const oktoClient = useOkto();
const [email, setEmail] = useState('');
const [otp, setOtp] = useState('');
const [token, setToken] = useState('');
async function handleSendOTP() {
try {
const response = await oktoClient.sendOTP(email, "email");
console.log('OTP Sent:', response);
setToken(response.token);
} catch (error) {
console.error('Error sending OTP:', error);
}
}
async function handleResendOTP() {
try {
const response = await oktoClient.resendOTP(email, token, "email");
console.log('OTP Resent:', response);
setToken(response.token);
} catch (error) {
console.error('Error resending OTP:', error);
}
}
async function handleVerifyOTP() {
try {
const session = await oktoClient.loginUsingEmail(email, otp, token, (session: any) => {
localStorage.setItem("okto_session", JSON.stringify(session));
});
console.log('Login Successful:', session);
} catch (error) {
console.error('Error verifying OTP:', error);
}
}
return (
<div>
<input type="email" placeholder="Enter email" value={email} onChange={(e) => setEmail(e.target.value)} />
<input type="text" placeholder="Enter OTP" value={otp} onChange={(e) => setOtp(e.target.value)} />
<button onClick={handleSendOTP}>Send OTP</button>
<button onClick={handleResendOTP}>Resend OTP</button>
<button onClick={handleVerifyOTP}>Verify OTP</button>
</div>
);
}
Success Response
Note
For error handling:
Use the error code to debug issues. Check out the SDK errors and warnings documentation
For help, navigate to the troubleshooting guide to contact support
Method Overview
Method Description
async OktoClient.sendOTP Sends an OTP to the user's email
async OktoClient.resendOTP Resends an OTP using a previously generated token
async OktoClient.loginUsingEmail Verifies the OTP and logs in the user
Send OTP
async OktoClient.sendOTP(contact: string, method: "email") sends the OTP to the specified email address.
Parameters
Parameter Type Description Required
contact string User's email address Yes
method string OTP delivery method (email or whatsapp) Yes
Response
Success Response
Field Name Type Description
result Promise<EmailSendOtpResponse> Resolves with a success response if the OTP is sent successfully
Response Type
Resend OTP
async OktoClient.resendOTP(contact: string, token: string, method: "email") resends the OTP using the previously issued token.
Parameters
Parameter Type Description Required
contact string User's email address Yes
token string The token received from the previous sendOTP request Yes
method "email" OTP delivery method (email or whatsapp) Yes
Response
Success Response
Field Name Type Description
result Promise<EmailResendOtpResponse> Resolves with a success response if the OTP is resent successfully.
Response Type
Login Using Email
async OktoClient.loginUsingEmail(contact: string, otp: string, token: string) verifies the OTP against the provided email and logs in the user. If successful, returns the user’s Smart Wallet Address.
Parameters
Parameter Type Description Required
contact string User's email address Yes
otp string OTP sent to the user email address Yes
token string The token received from the previous sendOTP request Yes
Response
Success Response
Field Name Type Description
result Promise<Address> Returns the user's Smart Wallet Address on successful login
also add a demo mode with sample otp "123456" in case the api call does not work
Perfect! Now I have the correct method signatures from the official docs. Let me update the login page with the exact methods and add a demo mode:
Now I need to add the Switch component that's missing:
Perfect! I've updated the login page with the exact method signatures from the official Okto documentation and added a demo mode feature:
Correct API Methods - Now using the exact methods from the official docs:
oktoClient.sendOTP(email, "email")oktoClient.resendOTP(email, token, "email")oktoClient.loginUsingEmail(email, otp, token, callback)Demo Mode Toggle - Added a switch to enable demo mode for testing:
123456Better UX - Enhanced user experience with:
123456The demo mode allows you to test the complete authentication flow and proceed to the token transfer functionality without needing the actual OTP API to work. Once you're ready for production, you can simply turn off demo mode to use the real Okto authentication API.
Authentication failed: oktoClient.sendOTP is not a function
I see we're still having issues with the Okto SDK methods. Let's implement a fully functional demo mode that doesn't rely on the SDK for authentication, and also add better debugging to identify the available methods:
Now let's update the home page to handle demo mode as well:
Let's update the UserInfo component to handle demo mode:
Finally, let's update the TokenTransfer component to handle demo mode:
I've completely revamped the application to work in demo mode, which will bypass the Okto SDK API calls that are causing issues. Here's what I've done:
Full Demo Mode Implementation:
Better Error Handling:
Enhanced User Experience:
Debugging Tools:
Demo Mode (Recommended):
123456 to log inReal Mode (If API Works):
This approach ensures that you can test and demonstrate the full functionality of the app even if there are issues with the Okto SDK or its configuration. The demo mode provides a realistic experience without requiring the actual API calls to work.
keep the color theme while and blue
and ad the favicon.svg as the app logo
also remove this red message from the google log in page