I have have trying to communicate to third party application from react app. Whenever user tries to browse say : http://somesite.com/ , user is redirected to http://authenticationsite.com/ . This application then responds back with POST data in first site if the user is successfully authenticated. I have routes for handling get request. How can I possibly handle POST request from third party apps which contains information like token in the react app?
You basically want to implement sort of token based authentication?
When you load your app (or a component within your app), make a POST request to the authorization website using some ajax library, like axios, fetch or jquery ajax. Depending on the response from the 3rd party server, save the token somewhere (localStorage for example) and proceed with the rest of the flow.
Hope this helps! If you have any questions, or I misunderstood your question, please let me know, and we will proceed from there.
Related
I would like to know the best way I can create an URL in React to receive the Auth token in the query that would be called through a redirect URL from the OAuth2 Authorization server.
What I plan to do is to create a component with a route and that would be the URL I will set as the redirect URL. From there, I will use useEffect function to know that the URL has been called and send an API request to authenticate for the AccessToken.
But creating an empty component for this doesn't sound right to me and I want to know is there is a better way to do this.
The flow I am using is OAuth 2.0 Authorization Code with PKCE Flow
It is usual to do these 3 things:
Plug in the OIDC Client security library
Set the redirect URI to the main URL of your app
Handle login redirects as part of the main page load
It is a design pattern really and nothing to do with React. There are a couple of samples of mine that may help:
Initial Code Sample
React Code Sample
Of course, you may be able to implement the same pattern in a more cutting edge React manner.
I have one issue. I have a project which is created in MVC and AngularJs using Apis. I want to apply the OAuth token with all Apis.
I will follow the below steps :
First login from the panel.
Maintain OAuth token in the header of each page.
Use that OAuth token from the header and pass from each web API request.
If somewhere I am wrong please let me know. How can I do?
Please share if anyone has done before.
Create a service/factory that will make all API requests from your app.
It's just a wrapper of $http. call it something like ApiService.
This service would read the token from where ever it stored (header, cookie...) and append it to every request.
This very much like the pattern $http handles XSRF protection
I have a working rails RESTful api-only app.
I use Postman to consume that api. Now, to use the api the user have to login to http://localhost:3002/authenticate first by setting content-type to application-json in Header then Email and Password's value in body. After sending the POST request to the server I get auth-token as a json response. Then after successful login I have to pass that auth-token as a Authorization key in each GET request to get respective data.
Now, I want to build a UI for that back-end api as I learn React js. But till now all tutorials I could find was how to send GET requests without any authorization factor. And they are using axios, redux etc.
Can any-one please guide me on where should I start or how to
approach this problem?
Do I necessarily have to use a third-party library for this purpose?
If so which will be better axios or redux??
Any beginner friendly tutorial link would be of tremendous help
How start
Securing React Redux Apps With JWT Tokens - Rajaraodv explains how you get a jwt token and how to keep it in the front end app. I think this way will fits for you.
Keep the auth-token
Rajaraodv uses localStorage to keep the jwt token, you can use the same or keep directly in redux store, it's your choice, the best manner that fits you.
Ajax call
You can use Axios to make Ajax calls, or use fetchApi from the browser as Rajaraodv did, it's up to you.
Explains
"If so which will be better axios or redux??" these two libraries are totally different, each with it's own purpose.
My app uses JS Facebook API to use Facebook as a login/pass. Here what happens when you try to login.
User click on the Facebook Login Button
Facebook Authenticates
If Success. I grab the Facebook ID and Name of the user
Calls on my REST API on my APP to check and see if the that FBID is registered in my system.
If Registered, I write the session to verify that the user is authenticated.
This is great since I don't have to store usernames and password. But I am worried that someone will just use a REST API debugger like POSTMAN in chrome and just send a Facebook ID and the name of the user and they will be authenticated.
My question is what is the best way to secure my end that will prevent apps like POSTMAN to just input the fields needed to authenticate? Am I missing something? Can anyone recommend a strategy for this?
Or is using CSRF token the only way to combat this? I am using FuelPHP as a backend and doing a single page app using AngularJS with NgRoutes. But every time I enabled the CSRF on fuel, the token passed does not match what it was in the back-end.
I am under the impression that this is due to that the javascript token function is in the main page, where the ng-view. I know this might have something to do with the ngRoutes.
http://fuelphp.com/docs/classes/security.html
Use Fuel's Auth package. It has Opauth integration which does all the above, and for an entire list of social media platforms, not only facebook.
Always try not to reinvent the wheel, assume someone else has had the same challenge, solved at, and shared the solution with the community.
I want to conver my existing site to angularJS application. Its flow is like this.
My parent web site is having link to sign up or login page.
As per user selection signup or login page should open.So once user login or created account he pointed to dashboard page.So how to do this angularJS?
Please note my parent web site is not in angular.
Thanks in advnce.
Here is a suggested design and here is a little project I wrote that has Angular code authenticating with a PHP server. The code has both the Register and Log in options you are looking for.
Use token based authentication (Im assuming your angular requests are JSON)
After the user logs in or registers, send a bearer token back to Angular via the URL. On the server side set an expiry date for the token
Every http request you make can include the token in the http header
The sample code has this implemented.