How to perform oauth with Nextjs and external REST API - reactjs

I am making an application with Nextjs and Nestjs for API. I want to support server-side rendering for certain pages with Nextjs. The authentication and user registrations need to be done on Nestjs. For now I am trying to do google oauth.
For requests from client side to API, I will have to send some access token along with the request to authorize the user. And for server-side authorization, I'll have to get this access token from the cookies and then send it in the request to the API. From what I have seen, access tokens last only 1 hour. So how can I do it in a way that lasts longer than 1 hour?

Related

What Should be the basic flow of AWS API Gateway Integration in React JS with cognito user pool authentication system?

I am using React JS in frontend and AWS Server less architecture as the backend of the react application.
So, for the user authentication and authorization I am using the AWS Cognito Service. and for making the requests I am using the axios.
Now, I want to integrate APIs which are created with the AWS API Gateway with cognito user pool. I am able to sign in to the user session and retrieving the id Token, access Token, and Refresh Token. and I am sending the ID Token in the all request which are created with AWS API Gateway. But How can I know that token is expired? because when token is expired it is sending the Network error instead of message("Token is Expired.").
In short I want to handle situation if token is expired or token is invalid. what I have to do?
Give the basic flow of handling the all requests(GET, POST, etc...) using axios.

Implement CSRF in ReactJS PWA with ExpressJS proxy to API backend

I have the following setup:
ReactJS PWA frontend application that uses service workers to cache the source code to the client.
ExpressJS Reverse Proxy which relays any request that would go to a backed API. This handles a login process and stores a token on the server and sends a session cookie to the client. The cookie is HtttpOnly, SameSite, Secure and signed. The proxy also checks if the connection is secure, referrer is in white list and exact match and same for the host.
Backend API is on a different server with OAuth login protection.
Express returns a server side rendered page on the first load then ReactJS hydrates that page and uses as an SPA. Every file afterwards is cached into the browser.
Every request that comes from the client app is handled with the same token as they are not user specific operations. User specific operations require e-mail and password to get a new unique token from the API.
My issue is:
An attacker could create a cookie and send it along with a curl request to the proxy. This would by pass my ReactJS app as both referrer and host can be faked.
I would like to find out how can is secure the connection between the ExpressJS proxy and the ReactJS PWA.
I was thinking about CSRF with csurf but that would not work. If the PWA is installed on a phone's as an app, then it would only access the Proxy when the request is sending. Therefore I cannot set the CSRF header.
If I was to add the CSRF token to the very first request when the client hits the server and the page is rendered with SSR, I would only set the token only once, which can be re used as many times as the attacker wants.
Is there a proper way to lock the proxy to the app somehow?
I cannot store anything in Local storage and I cannot hard code tokens into the source code of the app. (They are insecure options)
Thanks!

Auth0 (Lock) integration in React native + backend

I'm trying to find the best way to integrate Auth0 login into a React Native application. The login widget for React Native works perfectly fine, but I'm kind of confused as to how we get the users also logged in on the backend so they can make requests to modify data. The backend is running on Node (Meteor). Do I have to send the id_token to the backend, and login with auth0 there? I'm kind of confused on how to integrate this for both the app and the backend, so that when the user logs into the mobile application, the backend also knows they're logged in.
Whenever the client communicates with the backend, it should send the id_token with the request. On each request, the backend should validate the token (using a jwt library) to verify that the token has a valid signature and has not expired. Once validated, the backend will be able to use the user id embedded within the token to perform any authorization rules or business logic it wishes.
Check out this github project for an example Meteor auth0 backend.

AngularJs + Rest Backend CSRF Security

I am building a simple AngularJs web app that hits a REST Api built with Flask. From what I understand, there are a few ways to protect against CSRF, one of which is sending back a CSRF token when the user authenticates.
If I wanted to make my API available to both the Web Application and to users who want to use it as an API for development, would I need 2 endpoints for each endpoint that allows POST requests [one for the app that requires CSRF token + auth token and one for the developers that requires just an api access key]?
Not necessarily. Broadly, you have two options:
Proxy the REST API through whatever server-side container your web app is running in. Your web-app proxy can then implement the CSRF protection and insert the API-key into the API request.
Check the referrer header on all API requests. Although this requires that your Angular SPA and API share the same authentication mechanism, so you'd have to use something more sophisticated than an API key, like OAuth.

Can JWT be used across different AngularJS Apps?

I have a Laravel 5.1 API that is connected to an AngularJS Frontend.
Can I do this..
Have one (hosted on mydomain/public) AngularJS App with the sole purpose of authenticating the user and getting a JWT token from the Laravel API Backend
Somehow passing this same Token to a second (hosted on mydomain/secure) AngularJS in order to authenticate the user and the access the App.
I know the token is saved on the local storage so I don't see a reason why I can not or would I have to merge the two apps together.
Cheers,
Yeah. They are not related to the number of Ng-App or instances of Angular apps you define.
How JSON Web Tokens Work ??
A browser or mobile client makes a request to the authentication server containing user login information. The authentication server generates a new JWT access token and returns it to the client. On every request to a restricted resource, the client sends the access token in the query string or Authorization header. The server then validates the token and, if it’s valid, returns the secure resource to the client.
So server logic is not dependent on if your front end is single page or multi page.
You can read this post for more clarity:
http://www.toptal.com/web/cookie-free-authentication-with-json-web-tokens-an-example-in-laravel-and-angularjs

Resources