Django REST-based Authentication with Auth.js

The repository is split into two directories:

1. backend -- the backend part of the project (Django, DRF, dj-rest-auth)
2. frontend -- the frontend part of the project (Next.js, Auth.js)

If you're interested only in Django REST framework authentication take a look at this repo.

Want to learn how to build this?

Check out the post.

Want to use this project?

Go ahead and fork/clone the repository and then setup backend and frontend individually.

Backend

1. Change directory to backend.

2. Create and activate a virtual environment:

   $ python3 -m venv venv && source venv/bin/activate
   

3. Install the requirements:

   (venv)$ pip install -r requirements.txt
   

4. Apply the migrations:

   (venv)$ python manage.py migrate
   

5. Register your app with social providers and take note of your client IDs and secrets.

6. Enter the client IDs and secrets in core/settings.py respectively:

   SOCIALACCOUNT_PROVIDERS = {
       "google": {
           "APP": {
               "client_id": "<your google client id>",
               "secret": "<your google secret>",
               "key": "",  # leave empty
           },
           "SCOPE": [
               "profile",
               "email",
           ],
           "AUTH_PARAMS": {
               "access_type": "online",
           },
           "VERIFIED_EMAIL": True,
       }
   }
   

7. Run the development server:

   (venv)$ python manage.py runserver
   

8. Your authentication API is now accessible at http://localhost:8000/api/auth/.

Frontend

1. Change directory to frontend.

2. Install the dependencies:

   $ npm install
   

3. Create an .env.local file in the project root with the following contents:

   NEXTAUTH_URL=http://127.0.0.1:3000
   NEXTAUTH_SECRET=<generate_a_secret_key>
   NEXTAUTH_BACKEND_URL=http://127.0.0.1:8000/api/
   NEXT_PUBLIC_BACKEND_URL=http://127.0.0.1:8000/api/
   
   GOOGLE_CLIENT_ID=<your_google_client_id>
   GOOGLE_CLIENT_SECRET=<your_google_secret>
   

4. Run the development server:

   $ next dev
   

5. Navigate to http://localhost:3000/ in your favorite web browser.