🔐 React Native (TypeScript) – JWT Token Based Authentication

এই টপিকে আমরা শিখব কীভাবে React Native (TypeScript) অ্যাপে JWT (JSON Web Token) ব্যবহার করে একটি সম্পূর্ণ Authentication System তৈরি করা যায় file-based structure অনুসরণ করে।

📌 JWT Authentication কী?

JWT (JSON Web Token) হলো একটি secure token যেটা server login করার পরে client-কে দেয়। Client এই token ব্যবহার করে protected API access করে।

• Login করলে server → JWT token দেয়
• Token client-এ store হয় (AsyncStorage)
• প্রতিটি API call-এ token পাঠানো হয়
• Token valid হলে user access পায়

🔄 Authentication Flow

📂 File Based Folder Structure (TypeScript)

src/
 ├── api/
 │   └── auth.api.ts
 ├── auth/
 │   └── AuthContext.tsx
 ├── screens/
 │   ├── LoginScreen.tsx
 │   └── HomeScreen.tsx
 ├── navigation/
 │   └── AppNavigator.tsx
 ├── utils/
 │   └── storage.ts
 └── App.tsx
  

💾 Token Store করার জন্য AsyncStorage

import AsyncStorage from '@react-native-async-storage/async-storage';

export const saveToken = async (token: string) => {
  await AsyncStorage.setItem('token', token);
};

export const getToken = async () => {
  return await AsyncStorage.getItem('token');
};

export const removeToken = async () => {
  await AsyncStorage.removeItem('token');
};
  

🌐 Login API Call (auth.api.ts)

import axios from 'axios';

export const loginApi = async (email: string, password: string) => {
  const response = await axios.post(
    'https://api.example.com/login',
    { email, password }
  );
  return response.data;
};
  

🧠 Auth Context (Global Authentication State)

import { createContext, useState } from 'react';
import { saveToken, removeToken } from '../utils/storage';

export const AuthContext = createContext(null);

export const AuthProvider = ({ children }: any) => {
  const [isAuth, setIsAuth] = useState(false);

  const login = async (token: string) => {
    await saveToken(token);
    setIsAuth(true);
  };

  const logout = async () => {
    await removeToken();
    setIsAuth(false);
  };

  return (
    
      {children}
    
  );
};
  

🔑 Login Screen (TypeScript)

const handleLogin = async () => {
  const data = await loginApi(email, password);
  login(data.token);
};
  

🛡️ Protected Navigation Logic

{isAuth ?  : }
  

📱 App Output (User Experience)

✅ Summary

• JWT হলো secure authentication system
• AsyncStorage token persist করে
• Context API global auth manage করে
• TypeScript app-কে safer করে
• Production-ready authentication flow

🎯 এই structure ফলো করলে আপনি সহজেই Real-World React Native App-এ JWT Authentication implement করতে পারবেন।