Can anybody tell me the updated way to use User Authentication for Django Rest Framework?
Each tutorial seems outdated.
I would like to sign up, login logout using React with fetch function.
Please share your experience.
Related
I'm quite new to React.js. I tried to access the Spring Rest Api call through Axios and it worked. Would like to know how to add authentication to the same and is there any possibility to access Spring Login functionality through React Js. Please provide some suggestions.
I've been working on a companion app in React Native/Expo for a MERN web app that I created. In the back end, I have an Express server with Passport to authenticate users to Spotify as part of the sign in process, bound to the route /auth/spotify. On my web app, if I click the login button I'm redirected to the Spotify auth page. However, I can't seem to get it to work on React Native. Currently I'm using axios to send a GET request to /auth/spotify but it's seemingly not doing anything. I've checked the logs and the auth route is returning a 302 status, but the /callback url is never accessed. In the callback I have a console.log plus some code that accesses the database, but I've confirmed that neither of them are run when trying to auth from React Native.
I looked for tutorials but a lot of the stuff I found was outdated or used deprecated packages, so I'm kind of lost right now. Would greatly appreciate it if someone could point me in the right direction. Thanks!
We have asp.net core(v3.0) Web API backend(no auth yet). A frontend is going to be a SPA(React).
A frontend basically will be an admin panel, it means the website's home page should be just the login page. We are planning on using IdentityServer4 for auth(separate project). If we create the IdentityServer4 project(MVC) it will have its own login form/page. Since opening our client website(react) login form should be opened, popout and iframe is not the way we are considering to use, what is the best way to accomplish this?
I've done some research and it seems it is possible to make our login form in react client and send the users login and password to IdentityServer4 if the client is set as ResourceOwnerPassword flow. But, it is not a secure and recommended way. I've read a lot of questions in SO and a lot of articles, but that is outdated and most of the samples are in IdentityServer4's repo is deprecated.
Questions:
Another way we are thinking is, on home page load, just redirect to the IdentityServer4 login page(MVC) and after login redirects back to our website. Is this a proper way of doing it? will the user see the redirection or it will not be much difference since the user opens our website and it seems like the home page?
What type of GrantType should I use for this case? Hybrid?
Is it possible to make a custom login page like in React?
What is the best way of implementing it?
Thanks for any advice, and my bad if the question is duplicated since I spend a couple of days to figure this out but couldn't.
Edit:
Now, IdentityServer4 with JavaScript client is available in IdneityServer4 official repositoty:https://github.com/IdentityServer/IdentityServer4/tree/master/samples/Quickstarts/4_JavaScriptClient
Also, I cloned and changed a little bit, so IdentityServer4 and WebApi are in a single project: https://github.com/Jamaxack/IdentityServerSPA
Is this a proper way of doing it? will the user see the redirection or it will not be much difference since the user opens our website and it seems like the home page?
That is recommended by redirecting user to identity provider's login page for sign-in , Resource Onwer Flow is not recommended as you said for security reasons.
What type of GrantType should I use for this case? Hybrid?
You can use Proof Key for Code Exchange (PKCE) which is already the official recommendation for native applications and SPAs . See Grant Types for more details .
Is it possible to make a custom login page like in React?
You can fully custmize the identity server's login user interface and identity management system , custmize the IdentityServer4.Quickstart.UI/ASP.NET Identity/Your own identity provider services .
In addition , ASP.NET Core 3.0 or later offers authentication in Single Page Apps (SPAs) using the support for API authorization. ASP.NET Core Identity for authenticating and storing users is combined with IdentityServer for implementing Open ID Connect :
https://learn.microsoft.com/en-us/aspnet/core/security/authentication/identity-api-authorization?view=aspnetcore-3.1
1) You can use a flow something like below
'First, load the react project. then check for the token/user object. If there is no token/user, then redirect to the MVC project from react project. You can have the login page in MVC'
2) Use Implicit grant type
3) Yes. You can make customization in MVC login page
4) In order to do that, you can use the oidc-client npm package in react project. For the identity, use the Quickstart template from identity server 4 documentation.
Here it is
I'm trying to implement SSO on my React-Redux app using an OpenID-Connect provider. The intent is to protect all components and redirect the user to the Identity Provider's login page if the session ends.
This is why I cannot have a dedicated Login page (component) in the application.
I've read that saving JWTs in the localStorage could be a good idea so I was thinking of using a flag isAuthenticated in the Redux store and keep JWTs in the localStorage. I can then fetch the JWTs from the localStorage to authenticate other APIs I'd be calling from within my app. Is this approach appropriate?
Moreover can anyone point me to a library/package that I can use to fetch (and refresh) JWTs for this purpose? I went through a lot of documentation and tried out the following but couldn't get these to work:
redux-oidc: I don't have any specific Callback component in my application so I don't quite know how to apply this approach to my app.
passport-openid-connect: Passport relies on storing sessions in cookies but I'd like to use the localSorage instead.
redux-auth-wrapper: A higher order component sounds great but I still cannot figure out how to integrate it without any dedicated Login component.
Could someone please guide me through? I'm a newbie to the React ecosystem so please excuse my incomprehension.
Any help would be much appreciated!
Thanks
You are on the right track - redux-oidc manages your Redux state with the login details - the client library that actually manages the JWT (implicit flow), redirecting to the IdentityServer (whichever) login page and returning to your app (the "callback") is oidc-client.
redux-auth-wrapper is just a HOC (High Order Component) - basically a wrapper to check if the user is authenticated (either in the Redux store or with a custom function) and forward to a login page - in my opinion you do not really need it as redux-oidc already gives you everything you need.
I personally also implemented an IdentityServer4 - to centrally manage all external providers - and it's been working great so far.
I would suggest first looking at https://blogs.msdn.microsoft.com/webdev/2017/04/26/the-mvp-show-learns-about-asp-net-identity-server-and-heidelberg/ where the creator of IdentityServer4 is explaining extremely well how the identification works and the flows (implicit vs hybrid).
Once you know the Identity basics and how it all hangs together, have a look at the redux-oidc sample (very easy to follow).
Have fun ;)
i am a newbie to Cakephp 3.*, I was playing around with cakephp REST API and angularjs. So far i was able to successfully integrate the registeration and login using the ADmad/JwtAuth (Link). I want to add social login as well (My application is a stateless, as all the back-end related queries are in the REST API)how can i do this?
Please Help.
Thanks