How to integrate rest api with front end website/app? - node.js

I already built out my restful api for logging in and registering, my question is how do I now use this api in my website? Isn't the point of an api to return json to consume? If i were to put a res.redirect() then wouldn't that make the api useless for later on when i want to use the api for say an iOS app?
router.post('/login', async (request, response) => {
// validate
const {error} = loginValidation(request.body)
if (error) return response.status(400).send(error.details[0].message)
const {email, password} = request.body
// check if email doesn't exist
const user = await pool.query('SELECT id, email, password FROM users WHERE email = $1 LIMIT 1', [email])
if(user.rowCount == 0) return response.status(400).send('Wrong email or password')
// password is correct; move on to validating password
const id = user.rows[0].id
const storedEmail = user.rows[0].email
const storedPassword = user.rows[0].password
const validPass = await bcrypt.compare(request.body.password, storedPassword)
if(!validPass) return response.status(400).send('Wrong email or password')
// create and send token to client
const token = jwt.sign({_id: id}, "SOMESECRET")
response.header('auth-token', token).send(token)
})

You could try these ways:
Make API calls from web clients(i.e. web browsers) with Javascript.
Set up a web server and make API calls from the server.

Related

Appwrite authentication - "createJWT is not a function" error

I am trying to build a Node.js server-side signup function for user authentication. The data for the user is being sent via "req.body" and the authentication database is provided by Appwrite.
The signup function should:
Create a user with the credentials provided in the request body.
Return the user details, such as the username and email.
Generate and return a token (cookie/JWT)
I am encountering issues with the Appwrite documentation and would appreciate guidance on building this function.
When trying to POST a new user using the Users API, an error of
createJWT is not a function
is produced, and when using the Account API, an error of
User (role: guests) missing scope (account)
is produced.
Here's the code I have:
const sdk = require('node-appwrite')
const client = sdk.Client()
client
.setEndpoint(endpoint)
.setProject(projectId)
.setKey('...')
const users = sdk.Users(client)
async function signup(req, res) {
try {
const { email, username } = req.body
let { password } = req.body
password = await bcrypt.hash(password, SALT_ROUNDS)
const result = await users.createBcryptUser("unique()", email, password, username)
// Create a token
// Combine data
res.send(userWithToken)
} catch (err) {
error('Failed to signup', err)
throw new Error(err)
}
}
The Users API is intended to be used in an admin perspective rather than as a user. You can use the Account API to execute things on behalf of a user, but the JWT token is typically generated client side and passed to the server, where you can call client.setJWT().

How to check wheter the Azure AD token send by React to Node.js is valid

Hi I have a code from https://github.com/Azure-Samples/ms-identity-javascript-react-spa
I changed it a little bit, so instead calling an Microsoft Graph API endpoint, I call mine endpoint on localhost:7000.
So it basically starts with me logging in (here i did not change enything). Then there is this function which acquires token:
const { instance, accounts } = useMsal();
const [graphData, setData] = useState(null);
function RequestProfileData() {
// Silently acquires an access token which is then attached to a request for MS Graph data
instance
.acquireTokenSilent({
...loginRequest,
account: accounts[0],
})
.then((response) => {
callMyEndpoint(response.accessToken).then((response) =>
setData(response)
);
});
}
it uses function callMyEndpoint which looks like this:
export async function callMyEndpoint(accessToken) {
const headers = new Headers();
const bearer = `Bearer ${accessToken}`;
headers.append("Authorization", bearer);
const options = {
method: "POST",
headers: headers,
};
return fetch("http://localhost:7000/myendpoint", options)
.then((response) => response.json())
.catch((error) => console.log(error)) // if the user is not logged in- catch an error;
}
Now, onto my Node.js backend application where the http://localhost:7000/myendpoint is served.
app.post("/myendpoint", async (req, res) => {
console.log("TOKEN", req.headers.authorization); // it is being printed here, everything seems fine.
// here i would like to check whether the token is valid
// if req.headers.authorization == AZURE_TOKEN?
// How to do this?
});
And now the question is? How to check in backend if the token send from frontend is valid for the user, so only logged users, or users which are added in my app registration in azure can post onto this request?
You can use the libraries such as validate-azure-ad-token or you can write your own logic using jsonwebtoken
Here I have my custom logic for that first you will need client_id , tenat_id and scope name.
I am assuming you already have client and tenant id and for scope name it will be available in the Expose Api tab of your app registration.
Here I have console app which will take your token and try to validate it.
var jwt = require('jsonwebtoken');
var token = 'your Token';
var clientid = '' ;
var tenantid = "" ;
var scope = "";
// Create an audiance variable
var audiance = 'api://'+clientid;
// decoded token
var decodedToken = jwt.decode(token , {complete :true});
if((decodedToken.payload.aud==audi)&&(decodedToken.payload.scp==scope)&&(decodedToken.payload.tid==tenantid))
{
console.log("The token is valid");
}
else
{
console.log("The Token is invalid")
}
Output :

