Django OAuth Authentication - reactjs

I built an app (Django backend, React frontend) that whenever a client login it will generate JWT authentication. React will store the access token and client can use it to access Django backend database.
Then I want to add in social login feature (Google) so I will get back access token from that as well. However, this access token is different from the JWT access token generated before, so I wonder how can I integrate both ways of logging in a user smoothly on both Django and React?
For JWT I use djangorestframework-simplejwt
For social login I use django-allauth
I can run each individual way perfectly on React, but I don't know how to keep both the installations of JWT and allauth in Django settings.

Related

Django Rest Framework Authentication - Session auth or Token auth

I have a project where I am creating a React frontend for users to sign SSL certificates. That frontend is used with a Django DRF backend to handle request. Currently, I have authentication specified in each of my views for token and session auth. I can authenticate a user through postman and through a python client using request. But I want to turn this around and be able to login from the front end using react and a login form and keep is secure and safe from XSRF. Ive also been reading about how token auth is insecure because of how tokens get stores in browser local storage.
So my questions are as follows;
Should I use token auth or session auth, and how do I decide which is best?
How to implement that authentication with a React login form?
And how I could protect this from XSRF?
Thanks in advance Stackoverflow Gods

Azure AD integrate with frontend React and backend GoLang

I have a separate structure for backend using GoLang Gin and frontend ReactJS and would like to integrate the Azure AD Oauth2 login.
However, it's ok to authenticate GoLang App or React App, but how to pass the auth info to the backend when I authenticate in frontend using msal-react?
In my current backend API, I use JWT like this to protect APIs:
v1.Use(jwtauth.JWTAuth())
or should I authenticate the backend and pass the info to frontend? but I cannot get it to redirect(Azure login) since they are in different port...
Thanks!
The typical pattern is:
Front-end (React app in your case) uses msal (or other compatible library) to redirect the user to login
Front-end acquires access token for back-end using a scope defined in API app registration (or same app registration)
Front-end attaches access token to back-end requests
Back-end validates access token (signature using public keys from Azure AD, expiry time, audience, issuer, scopes etc.)
In .NET we configure an "authority" for JWT authentication, e.g. "https://login.microsoftonline.com/", and the authentication handler then downloads metadata + public keys from "https://login.microsoftonline.com//.well-known/openid-configuration".
It might be possible to configure something like this for your library as well.
Scopes you typically have to check yourself.

Authentication and authorization django app(backend) using keycloak

I had a problem. I had a react app that authenticate, using KeyCloak. From KeyCloak-server i recieve some credentials, like tokens, uuid of user and etc. Then, i am trying to access api on Django Backend, but request.user is Anonymous User. So, how can I can authenticate Django DRF? Should I send credentials from frontend to backend and create User model on backend or I don't need this?
You have to setup some authentication, for example using JWT. https://dev-yakuza.posstree.com/en/django/jwt/

Silhouette - react + scala + play app authentication flow

I need to create basic app with a silhouette. What I need to do is:
login with Google
Generate JWT
Use JWT to communicate with backend
I don't really know how this flow should look like. My idea is:
use login with Google in react app
generate Google token
use this token to generate JWT in the backend (using silhouette)
retrieve JWT in frontend
Will that flow work? Is there any simpler/better way to do that?
I had similar problem, so that's my proposal:
Create a controller for social authentication on backend side.
In react app add button for authentication and simply redirect to the
backend endpoint.
Authenticate user on backend, use Silhouette JWTAuthenticator to create a JWT token
Redirect to the react app with JWT token in query params.
Save token and use it in consequtive requests

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.

Resources