This project demonstrates a basic authentication system using Django and React Native. (Skip the article and view it here https://gitlab.com/EnochLucas/django-react-auth.)

This is a full-stack authentication system that can be used for logging users into accounts created through the Django admin. The primary authentication method is JWT (JSON Web Tokens).

Why choose Django & React Native?
 

Django is well known for its robust security and rapid development, making it ideal for developing secure backend APIs. Combining this with Django REST Framework and JWT allows for efficient authentication and session management.

React Native allows for seamless mobile application development across different platforms.

Combining these technologies allows you to build, and secure apps quickly.
 

Key Features:
 

• JWT-Based Authentication

JSON Web tokens are used for stateless authentication. This project uses the Django REST Framework Simple JWT to manage these tokens. You can read the documentation for this here https://django-rest-framework-simplejwt.readthedocs.io/en/latest/
 

• Django Backend

The backend is built in Django with support for a PostgreSQL database. The project also uses python-dotenv, for easy environment variable management. To utilize this, you need to create a .env file in the root of the backend app. This ensures the project is reusable and scalable. For instructions on how to set this up, you can refer to the README or the setup instructions.
 

• React Native (Expo) Frontend

The mobile application is built with Expo. The app itself is relatively simple. It includes a login screen and a dashboard that displays basic user information once the user has been authenticated
 

• Easy Setup & Configuration

For detailed setup instructions you can refer to the project's README (https://gitlab.com/EnochLucas/django-react-auth#django--react-native-expo-authentication-with-jwt), or read on.

Setup Instructions:
 

Prerequisites:

• Python (>=3.8)
• Node.js (>=14)
• PostgreSQL
• Expo
• A basic knowledge of Django and React
   

Backend Setup

1. Clone the repository https://gitlab.com/EnochLucas/django-react-auth
    
2. Navigate to the backend directory and create a virtual environment:
   python -m venv venv
   Activate the virtual environment:
   For Mac/Linux
   source venv/bin/activate
   For Windows
   venv\Scripts\activate
    
3. Navigate to the backend directory and install requirements:
   pip install -r requirements.txt
    
4. Create a .env file in the backend directory with the following content:
   DATABASE_NAME=your_database_name
DATABASE_USER=your_database_user
DATABASE_PASSWORD=your_database_password
DATABASE_HOST=localhost
DATABASE_PORT=5432
SECRET_KEY=your_secret_key
DEBUG=True
    
5. Apply migrations and create a superuser:
   python manage.py migrate
python manage.py createsuperuser
    
6. Run the server
   python manage.py runserver

The Django server will now be available at http://localhost:8000/.

Frontend Setup

1. Navigate to the mobile app directory
    
2. Install dependencies:
   npm install
    
3. Start the expo app:
   npx expo start

Usage Instructions:
 

Backend:

Access the Django admin panel at http://localhost:8000/admin to manage users.
 

API Endpoints included in the app:

/api/accounts/login/ for obtaining JWT tokens.
/api/accounts/token/refresh/ for refreshing tokens.
/api/accounts/logout/ for logging out (blacklisting the refresh token).
/api/accounts/dashboard/ for retrieving user details (requires authentication).
 

Frontend:

Open the expo app (via QR code scan or emulator). Use the login screen to authenticate using credentials created via the Django admin. Once logged in, the app displays a basic dashboard with user details and provides a logout option.
 

Conclusion
 

This project is a must-try for developers experimenting with using a Django authentication system with React. With the combination of Django and React, developers can easily streamline your authentication process. Thank you for reading!