How to get auth state in Reactjs using Expressjs and Passportjs? - javascript

I am working on a project that use Reactjs for front-end and Expressjs and Passportjs for server side.
The user information will be stored in cookie-session middleware in server side whenever he/she logged in. But every time the user opens the website, the react app will have to fetch user data by sending a http request to the server side and wait for it to response. This sometimes take some seconds or even longer when the connection is poor.
Is there any way to get user's auth state immediately? Thank in advanced!

Related

Sending stored data in Firebase directly with authentication without a second request

I have a website which uses Firebase for user authentication and storing user data (SPA with JSON web token). The user data can be fetched as soon as the user is authenticated.
In the moment this works as follows:
Client enters auth data
Firebase confirms authentication
client requests stored user data
Firebase searches user data in database
data is sent to user
What I want is the following:
Client enters auth data
Firebase authenticates user and searches directly for user data in database
authentication is confirmed and data is sent to user.
In other words: In the first solution the way from the client to Firebase has to be made twice while in the second solution it only has to be made once (sending user data directly after authentication), such being faster.
Question: Is this possible?
Firebase authenticates user and searches directly for user data in database
There is no connection between Firebase Authentication and a user-accessible database, so there is no way to do this in a single step without application-specific code.
What you can do is implement this process in a Cloud Function, so that it appears as a single step to the client-side application code. But in the server-side Cloud Functions code, it'll still be a two-step process with calls to two APIs.

How to share auth0 authentication information between 2 different APIs?

Pretty much new on APIs and microservice world.
i am using auth0 for authentication.
I have a convert express API POST endpoint which will only work if the user is authenticated, however for frontend -> ( home page, login button, login from auth0 callback, redirection) I using different api Homepage express api.
After user logs in from homepage api, from his profile dashboard user tries to send a post request to convert API endpoint this doesn't work and throws an error check.state argument is missing.
How do I make sure if one API authenticates that authentication information should be shared with another API endpoint which needs authentication?
app.use(‘/authUrls’,requiresAuth(),authUrlsRouter) //convert api post request
This may be an assumption, but it appears that you are creating a regular web application with Node.js, and what you want is authentication per session, not per API endpoint. This quickstart from Auth0 walks through it nicely. It uses Passport.js and express-session to provide middleware.
As per the tutorial:
In a typical web application, the credentials used to authenticate a user are only transmitted during the login request. If authentication succeeds, a session is established and maintained via a cookie set in the user's browser. Each subsequent request does not contain credentials, but rather the unique cookie that identifies the session.
How it works: when the login api is called and completed successfully, the user's authentication is stored in that session. Whenever other API's are called that require an authenticated user, you can just include the middleware (in the quickstart it is called 'secured'): it will query that respective session's data and allow / disallow based on the user's authentication status.
For example, the convert endpoint:
router.post('/convert', secured(), this.convertfunction);
And a non-auth endpoint:
router.get('/other', this.otherfunction);
The full tutorial has much more information available. But this illustrates how middleware will solve your problem.

node express react oauth pass access token after athorization in callback with react client app

I have a node server that authenticates with a third party (like stack overflow does) using oauth. When the third party hits my callback and I authorize the request and get the access token and other info, I want to then pass this info to a react app I made, so then the react app can make REST calls to using the access token straight from the provider.
I am new to react and node, but am able to make a node server that can get the access and refresh token info. I am new to 'serving' and serving a react app. I have been serving using
app.use('/client', express.static(__dirname + '/client'));
to serve react apps, and this works great to a limited extent. The situation I am currently in exceeds the extent and I want to learn how to send the oauth info along with my react app back after authorizing in the callback. The flow I am using authorizes the request in the callback and then does a redirect back to the /client route to render the app, which fails to pass any oauth info to the client. Is there any way to set the header before that redirect to have the oauth info, and then some how get that oauth info in the react app?
I am posting here to get some advice on some avenues and resources I should read up on, and maybe some suggestions for my current situation. I am eager to learn more on express and am currently looking to set the header with the info I need and then serving the react app as a file or something, I am not sure yet.
Thanks to all in advanced!
I'll give my best to answer your question. So the problem with SPA(Single Page Application) and OAuth login is that the only way to transfer data with redirects is URL query string. The JWT(JSON Web Token) would allow this, but it's only supported in mobile native SDK-s. Solution for the web, without using the popover flows here:
For Node.js I suggest to use Passport.js OAuth modules, the login flow:
Example /auth/google -> redirect to Google login page.
On success, you get redirected back to callback url /auth/google/callback
You also get back the access_token, refresh_token, basic profile information etc.
No sessions are used so we use the JWT and generate the token on server side.
Redirect back to application with the token: app.example.com?token=JASJKDk..
On client side extract the token from query string.
This is just one possible flow that you might use, instead of JWT you could also use session/cookie solution.

