Mobile app social login with nodejs, react native - node.js

I am a nodejs developer who is currently collaborating with a front developer using react native.
I'm doing social login (Google, Kakao, Naver) in the mobile app, but I don't know who should implement which part of the back or front.
What I am trying to implement is:
Google, Naver, Kakao login
Store user information (email) in database
I think the process is, for example:
If the front implements login and access token issuance through SDK and passes the access token to the backend, it reads user information, stores it in the DB, and passes it back to the front
The frontend reads login, access token issuance, and user information and delivers it to the backend and stores it in the DB
When you log in from the frontend, when you are redirected to the backend with an authorization code, the backend issues an access token through the code, prints user information through the token, and delivers it to the frontend.
In the backend, use the npm passport module to handle login screen, issuance of access token, and output of user information (Is this an appropriate method in a mobile app environment other than the web?)
In which direction should I proceed?

Related

Login functionality from external API in React with Node.js

I’m having trouble figuring out how to get Node.js backend tokens into React.js frontend local storage. To login a user will use their credentials though an external websites API using the Oauth2 flow, this will be the only way to login into the application.
Currently, the user clicks a button which opens a new window in the authorization URL where the user will grant privilege. Once granted, the user is redirected to the backend endpoint which goes through passport.js and gets the required access and refresh tokens sent from the external API. This is then stored in a session on the backend database. What I want, instead, is to not store a session on a database but instead implement JWT and store the user’s data in local storage. With the current flow, its just not possible to do this and I haven’t found the right documentation to work it out.
There are many websites that implement it the exact way I want but tracking down the way they do it has appeared to be a challenge in on itself.
So instead of using passport.js, which was causing a plethora of issues, I decided to implement the Oauth2 flow myself. Instead of doing ALL the work in the backend, I broke the flow into different parts.
Originally, I sent the user to the backend where they would recieve an authorization token there. This turned out to be troublesome, instead, request an authorization code on the front end. For example, send the user to the Auth path and redirect the user back the the front end once privileges have been granted. Wait at the frontend callback for a code, once obtained, send a post request to the backend with that code and any other data in the body.
When obtained at the backend, trade that code for the access token and respond to the post requst with the neccassary token and any other data that needs to be sent back e.g. profile name, picture, date of birth. You can the implementn the JWT flow and no database is required to store any session or tokens, all can be stored client side securely.

What's the best flow for authentication using Firebase in NextJS and ExpressJS system

I'm currently developing a front-end system (build using NextJS) and backend (build using Node/ExpressJS). I'm using Firebase for the authentication system. Users can log in / signup to the website using email/password, Google or Facebook login. The system also needs to store user data on its own, and it uses the Postgres database for its persistence storage.
Currently, this is what I have:
For Registration
with username and password
user fill in the sign-up form
frontend call the firebase.auth().createUserWithEmailAndPassword(email, password)
frontend call the /register endpoint on the backend with the Authorization header consists of the token that's generated from the above step
with google / login
user click on the sign up with Google / Facebook button
frontend call the firebase method to open up a popup for Google / Facebook login
frontend call the /register endpoint on the backend with the Authorization header consists of the token that's generated from the previous step.
For Login
with username/password
frontend call the firebase.auth().signInWithEmailAndPassword(email, password) and store the token generated from the response in cookie
all of the subsequent requests to the backend will use the token as an Authorization header
The only thing that I'm still not quite sure about is Google / Facebook because it uses the same firebase function. How to differentiate between login/registration for the social media login apart? And is there a better way for the system to ensure that the user data is created in the database? At the moment, when the /register endpoint throws an error, I'll call the firebase.auth().deleteUser function afterwards.
I believe this must be a common scenario for a website that uses Firebase authentication. I really appreciate any suggestions.

Check if user logged in from backend Firebase Authentication

In my frontend, the user logs in using Firebase Authentication Browser. That part works perfectly fine. In addition to Firebase backend, I also have NodeJS backend that serves additional content. However, I need to serve the content to only Authenticated user.
My question is: Is there a way for my NodeJS backend to know that a user has been authenticated when they make a request?
An authenticated client is issued an ID token that uniquely identifies the user. The client can get this this token using the provided API. Then, it can pass that token to external APIs, which is verify the token using the Admin SDK.

How to use Passport & JWTs on client-end for authorization?

I'm currently creating a custom CMS for a friend's soccer team. The architecture is as follows:
On the back-end I've an API that interacts with the database (mongoDB).
On the front-end I've an express server that serves the pages using the templating engine handlebars.
Currently I've managed to authenticate requests to the API using Passport and JWTs, which is fine for querying the API, on login I'm storing a JWT with permissions in the cookie storage within the user (it's static pages and not a SPA so I cannot access local/session storage).
My issue is that I am struggling how to implement authorization on the client end for access to the admin panel. Should I decode the JWT on the client-end and read the user role then serve the pages if the admin pages if the user is an admin or should I be sending every request to access the admin section of the front-end to the API for a verification check then serve the files.
Any help would be greatly appreciated, thank you.
I think using a token authentication approach is more suited towards making requests via XHR, rather than hard reloads. The approach you are taking seems to be more suited to a session based authentication strategy. I would use passport-local and authenticate with a user name and password. Once authenticated the user is stored server side in a session variable. You could check the role from that and redirect server side.
If you were to stick with a token you could save it in local storage and then have a script on your admin panel that would first grab the token from local storage and then make a GET request to the server with the token in the header. If the token is valid send back the data to populate the page, otherwise send back an error and redirect from the front end. To get around showing an empty admin panel while checking the validity of the token you could show a loading screen until the request completed.

Making web app with Restful API

I'm making web app using node.js express with Restful API.
And, to use my web app, the user must login. If user doesn't login, he always stays in login page.
But, I heard that restful api doesn't use session or cookie information to maintain user login.
So, I heard that it use JWT. So, I want to use this. But, I saw that it has to compare token information when user access Restful API.
Then, in my case, should the user always have to request token information to the web app server to use my web service? (I mean add token in request header when user request every page)
you can use
HTML Local Storage
When you get JWT token save some value at local storage localStorage.setItem("logenin", "yes");
and check at every page or where you need this infomation localStorage.getItem("logenin");

Resources