Scribd
Upload
15 views4 pages

React Mobile OTP Authentication Guide

The document outlines the requirements for building a React app that features Mobile OTP Authentication, Conditional Navigation, and Profile Fetching using specified APIs. Key technologies include React with Hooks, React Router v6, Axios, and TanStack Query, among others. The app must implement functionalities such as sending and verifying OTP, user registration, and fetching seller profiles, with a structured project layout provided for guidance.

Uploaded by

tamannaparakh5
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
15 views4 pages

React Mobile OTP Authentication Guide

The document outlines the requirements for building a React app that features Mobile OTP Authentication, Conditional Navigation, and Profile Fetching using specified APIs. Key technologies include React with Hooks, React Router v6, Axios, and TanStack Query, among others. The app must implement functionalities such as sending and verifying OTP, user registration, and fetching seller profiles, with a structured project layout provided for guidance.

Uploaded by

tamannaparakh5
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Duration: 3 Hours

Base API URL

[Link]

Objective

Build a React app that implements Mobile OTP Authentication, Conditional Navigation, and Profile Fetching

using the provided APIs.

Tech Stack Requirements:


●​ React (with Hooks)​

●​ React Router v6​

●​ Axios for API interactions​

●​ React Hook Form for form handling and validation​

●​ TanStack Query (react-query) for data fetching and caching​

●​ State Management: Context API / Zustand / Redux​

●​ Browser Storage: localStorage or sessionStorage​

●​ UI Library: Shadcn UI

Features to Implement

1.​Send OTP (Login Step 1)

-​ Endpoint: POST

/otp-send Payload:

"mobile": "9876543210"
}

-​Show an input for mobile and Send OTP button.

-​Display OTP input on success and use returned OTP for verification testing.

2.​Verify OTP (Login Step 2)

-​Match entered OTP with API response OTP.

-​On match, proceed to login check using /login endpoint.

3.​Login Check

-​ Endpoint: POST

/login Payload:

"mobile": "9876543210"

-​If user exists: store token and user info, redirect to Home.

-​If not: redirect to Registration Screen.

4.​Auto Login on App Start

-​Check for token on page load:

If token: redirect to Home

If not: redirect to Register

5.​Register New User

-​Endpoint: POST /register

-​Show form with inputs and file upload.

-​Use React Hook Form for validation and handling.

-​Store token on success and navigate to Home.

Parameters Required:
-​user_type_id: number (e.g., 1)

-​name: string (Full name)

-​mobile: string (same as used for OTP)

-​email: string

-​company_name: string

-​firebase_token: string (optional testing token)

-​installation_id: string (optional testing id)

-​login_via: "ANDROID" or "IOS"

-​gst_no: string (e.g., 22ABCDE1234F1Z5)

-​pan_no: string (e.g., ABCDE1234F)

-​location_id: number (e.g., 132050)

-​profile_image: file (image upload)

6.​Fetch Seller Profile

-​Endpoint: GET /post-details?user_id=1

-​Requires Bearer token.

-​Use TanStack Query to fetch and display seller details and products.

Bonus (Optional)

-​Loading indicators

-​Form validation (React Hook Form)

-​Error handling

-​Use TanStack Query

Project Structure Suggestion

/src

/components

-​[Link]

-​[Link]
-​[Link]

-​[Link]

/pages

-​[Link]

-​[Link]

-​[Link]

/contexts

-​[Link]

/services

-​[Link] (Axios functions)

[Link]

[Link]

Submission

-​Push to GitHub and share link, OR

-​Zip and email the folder to the above contacts.

Contact:

-​tech@[Link]

You might also like