Skip to content

I try to convert and redesign Firebase Auth, Django REST Framework and React, a forked project, from ChakraUI to Styled Components so I can integrate into my own app

Notifications You must be signed in to change notification settings

prolenodev/django-react-firebase-auth

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 Cannot retrieve latest commit at this time.

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Django Rest Framework and React with Firebase Authentication

This project demonstrates how to use Firebase Authentication with Django Rest Framework (DRF) as a backend and React as a frontend for user authentication and management. This project is a fork of teshank2137's project, but instead of using Chakra UI for styling, I use styled-components for integration into my own projects.

Django


Edit server\core\firebase_auth\secrets\firebaseconfig.json

Generate new private key

Firebase Console > Project Overview > Project Settings > Service Accounts > Firebase Admin SDK > Generate New Private Key > Download JSON file

Link: https://console.firebase.google.com/project/{project-name}/settings/serviceaccounts/adminsdk

Example:

{
  "type": "service_account",
  "project_id": "replace-with-your-own",
  "private_key_id": "0ab00c00c0f000d000cec00f00dedc00dc00000c",
  "private_key": "-----BEGIN PRIVATE KEY-----END PRIVATE KEY-----\n",
  "client_email": "firebase-adminsdk-nnnnn@nnnnnnnn.iam.gserviceaccount.com",
  "client_id": "114000000000000000000",
  "auth_uri": "https://accounts.google.com/o/oauth2/auth",
  "token_uri": "https://oauth2.googleapis.com/token",
  "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
  "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-.iam.gserviceaccount.com"
}

Django admin overview:

http://localhost:8000/admin
http://localhost:8000/admin/auth/user/

API endpoints:

http://localhost:8000/api/register
http://localhost:8000/api/verified

React

Edit myapp\src\FirebaseUtils.js

Get the config from Firebase Console

Firebase Console > Project Overview > Project Settings > General > Web Apps > SDK Setup and Configuration > npm

Link: https://console.firebase.google.com/project/{project-name}/settings/general

Example:

const firebaseConfig = {
  apiKey: "AIabCdE0Fghij_0ab0AAbcdE0abcAb0AbCcddEE",
  authDomain: "replace-with-your-own.firebaseapp.com",
  projectId: "replace-with-your-own",
  storageBucket: "__BUCKET__",
  messagingSenderId: "___sender_id__",
  appId: "__appid__",
  measurementId: "optional",
};


Firebase

You can find the list of users in your Firebase Authentication console:

Firebase Console > Authentication > Users

Link: https://console.firebase.google.com/project/{project-name}/authentication/users



About

I try to convert and redesign Firebase Auth, Django REST Framework and React, a forked project, from ChakraUI to Styled Components so I can integrate into my own app

Topics

Resources

Stars

Watchers

Forks

Languages

  • JavaScript 48.6%
  • Python 45.0%
  • HTML 6.4%