Firebase phone authentication with OTP using Node JS without client [duplicate]

At the moment I am creating a Firebase API on nodejs. I would like to handle all Firebase stuff (like authentication) with firebase-admin on nodejs. But what is the correct way to authenticate a user over nodejs in firebase-admin without the Javascript Firebase SDK on the client side? On the official documentation for admin I didn't find a function called signInWithEmailAndPassword (like as on the client side SDK) for nodejs. There is only a function called: "getUserByEmail", but this function doesn't check if the user has entered the correct password.
This is my form:
<form class="sign-box" action="/login" method="post">
<div class="form-group">
<input id="username" name="username" type="text" class="form-control" placeholder="E-Mail"/>
</div>
<div class="form-group">
<input id="password" name="password" type="password" class="form-control" placeholder="Password"/>
</div>
<button type="submit" class="btn btn-rounded">Sign in</button>
</form>
Once the form is submitted I pass the values to my API in nodejs:
app.post('/login', urlencodedParser, function (req, res) {
// getting the values
response = {
username: req.body.username,
password: req.body.password
};
// authenticate the user here, but how ?
});
My first idea was to use the Firebase SDK on the client side to sign in with signInWithEmailAndPassword and to get the uid. Once I had the UID I wanted to sent the UID to nodejs and call the function createCustomToken and to return the generated token (with some additional claims) back to the client. Once I get the token back I would use the function signWithCustomToken (on the client side) to authenticate the user. Is this way correct or is there a better way ?
Actually for authentication you will need to use the firebase regular api, no the admin.
First this will give you a refreshed firebase token, not a custom token.
If you like you can do the same to obtain a custom token, if you need a custom token, I also have an example.
npm install firebase --save
const firebase = require("firebase");
const config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: ""
};
firebase.initializeApp(config);
I am posting my login firebase function but you will be able to change it to express easily.
exports.login = functions.https.onRequest((req, rsp)=>{
const email = req.body.email;
const password = req.body.password;
const key = req.body.key;
const _key = '_my_key_';
let token = '';
if(key === _key){
firebase.auth().signInWithEmailAndPassword(email,password).then((user)=>{
//The promise sends me a user object, now I get the token, and refresh it by sending true (obviously another promise)
user.getIdToken(true).then((token)=>{
rsp.writeHead(200, {"Content-Type": "application/json"});
rsp.end(JSON.stringify({token:token}));
}).catch((err)=>{
rsp.writeHead(500, {"Content-Type": "application/json"});
rsp.end(JSON.stringify({error:err}));
});
}).catch((err)=>{
rsp.writeHead(500, {"Content-Type": "application/json"});
rsp.end(JSON.stringify({error:err}));
});
} else {
rsp.writeHead(500, {"Content-Type": "application/json"});
rsp.end(JSON.stringify('error - no key'));
}
});
NOTE: I am using this login function to test my other functions with Postman, so that is why i am sending a key, so I can use this privately.
Now combining the ADMIN and FIREBASE node apy I am able to do a lot of very interesting stuff with HTTP functions on my firebase.
Hope it helps somehow.
For Any Server Side React Users
I was brought here because I was attempting to authenticate users in firebase without the Javascript Firebase SDK on the client side as well. I am building a server side rendered react app. The client-side firebase.auth() does not work on a server-side node environment.
It turns out that you can run firebase.auth() commands inside of componentDidMount(), because that does not run on the server. This is where you can authenticate and get your user's token, and then send it to a cloud function for any server-side rendering that requires user authentication.
On the server side, you can then verify the token with the admin sdk.
You will also need to require firebase/app and firebase/auth, and initialize firebase in your browser-specific bundle.js, so that it is not included in your server's bundle.js
componentDidMount() {
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
console.log("User signed in!");
} else {
console.log("User NOT signed in!");
}
});
}
The officially recommended and supported way is to use ID TOKENS
From the official docs:
If your Firebase client app communicates with a custom backend server, you might need to identify the currently signed-in user on that server. To do so securely, after a successful sign-in, send the user's ID token to your server using HTTPS. Then, on the server, verify the integrity and authenticity of the ID token and retrieve the uid from it. You can use the uid transmitted in this way to securely identify the currently signed-in user on your server.
The workflow is:
Use the Firebase Web SDK in your client
The user logs in with any of the authentication methods
Retrieve the ID token on the client
firebase.auth().currentUser.getIdToken(/* forceRefresh */ true).then(function(idToken) {
// Send token to your backend via HTTPS
// ...
}).catch(function(error) {
// Handle error
});
Send this token to the server
Server verifies the ID token with the Firebase Admin SDK
// idToken comes from the client app
getAuth()
.verifyIdToken(idToken)
.then((decodedToken) => {
const uid = decodedToken.uid;
// ...
})
.catch((error) => {
// Handle error
});
your user is securely authenticated and uniquely identified
This is my solution, maybe it can help someone (Node/react). For some reason the client side method signInWithEmailAndPassword seems to work both on the client AND server. Basically this lets you keep the default security rule ".read": "auth != null" without having to use signInAnonymously() hence avoid creating an infinite number of stale users.
server:
const { firebase } = require('../../firebase/frontend');
const { firebase: admin } = require('../../firebase/backend');
const email = process.env.READ_ONLY_EMAIL;
const password = process.env.READ_ONLY_PASSWORD;
export default async (req, res) => {
try {
const { user } = await firebase.auth().signInWithEmailAndPassword(email, password);
const customToken = await admin.auth().createCustomToken(user.uid);
return res.status(200).send(JSON.stringify(customToken));
} catch (error) {
return res.status(404).send(error);
}
};
client:
import fetch from 'isomorphic-unfetch';
import { useState, useEffect } from 'react';
import { firebase } from '../firebase/frontend';
const useUser = (props) => {
const [user, setUser] = useState(null);
const [loading, setLoading] = useState(true);
const [isAnonymous, setIsAnonymous] = useState(true);
const getCustomToken = async () => {
const response = await fetch('/api/auth', { method: 'POST' });
const json = await response.json();
return json;
};
useEffect(() => {
try {
const unsubscribe = firebase.auth().onAuthStateChanged(async (user) => {
// user exists
if (user && user.email !== 'readonly#myEmailAddress.com') {
setUser(user);
setIsAnonymous(false);
// else sign in user "anonymously"
} else {
setIsAnonymous(true);
const token = await getCustomToken();
firebase.auth().signInWithCustomToken(token);
}
setLoading(false);
});
return () => unsubscribe();
} catch (error) {
console.log('Error signing in user', error);
}
}, []);
return {
user,
isAnonymous,
loading
// etc...
};
};
export default useUser;

