The repository is split into two directories:
backend
-- the backend part of the project (Django, DRF, dj-rest-auth)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.
Check out the post.
Go ahead and fork/clone the repository and then setup backend and frontend individually.
-
Change directory to
backend
. -
Create and activate a virtual environment:
$ python3 -m venv venv && source venv/bin/activate
-
Install the requirements:
(venv)$ pip install -r requirements.txt
-
Apply the migrations:
(venv)$ python manage.py migrate
-
Register your app with social providers and take note of your client IDs and secrets.
-
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, } }
-
Run the development server:
(venv)$ python manage.py runserver
-
Your authentication API is now accessible at http://localhost:8000/api/auth/.
-
Change directory to
frontend
. -
Install the dependencies:
$ npm install
-
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>
-
Run the development server:
$ next dev
-
Navigate to http://localhost:3000/ in your favorite web browser.