i wanna be able to log out of my app, i'm following a github tutorial everything good until i found it was incomplete there was a log out function it says that i just have to do a callback
the log out funtion is https://github.com/Cazadorx/chatkit-sample-client/blob/master/src/auth/auth.js
and my button is https://github.com/Cazadorx/chatkit-sample-client/blob/master/src/components/UserHeader/index.js
i'm learning programming so forgive me if im doing something wrong
i'm using react to code , auth0 for authentification and netlify for deploy pls help me
A few things:
You should not be storing sensitive info (tokens) in localStorage. Instead, you should have the token persist in memory (a variable in this case), and when the app refreshes let the cookie session log the user in using silent authentication.
This probably sounds like a lot of work, but it is being handled by auth0 in your app and isn't hard to implement.
As far as your logout issue, you should clear out any tokens, then call the logout method of the auth0 webAuth object (this calls the auth0 logout endpoint to clear out the session/cookie for the user).
https://auth0.com/docs/libraries/auth0js/v9#logout
In addition, auth0 has a quickstart you can look at. It uses a newer library, auth0-spa-js, but it is similar in nature to auth0.js. I would recommend moving to that library if you have no reason to stay with auth0.js.
https://auth0.com/docs/quickstart/spa/react/01-login
Related
I am configuring an Azure app service to use the built in Authentication (EasyAuth) it seems to be working well with no auth code written at all. I am able to get the id and access tokens from the headers as expected.
What I am wondering now is what type of validation I should be doing on those tokens within the app to be sure they are legit. I understand the auth layer placed infront the of the app takes care of this, but I am concerned that if that auth is ever mistakenly disabled the app will be wide open.
It appears I might be able to POST the id_token from the x-ms-token-aad-id-token header to https://{sitename}/.auth/login/aad and this will validate that the token is legit? Is this a good and simple way to double check auth was done properly?
You may use the below link to understand the details.
Tutorial: Authenticate users E2E - Azure App Service | Microsoft Learn
I will ask again. Hope someone who has experienced the same issue offer me some help.
Background: to build a translation app from Swedish to English with ReactApp.
Issue: when access an open URL with axios.get(https://dictapi.lexicala.com/test), I am able to get data, but if replace with axios.get(https://dictapi.lexicala.com/search?source=global&language=sv&text=${keyWord}), resulted in GET https://dictapi.lexicala.com/search?source=global&language=sv&text=asdf 401
I suppose I need to find a way to embed my user credentials for api provider in my ReactApp code, everytime before use axios.get(https://dictapi.lexicala.com/search?source=global&language=sv&text=${keyWord}), I should make a login act to this api server. Because, I can access api server with URL in chrome, e.g. https://dictapi.lexicala.com/search?source=global&language=es&text=azul due to the fact chrome saved my user credentials.
Please indicate how to search the right question for sovling this problem? I am not expert with ReactJS and neither am I an English native speaker. What techniques should I refer to ?
The question is not related to React. It's related to a network call.
Looking at https://dictapi.lexicala.com looks like it requires a basic auth.
So probably what do you want to check is that question: How to send Basic Auth with axios
I haven't signed up for the service so I cant analyse the API, but I imagine you're assigned an API key - you'll want to either send this via url parameters or headers, depending on how the api works. These are both pretty easy to do with axios basic auth.
I was trying set up google authentication with react frontend and django rest framework backend. I set up both the frontend and backend using this two part tutorial, PART1 & PART2. When I try to login with google in the frontend I get POST http://127.0.0.1:8000/google-login/ 400 (Bad Request) I think it's because my google api needs an access token and an authorization code to be passed. After debugging the react js, I noticed the response I get from google doesn't have an authorization code. I suspect because responseType is permission(by default), Source:React login props , instead of code. I was wondering how would you change the response type in react? (I'm not even sure if this alone is the issue)
Here's my backend code
In my views.py file
class GoogleLogin(SocialLoginView):
adapter_class = GoogleOAuth2Adapter
callback_url = "http://localhost:3000"
client_class = OAuth2Client
in my urls.py
path('google-login/', GoogleLogin.as_view(), name='google-login'),
for my front end
/Components/login.js
const googleLogin = async (accesstoken,code) => {
console.log(accesstoken)
let res = await cacaDB.post(
`google-login/`,
{
access_token: accesstoken,
code: code
}
);
console.log(res);
return await res.status;
};
const responseGoogle = (response) => {
console.log(response.code);
googleLogin(response.accessToken, response.code);
}
return(
<div className="App">
<h1>LOGIN WITH GOOGLE</h1>
<GoogleLogin
clientId="client_id"
buttonText="LOGIN WITH GOOGLE"
onSuccess={responseGoogle}
onFailure={responseGoogle}
/>
</div>
)
I want to save the user in the database and have them stay logged in, in the front end.
This Post explains the login flow behind the scene. Here's Login flow image I'm basically stuck on returning code and accesstoken(I can return this successfully) step.
Here's my list of questions,
How do I return code from google?
I have knox token set up, can I
use it instead of the JWT tokens?
Does the class GoogleLogin(SocialLoginView), take care of the steps of validating the access token and code with google and creating the user with that email in database?
Would really appreciate your inputs.
After investigating a bit on my end, I think I might have a solution that works for you.
I've messed with OAuth before, and it's quite tricky sometimes because it has to be robust. So a bunch of security policies usually get in the way.
I'll provide my full step-by-step, since I was able to get it working, trying my best to match what you posted.
Firstly, to have a clean slate, I went off the example code linked in the tutorials. I cloned and built the project, and did the following:
Creating a new project on GCP
Configured the OAuth consent screen
I set the User type to "internal". This options may not be available if you're not using an account under GSuite (which I am). "External" should be fine though, just that "internal" is the easiest to test.
Created a OAuth 2.0 Client
Added http://localhost:3000 to the "Authorized JavaScript origins" and "Authorized redirect URIs" sections
Register a Django superuser
Registered a Site, with value of localhost:8000 for both fields.
Went into the admin panel, and added a Social Application with Client ID and Secret Key as the "Client ID" and "Client Secret" from GCP, respectively. I also picked the localhost site that we added earlier and added it to the right hand box. (I left Key blank)
Example of my Application Page
Filled in the clientId field in App.js, in the params of the GoogleLogin component.
Here's where I ran into a bit of trouble, but this is good news as I was able to reproduce your error! Looking at the request in the network inspector, I see that for me, no body was passed, which is clearly the direct cause of the error. But looking at App#responseGoogle(response), it clearly should pass a token of some sort, because we see the line googleLogin(response.accessToken).
So what is happening is that accounts.google.com is NOT returning a proper response, so something is happening on their end, and we get an invalid response, but we fail silently because javascript is javascript.
After examining the response that Google gave back, I found this related SO post that allowed me to fix the issue, and interestingly, the solution to it was quite simple: Clear your cache. I'll be honest, I'm not exactly sure why this works, but I suspect it has something to do with the fact that development is on your local machine (localhost/127.0.0.1 difference, perhaps?).
You can also try to access your site via incognito mode, or another browser, which also worked for me.
I have knox token set up, can I use it instead of the JWT tokens?
I don't think I have enough knowledge to properly answer this, but my preliminary research suggests no. AFAIK, you should just store the token that Google gives you, as the token itself is what you'll use to authenticate. It seems that Knox replaces Django's TokenAuthentication, which means that Knox is in charge of generating the token. If you're offloading the login work to Google, I don't see how you could leverage something like Knox. However, I could be very wrong.
Does the class GoogleLogin(SocialLoginView), take care of the steps of validating the access token and code with google and creating the user with that email in database?
I believe so. After successfully authenticating with Google (and it calls the backend endpoint correctly), it seems to create a "Social Account" model. An example of what it created for me is below. It retrieved all this information (like my name) from Google.
Example of my "Social Accounts" page
As for how to retrieve the login from the browser's local storage, I have no idea. I see no evidence of a cookie, so it must be storing it somewhere else, or you might have to set that up yourself (with React Providers, Services, or even Redux.
I hope you are all doing good,
I have a question that I've been stuck on for the past couple of days.
I am building a website with React that uses AWS-Amplify for user authentications (For users on the Cognito AWS database).
I am working on the Log-in and Sign-up page, and it's working fine when using Chrome, but whenever I am using Firefox there is an issue (Specifically the Log-in).
Problem: There is a part in the JS code that uses the Auth.signin() function from the aws-amplify extension. This function takes in the username and password and returns if the user is authenticated or not. However, when using Firefox, this function gets timed-out, as if the browser can't get the response from the server. Here is a screenshot of the console:
Seems like the response is 403 but I am guessing it's because of the time-out.
(The try/catch doesn't catch anything because it looks as if the page freezes)
I hope I made it clear, and thank you for your time reading everything!
Do your request headers/body contain the correct username and password for the user in Firefox, and is it sending the request to the same endpoint as in Chrome? The 403 code makes me think that the endpoint is malformed on the Firefox request. Finally, is it sending with SRP_AUTH or USER_PASSWORD_AUTH?
Also, since you're using React with Cognito+Amplify for auth*, you might want to consider using the withAuthenticator higher-order-component provided by aws-amplify-react and styling it to your needs. Then you won't need to maintain your own login logic, won't need to worry about fixing it yourself if a browser change breaks your code, etc.
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.