This question may be super simple but I've been googling for a while now and haven't found an exact solution.
I'm trying to implement a Google Login using React for the frontend and Django for the backend.
How exactly would I do this? I have seen solutions where a token is sent over to the backend which then retrieves the necessary information from the Google API and either creates or retrieves a user from the database based on the token. However, this seemed to be based on JWT and I was wondering if it is possible to implement the same with the simple Django Auth Token?
Maybe I'm just really blind but I really wasn't able to find a suitable solution.
Thanks for your help!
I was actually working on this a few moments ago, after many fails in the past. It's quite a headache really trying to find a solution that works with React. I have however managed to easily setup google login on the React front end side with https://www.npmjs.com/package/react-google-login. This should be the first step you will need to take.
After that you will need to setup social login on the Django backend using django_allauth. Basically, the idea is once a user logs in via google or to be precise, clicks on the Login With Google button on the front end, a google access_token will be retrieved from Google and saved in local storage together with some other data. Only the access_token is of interest here. So you will then need to take this access_token and send it to the Django backend via a Rest API of a view that you will have setup. That will get the google user data saved in the database under social accounts, ultimately login them in the application. Everything from then on should continue as per your normal logins with email and username. That is if using JWT, a jwt token will be returned from the backend which you hopefully should be able to save in local storage. In my React app, I authenticate against this token, so as long as I have the token in local storage, a user is logged in.
Pratik Singh Chauhan does a good job explaining this in his Part 1 tutorial here -> https://medium.com/#pratique/social-login-with-react-and-django-i-c380fe8982e2 and Part 2 here -> https://medium.com/#pratique/social-login-with-react-and-django-ii-39b8aa20cd27
UPDATE: June 2022
Since Google is now moving to (GIS) Google Identity Services sign-in SDK, this method, although it works is now deprecated.
Here is a good link to help you setup react login with the new google GIS.
https://github.com/MomenSherif/react-oauth/issues/12#issuecomment-1131408898
There are 2 methods you can use depending on your workflow, implicit or authorization. To maintain a similar workflow that the above code achieved, implicit workflow is the one that can give you both access_token and refresh_token that you will send to your backend api.
Here is another link with sample code for both workflows.
https://react-oauth.vercel.app/
Note you will need to use #react-oauth/google to configure the Google workflows in your code.
Refer to this:
https://reactjsexample.com/google-oauth2-using-the-new-google-identity-services-sdk-for-react/
Related
I have a django app that uses Google's allauth for signing up and logging in, but it first takes me to a google url and to sign in, i.e., my header and other parts of my site are not visible. Once I log in through my google account I'm redirected, so the logic works fine.
I'm just wondering if it's possible to have that process be done on my site.
For social auth I prefer to use Django Social Auth.
In regards to what OP is asking, I've never seen that before and as a user of a system I wouldn't want it like that. Who could grant me that OP wouldn't also be storing other relevant details of mine to perform that operation?
In fact, the idea of social auth is that one is passing the responsibility of authentication to Google or any other provider, hence going to their system to do that operation and then redirected back.
I would like to have only one login screen, registration, profile and password recovery for all projects in my company. Basically a unified login or SSO.
So I made these screens using AWS Cognito and hosted them on the sso.mycompany.com domain and it's working fine.
But now I need to implement these screens in my other projects. How can I do this? I can't just copy the files, as this was done in Vue.js, and I would like to put these screens in projects done in Laravel, Wordpress, React, etc;
I thought of using an iframe loading sso.mycompany.com, but how do I return user data after login to the app that opened the iframe?
Basically that's it, I have authentication screens hosted on the sso.mycompany.com domain and I would like to use them on projectx.com, projecty.com, mycompany.com, etc.
Here is one solution that might work for you and might give you some ideas on how you could put together a solution. Unfortunately, Cognito out of the box doesn't come with a unified/universal login experience that you require. It also doesn't come with a lot of other features you might see from the big IdP platforms, but that is another discussion for another time :) The whole foundation of this solution is based off of a single domain, cookies and JWTs(access token, id token and a refresh token). It will still work for your apps on other domains, but the experience for your end users will be a bit sub optimal compared to if all your apps were on the same domain.
Because an app like projectx.com sits on a different domain then sso.mycompany.com, you have to somehow get a access token over to projectx.com after the user logs in through mycompany.com. You can simply just pass the access token through as a query param when you redirect the user back to projectx.com after a successful login on sso.mycompany.com.
I had a much longer answer with details, but stackoverflow won't let me post because it thinks my answer is spam??? Check my profile on how to contact me if you want the longer version with details.
I'm building an eCommerce website for a personal project. It uses React for the front-end and a REST API running on django for the back-end. I want the user to be able to add items to a shopping cart and place an order without the need for an account.
For guest users, using a session/cookie to store info is great, but when it comes to logged in users, I would want to use the database to store items in a cart. That would require creating a user and giving them an auth token so they can perform necessary actions.
So should I use session/cookie authentication or is there a better way to achieve what I want using JWT?
Both approach can work very well. However, I am currently working on something similar and I would personally recommend the simpler option which is the classic session approach. JWT tokens can be harder to maintain and sometimes insecure if not done correctly. Also, JWT tokens will not persists between logins.
In both ways, I don't see why one would be better to create and maintain a cart except maybe that a session system can actually store the complete cart in the session itself. You can then implement sessions controllers at the API level.
ex: GET "https://{host}/api/cart" returns the items in the session's cart.
# Django session
request.session['cart_id'] = cartId
# JWT Tokens
jwt.encode({‘cart_id’: cartId} ...
little note.. It can be harder to setup the sessions if you are working on localhost for react and a remote server for your API. (The cookies are generally set per domain).
I am using JWT, and I think if you are using a database, you can create a generated JWTby user then store it in the database, you can control the availability of your jwt, in parameters, and I find the best way to secure your APIs, is to add the JWT token to the headers.
I would use Cognito authentication and integrate it with react and the backend api. It will help to manage the users outside the application.
If you’ll be hosting your application in AWS, Check out AWS Cognito, it’s an identity and a user pool service. Their free tier is quiet generous. That, together with AWS Amplify which is perfect for React, will give you out-of-the-box auth and user management.
I have used PHP SDK-4 for Facebook login in CakePHP 3 (beta version) which works fine.Now, I'm in need to fetch user data based on FB login and authenticate users. Am trying with Cake's Auth component. Initially, while trying to Auth users,
$this->Auth->setUser($user)
Got Error: Session was already started as we require session_start() for Facebook login. 1- Tried with enter link description here, and sessions [session_write_close()] etc..still it did not work. Could I get some shot on best way to authenticate users with Facebook login in site?
CakePHPs sessions are lazy started, that is, they are being started once your try to access the session in some way, and in case the session was started manually in beforehand, you'll receive that error, see Session::start().
You can easily workaround this by manually starting the session via CakePHP. The session object is available in the current request, so for example in your controller before using the SDK you could simply do something like
$this->request->session()->start();
and then the Facebook SDK should be able to pick it up.
As burzum already mentioned in the comments, the authentication should better be wrapped up in an authentication handler.
I would suggest having a look at HybridAuth, there's also a CakePHP plugin for seamless integration into CakePHPs auth mechanism, this might give you some ideas for a custom implemenation in case you need to use the v4 SDK, which isn't yet supported by HybridAuth.
Unfortunately I'm struggling to understand the documentation provided by Facebook.
This is the scenario:
- Some of my iPhone Apps are also registered as Native/Desktop Apps on Facebook in order to support the Facebook Audience Network.
- I'm building a tool in python which will retrieve data from the reporting API in order to run some automated analysis on specific metrics (request, impressions and so on).
The question is: how do I retrieve this data?
The documentation for the reporting API is here: Reporting API
However I'm struggling with the access token.
It says that I could use the specific App Token available here: App Tokens
However by using such token, I get an error saying that app tokens can't be used for Desktop/Native Ads.
What is the correct way to do it then? Here is where I struggle to understand Facebook Documentation.
My guess is that I should use a User Access Token instead, generated for a user that is also the admin of the App for which I want to retrieve the insights.
What really freaks me out is that apparently, this can't be done with normal HTTP calls only but it requires instead to go through the Facebook Login Dialog. I also need to create another Facebook (web) app because there is no way to get a simple "User Object"... Everything needs to start and go through a registered Facebook App. And there's no way to go through these steps by using backend code only.
So... to recap... in order to read the Insights for a Native/Desktop Facebook App (APP_A), I have to:
- Create a new Web Facebook App (APP_B)
- Create a web interface somewhere for APP_B) which will trigger the Facebook Login Dialog and request the read_insights permission.
- Login through this web interface and generate a User Access Token
- Put this User Access Token in my backend code and run the scripts that retrieve the data provided by the Reporting API for APP_B
Really... to me... it doesn't make any sense to create a new Facebook App in order to access the data of another Facebook App.
Isn't there another better, simpler, quicker, cleaner way to achieve the same final result?