Merge pull request #141 from okto-hq/main

email phone otp and ai

app/components/AskCookbook.tsx

@@ -0,0 +1,11 @@
+"use client"
+
+import React from "react";
+import BaseAskCookbook  from "@cookbookdev/docsbot/react";
+
+const COOKBOOK_PUBLIC_API_KEY =
+    "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiI2NmY0NTc5OGJkODc1Y2E3NmUwMGFmOWYiLCJpYXQiOjE3MjcyODkyNDAsImV4cCI6MjA0Mjg2NTI0MH0.jjwNwuxA0WhC8yuHDgXLmFfKj83_qUoiYj7FoCKx88k";
+
+export default function AskCookbook() {
+  return <BaseAskCookbook apiKey={COOKBOOK_PUBLIC_API_KEY} />;
+}

app/layout.tsx

@@ -4,6 +4,7 @@ import { Inter } from 'next/font/google';
 import type { ReactNode } from 'react';
 import { Providers } from "./providers";
 import NavbarComponent from './components/Navbar';
+import AskCookbook from "./components/AskCookbook";
 
 const inter = Inter({
   subsets: ['latin'],
@@ -22,6 +23,7 @@ export default function Layout({ children }: { children: ReactNode }) {
             {children}
           </Providers>
         </RootProvider>
+        <AskCookbook />
       </body>
     </html>
   );

app/tools/components/GoogleIdTokenGenerator.tsx

@@ -15,8 +15,9 @@ export default function GoogleIdTokenGenerator() {
   const [error, setError] = useState('')
   const [isSignedIn, setIsSignedIn] = useState(false)
 
-  // Access the Google Client ID from environment variables
-  const clientId = process.env.NEXT_PUBLIC_GOOGLE_CLIENT_ID || ''
+  const ClientId = 'MTA0NjI3MTUyMTE1NS0wbTQ1M3BvaTVndWEwM2tlaGRjbjV1b24xdnZ1NXU5ai5hcHBzLmdvb2dsZXVzZXJjb250ZW50LmNvbQ=='
+
+  const clientId = atob(ClientId)  
 
   useEffect(() => {
     // Load the Google Identity Services library

content/docs/flutter-sdk/advanced-sdk-config/authenticate-users/email-otp/auth-user-via-email.mdx

@@ -0,0 +1,230 @@
+---
+title: Authenticate User via Email OTP
+description: Learn how to authenticate users via Email OTP with the Okto SDK.
+full: false
+---
+
+import { TypeTable } from 'fumadocs-ui/components/type-table';
+import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
+import { Callout } from 'fumadocs-ui/components/callout';
+import { Accordion, Accordions } from 'fumadocs-ui/components/accordion';
+import { Icon as IIcon } from '@iconify/react'; 
+
+import '../../../styles.css';
+
+### Methods Overview
+
+| Methods                                                                         | Description              |                 
+|---------------------------------------------------------------------------------|---------------------------------|
+| <sub><i>async</i></sub> [`sendEmailOTP(email)`](#send-email-otp)                | Send an OTP to the user's email  |
+| <sub><i>async</i></sub> [`verifyEmailOTP(email, otp, token)`](#verify-email-otp)| Verify the OTP sent to the user's email|
+
+<div className="method-box">
+
+## Send Email OTP
+
+`sendEmailOTP(email)`<a href="https://github.com/okto-hq/okto-sdk-flutter/blob/db5dfb8cda6bfee6636fc2f8a2e4687378ff67df/lib/src/okto.dart#L78" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> sends an OTP to the specified email address.
+
+### Parameters
+
+| Parameter  | Type          | Description               |
+|------------|---------------|---------------------------|
+| `email`    | `string`      | The user's email address  |
+
+### Response
+
+<Callout title="Success Response">
+
+| Field Name | Type          | Description                            | 
+|------------|---------------|----------------------------------------|
+| `status`   | `string`      | The status of the request              |
+| `token`    | `string`      | A token to be used for OTP verification|
+
+</Callout>
+
+<Accordions>
+<Accordion title="Example">
+<Tabs items={['Dart']}>
+  <Tab value="Dart">
+    ```dart
+    import 'package:flutter/material.dart';
+    import 'package:okto_flutter_sdk/okto_flutter_sdk.dart';
+
+    class SendEmailOtpExample extends StatefulWidget {
+        const SendEmailOtpExample({Key? key}) : super(key: key);
+
+        @override
+        _SendEmailOtpExampleState createState() => _SendEmailOtpExampleState();
+    }
+
+    class _SendEmailOtpExampleState extends State<SendEmailOtpExample> {
+        final Okto okto = Okto(); // Initialize Okto instance
+        final TextEditingController _emailController = TextEditingController();
+        String _message = '';
+        String? _otpToken;
+
+        Future<void> _handleSendEmailOtp() async {
+            try {
+                OtpResponse response = await okto.sendEmailOtp(email: _emailController.text);
+                setState(() {
+                    _message = 'OTP Sent: ${response.message}';
+                    _otpToken = response.token;
+                });
+                // Proceed to prompt the user to enter the OTP
+            } catch (error) {
+                setState(() {
+                    _message = 'Error sending Email OTP: $error';
+                });
+            }
+        }
+
+        @override
+        Widget build(BuildContext context) {
+            return Scaffold(
+                appBar: AppBar(
+                    title: Text('Send Email OTP Example'),
+            ),
+            body: Padding(
+                padding: const EdgeInsets.all(16),
+                child: Column(
+                    children: [
+                        TextField(
+                            controller: _emailController,
+                            decoration: InputDecoration(
+                                labelText: 'Enter Email Address',
+                            ),
+                        ),
+                        SizedBox(height: 16),
+                        ElevatedButton(
+                            onPressed: _handleSendEmailOtp,
+                            child: Text('Send OTP'),
+                        ),
+                        SizedBox(height: 16),
+                        Text(_message),
+                    ],
+                ),
+            ),
+            );
+        }
+    }
+    ```
+  </Tab>
+</Tabs>
+</Accordion>
+</Accordions>
+
+</div>
+
+<div className="method-box">
+
+## Verify Email OTP
+
+`verifyEmailOTP(email, otp, token)`<a href="https://github.com/okto-hq/okto-sdk-flutter/blob/db5dfb8cda6bfee6636fc2f8a2e4687378ff67df/lib/src/okto.dart#L78" target="_blank" rel="noopener noreferrer" style= {{ textDecoration: "none" }}> <IIcon icon="lucide:external-link" height="17" style={{ display: 'inline-block', verticalAlign: 'middle' }} /></a> verifies the OTP sent to the user's email address.
+
+### Parameters
+
+| Parameter  | Type          | Description                            |
+|------------|---------------|----------------------------------------|
+| `email`    | `string`      | The user's email address               |
+| `otp`      | `string`      | The OTP received by the user           |
+| `token`    | `string`      | The token received from `sendEmailOTP` |
+
+### Response
+
+<Callout title="Success Response">
+
+| Field Name | Type          | Description                                    | Possible Values |
+|------------|---------------|------------------------------------------------|-----------------|
+| `result`   | `boolean`     | Results true if OTP verification is successful | `true`, `false` |
+
+</Callout>
+
+<Accordions>
+<Accordion title="Example">
+<Tabs items={['Dart']}>
+  <Tab value="Dart">
+    ```dart
+    import 'package:flutter/material.dart';
+    import 'package:okto_flutter_sdk/okto_flutter_sdk.dart';
+
+    class VerifyEmailOtpExample extends StatefulWidget {
+        const VerifyEmailOtpExample({Key? key}) : super(key: key);
+
+        @override
+        _VerifyEmailOtpExampleState createState() => _VerifyEmailOtpExampleState();
+    }
+
+    class _VerifyEmailOtpExampleState extends State<VerifyEmailOtpExample> {
+        final Okto okto = Okto(); // Initialize Okto instance
+        final TextEditingController _emailController = TextEditingController();
+        final TextEditingController _otpController = TextEditingController();
+        String _message = '';
+        String? _otpToken;
+
+        Future<void> _handleVerifyEmailOtp() async {
+            if (_otpToken == null) {
+            setState(() {
+                _message = 'Please send OTP first.';
+            });
+            return;
+            }
+            try {
+                AuthTokenResponse authResponse = await okto.verifyEmailOtp(
+                    emailId: _emailController.text,
+                    otp: _otpController.text,
+                    token: _otpToken!,
+                );
+                setState(() {
+                    _message = 'Email OTP verified successfully';
+                });
+            // Proceed with authenticated actions
+            } catch (error) {
+                setState(() {
+                    _message = 'Error verifying Email OTP: $error';
+                });
+            }
+        }
+
+        @override
+        Widget build(BuildContext context) {
+            return Scaffold(
+                appBar: AppBar(
+                    title: Text('Verify Email OTP Example'),
+            ),
+            body: Padding(
+                padding: const EdgeInsets.all(16),
+                child: Column(
+                    children: [
+                        TextField(
+                            controller: _emailController,
+                            decoration: InputDecoration(
+                                labelText: 'Enter Email Address',
+                            ),
+                        ),
+                        SizedBox(height: 16),
+                        TextField(
+                            controller: _otpController,
+                            decoration: InputDecoration(
+                                labelText: 'Enter OTP',
+                            ),
+                        ),
+                        SizedBox(height: 16),
+                        ElevatedButton(
+                            onPressed: _handleVerifyEmailOtp,
+                            child: Text('Verify OTP'),
+                        ),
+                        SizedBox(height: 16),
+                        Text(_message),
+                    ],
+                ),
+            ),
+            );
+        }
+    }
+    ```
+  </Tab>
+</Tabs>
+</Accordion>
+</Accordions>
+
+</div>

content/docs/flutter-sdk/advanced-sdk-config/authenticate-users/email-otp/learn.mdx

@@ -0,0 +1,46 @@
+---
+title: Learn 
+full: false
+---
+
+This document describes the authentication flow using Email One-Time Passwords (OTP) with the Okto SDK. Learn how to implement secure user authentication using email verification integrated with Okto's infrastructure.
+
+## What is Email OTP Authentication?
+
+Email OTP authentication is a secure method that verifies user identity through one-time passwords sent via email. This authentication method provides:
+
+- Secure verification using time-limited codes
+- Simple user experience with no password management
+- Email ownership verification
+- Automated OTP delivery and validation
+
+## Implementation Overview
+
+To implement Email OTP Authentication in your application, you'll need to complete these steps:
+
+1. Understand the authentication flow
+2. [Implement Authentication in your application](./auth-user-via-email)
+
+## Authentication Flow
+
+### Sequence Diagram
+
+![Email Auth Sequence Diagram](/images/email-auth-sequence-diagram.png)
+
+The sequence diagram illustrates the following steps:
+
+### 1. OTP Generation Phase
+During this phase, the client application initiates the process by calling sendEmailOTP API with the user's email address through the Okto SDK. The SDK forwards this request to the Okto Server, which generates a unique OTP through a email provider and initiates a session timer.
+
+### 2. Email Delivery Phase
+Once the OTP is generated, the provider sends the OTP to the user's email address. The server returns a session token along with a confirmation that the OTP has been sent. The user receives the OTP in their email inbox, typically within a few moments. **The OTP is valid for 5 minutes**.
+
+### 3. OTP Verification Phase
+After receiving the OTP, the user enters it in the client application. The application then calls verifyEmailOTP API with three parameters: the email address, the entered OTP, and the session token received earlier. The Okto SDK forwards these credentials to the Okto Server for validation.
+
+### 4. Authentication Completion
+The Okto Server verifies the provided OTP against the stored value and checks if it's still within the valid timeframe. Upon successful verification, the server generates an authentication token and returns it to the client application through the SDK, establishing a secure session.
+
+
+## Conclusion
+Email OTP authentication provides a secure and user-friendly way to verify user identity. By following the implementation guides, you can create a robust authentication system that balances security with user experience. The 5-minute validity period ensures security while giving users adequate time to complete the authentication process.

content/docs/flutter-sdk/advanced-sdk-config/authenticate-users/email-otp/meta.json

@@ -0,0 +1,7 @@
+{
+    "title": "Email OTP",
+    "pages": [
+      "learn",
+      "auth-user-via-email"
+    ]
+  }