I'm a beginner in the react and node and want to make a simple react and node app of login through firebase. SignUp and SignIn Working but the token not working please help to fix the error. all codes are given below
Thanks in advance
FrontEnd
App.js
import React, {Component} from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import firebase from 'firebase';
import Home from './components/Home'
import Login from './components/user/Login';
import 'bootstrap/dist/css/bootstrap.css'
import axios from 'axios';
class App extends Component {
constructor(props) {
super(props);
this.state = {
loaded: false
}
}
componentDidMount() {
firebase.auth().onAuthStateChanged(user => {
if (!user) {
this.setState({loaded: true})
} else {
firebase.auth().currentUser.getIdToken(true)
.then(idToken => {
console.log("id : " + firebase.auth().currentUser.uid + "idToken : " + idToken);
axios.post('http://127.0.0.1:3005/api/user/verify', null, {
params: {
user: firebase.auth().currentUser,
idToken
}
}).then(result => {
console.log(result)
})
})
this.setState({loaded: true})
}
})
}
render() {
if (this.state.loaded) {
return (
<Router>
<Route path="/" exact component={Home}/>
<Route path="/login" component={Login}/>
</Router>
)
}
return (
<div>
Loading....
</div>
)
}
}
export default App;
Login.js
import React, {Component} from "react";
import {Link} from "react-router-dom";
import NavBar from "../NavBar";
import * as firebase from "firebase";
import {Redirect} from "react-router-dom";
var firebaseConfig = {
apiKey: "*****************************",
authDomain: "*****************************",
databaseURL: "*****************************",
projectId: "*****************************",
storageBucket: "*****************************",
messagingSenderId: "*****************************",
appId: "*****************************",
measurementId: "*****************************"
};
firebase.initializeApp(firebaseConfig);
class Login extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
}
this.onSignIn = this.onSignIn.bind(this);
this.onSignUp = this.onSignUp.bind(this);
}
onSignUp() {
firebase.auth().createUserWithEmailAndPassword(this.state.email, this.state.password)
.catch(function (error) {
// Handle Errors here.
console.log(error);
});
}
onSignIn() {
firebase.auth().signInWithEmailAndPassword(this.state.email, this.state.password)
.catch(function (error) {
console.log(error)
})
}
render() {
if (firebase.auth().currentUser == undefined) {
return (
<div>
<h1>This is Login page</h1>
<NavBar/>
{/*<Link to={{pathname: "/login"}}>Login</Link>*/}
<div className={"container"}>
<input placeholder={"email"}
className={"col-md-12"}
type={"email"}
value={this.props.email}
onChange={e => this.setState({email: e.target.value})}/>
<input placeholder={"password"}
className={"col-md-12 mb-3"}
type={"password"}
value={this.props.password}
onChange={e => this.setState({password: e.target.value})}/>
<button className={"col-md-6"} onClick={this.onSignIn}>SignIn</button>
<button className={"col-md-6"} onClick={this.onSignUp}>SignUp</button>
</div>
</div>
)
}
return (
<Redirect push to={"/"}/>
)
}
}
export default Login;
BackEnd
Users.js (model)
const mongoose = require('mongoose');
const UserSchema = new mongoose.Schema({
firebase_id: {type: String, required: true, unique: true},
name: {type: String, default: ''}
})
exports = mongoose.model('User',UserSchema);
User.js
const User = require('../models/user')
const firebaseAdmin = require('firebase-admin')
var serviceAccount = require('../../config/config').serviceAccount;
const databaseURL = require('../../config/config').databaseURL;
firebaseAdmin.initializeApp({
credential: firebaseAdmin.credential.applicationDefault(),
databaseURL
})
exports = {
verifyAccount: (user, idToken) => new Promise((resolve, reject) => {
if (user === undefined) {
return reject(new Error("auth denied"))
}
const userJson = JSON.parse(user);
console.log(userJson)
firebaseAdmin.auth().verifyIdToken(idToken)
.then(decodedToken => {
User.findOne({firebase_id: userJson.uid})
.then(user => {
if (!user) {
new User({
firebase_id: userJson.id,
name: userJson.email
}).save()
.then(user => {
resolver(user)
}).catch(error => {
reject(new Error({error}))
})
} else {
resolve(user)
}
})
}).catch(error => {
reject(new Error({error}))
})
})
}
Config.js
const firebaseConfig = {
apiKey: "*****************************",
authDomain: "*****************************",
databaseURL: "*****************************",
projectId: "*****************************",
storageBucket: "*****************************",
messagingSenderId: "*****************************",
appId: "*****************************",
measurementId: "*****************************",
};
Index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.route('/api/user/verify').post(function (req, res) {
const {user, idToken} = req.query;
userFunc.verifyAccount(user, idToken)
.then(result => {
res.json(result)
}).catch(error => {
res.json(error)
})
})
module.exports = router;
Www.js
#!/usr/bin/env node
/**
* Module dependencies.
*/
var app = require('../app');
var debug = require('debug')('youtube-backend:server');
var http = require('http');
/**
* Get port from environment and store in Express.
*/
var port = normalizePort(process.env.PORT || '3005');
app.set('port', port);
/**
* Create HTTP server.
*/
var server = http.createServer(app);
/**
* Listen on provided port, on all network interfaces.
*/
server.listen(port);
server.on('error', onError);
server.on('listening', onListening);
/**
* Normalize a port into a number, string, or false.
*/
function normalizePort(val) {
var port = parseInt(val, 10);
if (isNaN(port)) {
// named pipe
return val;
}
if (port >= 0) {
// port number
return port;
}
return false;
}
/**
* Event listener for HTTP server "error" event.
*/
function onError(error) {
if (error.syscall !== 'listen') {
throw error;
}
var bind = typeof port === 'string'
? 'Pipe ' + port
: 'Port ' + port;
// handle specific listen errors with friendly messages
switch (error.code) {
case 'EACCES':
console.error(bind + ' requires elevated privileges');
process.exit(1);
break;
case 'EADDRINUSE':
console.error(bind + ' is already in use');
process.exit(1);
break;
default:
throw error;
}
}
/**
* Event listener for HTTP server "listening" event.
*/
function onListening() {
var addr = server.address();
var bind = typeof addr === 'string'
? 'pipe ' + addr
: 'port ' + addr.port;
debug('Listening on ' + bind);
}
Package.json
{
"name": "youtube-backend",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"cookie-parser": "~1.4.4",
"debug": "~2.6.9",
"express": "~4.16.1",
"http-errors": "~1.6.3",
"mongoose": "^5.9.27",
"morgan": "~1.9.1",
"pug": "2.0.0-beta11"
},
"devDependencies": {
"firebase-admin": "^9.0.0"
}
}
routes
const router = require('express').Router();
const userFunc = require('./functions/user')
router.route('/').get(function (req, res) {
res.json("Backend Connected")
});
router.route('/api/user/verify').post(function (req, res) {
const {user, idToken} = req.query;
userFunc.verifyAccount(user, idToken)
.then(result => {
res.json(result)
}).catch(error => {
res.json(error)
})
})
module.exports = router;
Users.js
var express = require('express');
var router = express.Router();
router.get('/', function (req, res, next) {
res.send('respond with a resource');
});
module.exports = router;