Ionic authentication for login with angularjs

As ionic uses angularjs, for login system there isn't any browser to save cookie or session in order to authenticate for each part of application.
One way is protecting by using this in app.js:
$urlRouterProvider.otherwise('/login');
Because any one doesn't access to other links into application. When returned answer from server (mysql database) is true , we can use this:
$state.go('app.main');
Is this a good idea? Or any other ways?
Since ionic essentially calls to a back end api, you can implement any standard api authentication mechanism.
The most common was would be have a toke based authentication, High level workflow can be as follows
1 - ionic app calls a backend server end point and get a token (by passing some kind of an encrypted key)
2 - Back end server generates a token (ideal for a given time period) and sends back to the ionic app.
3 - There after, in every request ionic sends the token. (ideally in the request header)
To save the token temporary , you can use a simple storage solutions like
ng-storage or sqlite
have a read here
For our company app we use a digest access authentication(https://en.wikipedia.org/wiki/Digest_access_authentication) with our ionic app and our node server that is hooked up to a sql database. Once the user is authenticated we send them a jwt (javascript web token). We can then store that webtoken locally (if they check the option for auto login) or they can re-authenticate whenever the app is reopened and we give them another web token. This has so far proven to be a safe and efficient method of user authentication. Here is a tutorial for using json web tokens and angular. http://www.toptal.com/web/cookie-free-authentication-with-json-web-tokens-an-example-in-laravel-and-angularjs
I would strongly encourage you to checkout John Papa's ng-demoes, especially one with JWT token, because that is what you want to use nowadays. (Those are not specific to ionic, but rather for angular.js apps in general)
basically you have several things you need to do:
handle all the places where you need to check if user is authenticated or not and emit unauthorized event
handle event and redirect to login state/route
In above example you basically add interceptor (https://github.com/johnpapa/ng-demos/blob/master/ng-jwt/src/client/app/services/authInterceptor.js) which looks if any request to the web services failed due to not authorized and rejects the promise returned by $http request
Also
As ionic uses angularjs, for login system there isn't any browser to save cookie or session in order to authenticate for each part of application.
You indeed can use localStorage/sessionStorage to store token and add that token to all requests. That is why you better off having token based auth for your web services, rather than cookie based. (basic auth can do to, just more cumbersome)

Architecture for login system on MEAN stack?

I'm developing a web app on the MEAN stack (MongoDB, Express, AngularJS, and node.js). I'm developing a login system, and will also have some of the Angular routes protected so that only logged-in users can access them. I'm trying to think of the best way to approach the architecture of this.
I'm thinking of the current workflow:
User logs in via AngularJS form, which sends an http POST to an Express endpoint. The endpoint validates the user against the database, and responds with an OAuth token as well as a cookie. Both are stored in the mongo database for later validation.
Once AngularJS receives the login response, it stores the received cookie using ng-cookies, and stores the OAuth token in a User service.
Every time the route changes in AngularJS now, the User service is used to make sure that the cookie is still legitimate by comparing it to cookies in the mongo database (this would be an API call using Angular's resolve... would this create a noticeable lag?)
When a user clicks "log out" or the cookie expires, the cookie and OAuth token are both deleted from the database and will no longer be valid.
Does this approach make sense? Is it secure, and will it be relatively efficient/quick in execution?
I ended up combining my original workflow with Express's auth example, seen here. It is as follows:
When user initially loads the app, an http call is made to an Express endpoint that checks if a session exists already for the user. If so, the user is stored in $rootScope and considered logged in.
Any time the AngularJS route changes, the same endpoint is accessed. Route protection was specified in a way similar to that described here. If the endpoint ever returns that no session exists, $rootScope.user is unset (if it needs to be), and the user is redirected to the login page.
When the login form is processed, it posts to an Express endpoint. The endpoint retrieves the user from the mongoDB (if it exists), and attempts to hash the password. If it's a match, the user's session is set, stored in the mongo DB, and the endpoint returns the user object (used to store in the $rootScope as previously mentioned).
Any time any further endpoints are accessed, the functions are first passed through the restrict function which ensures that a session exists before sending any data to the client. It returns a 401 if no session exists, which is then handled on the Angular side using this HTTP interceptor to unset $rootScope.user and redirect to the login screen.
When the user clicks "log out" on the Angular side, the session is unset and deleted from the mongo DB, $rootScope.user is set to null, and the user is redirected back to the front page.

Categories

Resources