I have been using Supabase for a couple months and I really like what I see. User authentication is pretty simple. I have sign up with email verification, sign in, and password reset all working. My question is how to invite a user thoriugh email? There is a function called inviteUserByEmail(), however, it is part of the admin API.
https://supabase.com/docs/reference/javascript/supabase-auth-admin-api says anything that starts with supabase.auth.admin must be called on a trusted server. I don't understand what it means by server. I thought supabase provided what I need? Can anybody offer me an explaination?
I have looked all over the internet and youtube and there are no examples of this anywhere.
Admin requests are meant to be used server side.
https://supabase.com/docs/reference/javascript/admin-api
You could try having the same user experience by using the auth signup request https://supabase.com/docs/reference/javascript/auth-signup
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 have an API that I want to make a request to from my frontend, which is built using React. However, I don't want anyone to be able to see the API call in my code, because if someone just opens the inspect window, then they can see the API call. I've thought of perhaps adding some sort of header to be sent as authentication in the request, but that doesn't work either because you can just see the code if you inspect the site.
How would I do this? My API returns a private key that I can't just store in a variable directly within my code.
Sorry if this question doesn't make sense, but I appreciate all the help.
Your frontend code is insecure and observable by default. There is no secret in the frontend.
If your API returns confidential data that should only be accessed by the appropriate user you will have to implement authentication of any sort.
A user would then for example provide a password in order to call the API or he logged in before and got a token (e.g. JWT) that he sends with every request to authenticate. There is a user identity on every request then and your backend can decide if the user is allowed to get that private key.
If you really really want to make it difficult for someone to see your frontend code your router might provide a feature like "protected routes" that require such a token in order to access certain routes of your application. It will still always be possible to get the frontend code because the business logic has to stay on the backend.
Im trying to get basic data from instagram profiles, I am using a local webpack dev server to run my react app, I am also using Firebase functions, the function on firebase sends oauth/authorize request to instagarm's api, im getting a code response back and return it to my react popup, i then send the code to instagrams api for oatuh/access_token but im getting the following error:
Error validating verification code. Please make sure your redirect_uri is identical to the one you used in the OAuth dialog request
Im running localhost:3000 as https with an ssl, i've set the redirecturl in the instagram developer tools to https://localhost:3000/instagram-popup/
the popup is the page I'm, loading to get the access token, it does get the code from the firebase function correctly, but fails the last call... I have lost SO many hours on this issue, if anyone has been in this situation and solved it, or didnt even encounter it but knows what i can do to fix it, i would really appreciate any guidance here
I would like to sync my google contacts into roundcube. I already installed 2 plugins (calendar sync with caldav is working like a charm with url, user and password) but I cant find the correct url for the carddav service.
Does anyone knows it?
Thank you
Moritz
The URL at this moment is:
https://www.googleapis.com/carddav/v1/principals/YOUR#gmail.com/lists/default
But the client you're trying to connect from should not be using this permanently, but instead discover the correct URL by sending a PROPFIND to https://www.googleapis.com/.well-known/carddav as described in the Developer's Guide.
Anyway, Roundcube would have to support OAuth2 authentication, not user and password, to be able to connect properly, which I don't believe it does.