Firebase Reset Password in Next.js with Typescript not sending email but returning link in console

I am trying to send an email to reset-user-password. When I call the function I get a response back (link as string). But there is no email that was sent (just the link in the console). I have already made sure I was testing a valid email address, as a matter of fact in the Firebase Authentication console there is an option to manually send a reset password email and that does work. I would like to make it clear that I am getting a VALID response link back just no email (not even in spam folder).
Front-end call to firebase auth in backend
export const sendForgotPassword = async(email: string) => {
const task_forgotPassword = await axios.get(
`${process.env.NEXT_PUBLIC_API_URL}/member/auth/forgotPassword`,
{params: {email}}
);
if (task_forgotPassword.data) return task_forgotPassword.data as string;
return null;
}
Backend Call to firebase auth from firebase library
export const forgotPassword = async(req:any, res:any) => {
const { email } = req.query;
return await admin
.auth()
.generatePasswordResetLink(email)
.then(async (_link) => {
console.log(_link, email, email.length);
res.send(`Sent reset password email to ${email}`);
})
.catch((err: FirebaseError) => {
res.send(err.message);
})
}

Express Middleware not rendering the view

I have written an auth middleware , which when fails , I want to render a page instead of sending response to my xhr request . How to do it ?
const jwt = require('jsonwebtoken')
const User = require('../models/users')
const express = require('express')
const auth = async (req, res ,next) => {
try {
//res.render("404")
const token = req.header('Authorization').replace('Bearer ' , '') //token comes from client in the header section named Auth(here)
const data = jwt.verify(token , 'itistechvaulttoken') //this gives back the id of the user and also iat :- issued at , a callback can be attached to
// .verify :-- see jsonwebtoken documentation for details .
const user = await User.findOne({ _id : data._id})
if(!user) {
throw new Error()
}
req.token = token //this is being use mainly for logout route handler
req.user = user
next()
} catch(e) {
res.status(401).render("404")
}
}
module.exports = auth
I have create a form and sending that data to my backend using xhr request to route and from there i am redirecting it to another route where I want to render the view .
My routes :-
router.post('/users' ,async (req, res) => {
console.log("Request Recieved")
const user = new User(req.body)
try {
await user.save()
const token = await user.generateAuthToken()
//console.log(token)
//res.status(201).send({ user , token})
req.accesstoken = token
res.redirect(302 , "/users/me" )
}
catch(e) {
console.log(e)
res.status(400).send("User not created" + e)
}
})
/user/me :-
router.get('/users/me', auth, async (req, res) => {
console.log("in users/me")
res.send(req.user)
})
I know here authentication has to fail, and code under the catch of middleware should run ,where I am trying to render a view but failing .
I guess you want your xhr endpoint code on your server to make your user's browser display an error page of some kind upon auth failure.
To do that you need the Javascript code in your browser to detect an error message in the response to the xhr request and navigate to the error page. Your nodejs app can't force any kind of redirect when responding to an xhr request without cooperation from the browser.

Resources