I just did the Auth system through Laravel and I'm facing a problem : how to check in ReactJS the logged user? I need to get his ID to check if this user can modify the page. I don't know where to go at all.
Any tips would be welcome!
you can't use the default authentication (using sessions) with a react app.
what you need is a system that creates an authentication token ( search for JWT or Laravel passport ) which identifies users, and since the HTTP protocol is stateless, in each request you must send that token to you backend service / API.
you can of course add a value representing the authentication ( true if you got a valid token ) to your global state just for UI or routing purpose.
check this medium article where the author explains how to create a token based auth with laravel using JWT.
you can also search about REST and oauth for more information.
Related
I have to authenticate users in a scenario that involve a frontend(react) and a backend (springboot).
After working on it I realized that Springboot response include a set-cookie header, but actually the cookie session returned by Springboot is never set in the user-browser, so I asssume the cookie is set in the frontend app, which means that basically the frontend-app is the one authenticated, but no the user, make sense because the frontend is in the end sending the user/password.
How the people approach this scenario usually?, should I have a cookie session as well in the user-browser (so far is my thought)?, should the frontend store something different in the browser to keep track of logged in users?
Ideally I would go with Bearer token based authentication as I could use the backend for mobile applications as well.
Basically you would require to store the JWT in the local storage or key chain.
You could authenticate using JWT token. Get user details from token to use it in front end.
You need to set the session token in the localStorage. After storing it in localStorage you need to check session token on every protected route. If it's same as you have in backend it's good to go. However, if it has expired you need to run your logout api.
At work we are making an SPFx Web Part React client app that deploys to SharePoint as a Web Part. Our back-end is a ASP.NET Core 2.2 Web API that is secured using Azure Portal's built in Authentication feature. The front-end is using AadHttpClient that magically handles the authentication by taking the context of the current page (SharePoint) that has the user already logged in. Doing so, silent authentication occurs and the API call is successfully made with authentication successfully passed. The AadHttpClient is supposed to magically bundle up the token in the request header that gets sent to the back-end Web API. I still need to debug the live development app and see how to retrieve the Bearer Token in the back-end Web API. These are my next probable steps?
Would I just probably use 'string bearerToken = Request.Headers.....;' or 'string bearerToken = Request.Headers["KeyValue"]' to get the token itself?
Assuming I can get this Bearer Token, how can I check the caller's user information? Is it just var userName = User.Identity.Name;? Or would I or could I use the token and some how make a call to Microsoft Graph API to view the user's info?
If you are using ASP.NET Core and using default authentication then things are bit easier. From documentation you can see that several tokens are injected in the request header based on Identity provider so in your case you have to look for following headers which Azure AD injects. These headers would contain ID Token which you would need to verify the claims and get user information.
X-MS-TOKEN-AAD-ID-TOKEN
X-MS-TOKEN-AAD-ACCESS-TOKEN
X-MS-TOKEN-AAD-EXPIRES-ON
X-MS-TOKEN-AAD-REFRESH-TOKEN
Ideally all the claims are injected automatically in ClaimsPrincipal
you can find more here
Official Docs
How To extract Token
I'd like to ask a question, which will likely have more than one solution but at this stage I don't know how to solve this problem.
I'm currently building a mobile application built in Angular/Ionic which is accessing the Woocommerce API, for which the app needs to pass a consumer key as well as secret in order to obtain product information as well as create products.
I assume that I do not have direct access to a database on my phone where I can store theses details to authenticate my app and point it at the right woocommerce store.
Even if I store these in a server based app, then my mobile app still needs to authenticate to the server based app in order to access the correct woocommerce store.
Could somebody point me into the right directions as to how developers go about this problem?
Usually, mobile authentication in Phonegap/Ionic looks like that:
You send Authentication request with Login/Pass or ApiKey.
Server response some Token.
You store Token in localStorage.
Send token with every ApiRequest.
Here is example how pass token to every API request if you already have some token.
angular.module('app').config(AppConfig);
AppConfig.$inject = ['$httpProvider'];
function AppConfig($httpProvider, $sceProvider) {
var token = simpleStorage.get('access_token'); // simpleStorage here is a js-plugin for using LocalStorage
if(token){
$httpProvider.defaults.headers.common['access-token'] = token;
}
}
here is a good article for angular-js authentication
https://medium.com/opinionated-angularjs/techniques-for-authentication-in-angularjs-applications-7bbf0346acec
If you need of high level security then you can use token based login
like: http://devcenter.kinvey.com/angular/tutorials/how-to-implement-safe-signin-via-oauth
or
you can use http://jwt.io
I m building app who uses oauth2.
I me using:
Laravel for backend
Oauth2 for Laravel (lucadegasperi)
Angular for frontend because it will be also and native mobile app:D.
My question is?
What is the workflow for user sign in?
Now i have.
User comes to site and enter username and password
Angular send post for access token and when access token is returned i go for user data. Then I store access_token in localstorage. I m using grant_type=password i forget to mention.
I have 2 hours when token gona expire. In that moment when token expire I go for new token by refresh_token functionality.
My Questions are:
Is this good way/approach?
What is supposed to happen when user close browser?
Now when user close browser and again enter to my app. I will check localstorage and then autheticate user by access_token. If Access Token is expired i will get new one.
What about remeber me option or so called keep me signed in?
Does it mean thant i must set token that will be expired in 365 days (lifetime)?
or create cookie/ localstorage with access token so when user comes newt time i read cookie/loaclastorage and then authorize user?
And finnaly about destroying token. Now my token will be detroyed when i log of from the app.
Thanks
We are building the same kind of service/app using the same components. We use a password flow and I store the token in local storage if the user ticks the "remember me" checkbox on the login form, otherwise I just store the token in an un-persisted variable that gets destroyed when the user refreshes or closes the browser.
See some notes on testing protected endpoints here:Testing OAuth 2.0 protected API endpoints in Laravel
Marijan!
I'm working on simple app containing two separate layers. 1) Rails 5 Json API provider. 2) Separate NodeJS server running Angular 2 application.
Angular 2 app on Login requests access token from google
Angular 2 app retrieves UserInfo from google/people API
Angular 2 app now able to POST json with User's display name and some id from Google Response json.
Angular 2 POSTs json to my Rails 5 API server (partially implemented, but already works with login/pass auth).
So far I have implemented implicit OAuth2 using the code similar to this Gist. Using this code I am able to get User Identification Info which is enough for me to identify the user in API provider or create account for it.
This approach works for me. Hope it will work for you as well.
Note: this approach might be insecure.
I have an Express/Angular app with passportjs-facebook auth and I'm trying to implement a token based system to make calls to my api using jsonwebtokens and avoiding sessions/cookies.
The process that I had in mind goes as follows:
Anonymous user tries to log in with Facebook.
Facebook ID is checked
against the DB retrieving the user if there's a match or creating a
new one if the user doesn't exist.
A token is generated for that
user.
Send token to user
Angular app gets token and stores it on localStorage.
An interceptor on the angular app checks for the user's token as sends it on a header for any subsequent calls.
I'm struggling with steps 4 and 5, I'm not sure how to pass the token and get it on my angular app. Could anyone point me on the right direction to get this working?
You express app can generate the JWT for the app after FB auth.
Take look at this article: https://auth0.com/blog/2014/01/07/angularjs-authentication-with-cookies-vs-token/