Unable to create an oAuth2 session
No, Appwrite needs to be a subdomain of your app
Oh.. would it be possible at all to have both as a separate TLD? When I hosted Appwrite, I planned on using it as a BaaS for all the projects that I'll be doing. And those projects are not related to each other. And that's why I installed Appwrite on a completely separate VM/domain name. I want it to be my personal Firebase for all the projects I'll be working on.
Was an instance only meant for a single project?
You can make custom domains for each project
No you have a generic appwrite.example.com domain for your Appwrite instance (the domain env vars in your .env file). Then, for each project that needs it, you'll create a custom domain in the project settings.
Yeah I've already seen that. It's late, I'm gonna look at this again tomorrow. I understand that I need Appwrite to be a subdomain of my app so that the cookies will look like it's coming from my app. But I'm having difficulties understanding what I need to do. I mean I do understand once I've deployed my app to the cloud. I'll just add a CNAME to my DNS for a subdomain to point to my self hosted instance. But during development where I'm only working on localhost, I'm like stumped and I don't know what I first need to do.
On localhost, if both your app and Appwrite are on localhost, it should work
No, my Appwrite is already hosted on the cloud and I'm already accessing it during local development. I have a project labeled development so I don't use it for production, eventually I'll duplicate the project for a production environment. The only thing on localhost is my NextJS app that I'm trying to build.
Oh well then it's probably a 3rd party cookie problem
So would you advice that I spin up a local install of appwrite during development and only use the self hosted domain for production?
In general, yes, I would use a separate instance for dev vs prod.
Ugh.. that's a bummer.. it's not really how I tried to set all of my projects up. My idea was to host appwrite on the cloud and use that for both development and production (including dev and prod for other projects that aren't related to my main app).. they'll just be separate projects. I guess I need to rethink my plan. Thanks!
The big reason why is when you upgrade, you should upgrade your dev instance and test thoroughly. Then, upgrade prod
Oh yeah that is true. Okay, perhaps tomorrow or during the weekend, I'll try to plan this out again. Thank you for your help!
I've done all the steps in this doc https://appwrite.io/docs/custom-domains and I made sure that I'm using the new subdomain as the appwrite endpoint when creating the client. I'm not talking about localhost here, I deployed what I currently have on the cloud and it's displaying the button to sign in to Google, but when I click it, I get this error:
Invalid success: URL host must be one of: localhost, appwrite.myapp.com
What's your code?
import { MouseEvent, useEffect, useState } from 'react';
import { Models } from 'appwrite';
import { account } from '@/clients/appwrite';
import Constants from '@/utilities/constants';
const Home = () => {
const [session, setSession] = useState<Models.User<Models.Preferences> | undefined>(undefined);
const checkSession = async () => {
const validSession = await account.get();
if (validSession) {
setSession(validSession);
}
};
useEffect(() => {
checkSession();
}, []);
const googleAuth = async (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
account.createOAuth2Session('google', Constants.BASE_URL, Constants.BASE_URL);
const newSession = await account.get();
setSession(newSession);
};
const handleLogout = async (e: MouseEvent<HTMLButtonElement>) => {
e.preventDefault();
await account.deleteSessions();
setSession(undefined);
};
return (
<div>
{session ? (
<button
type='button'
onClick={handleLogout}>
Logout
</button>
) : (
<button
type='button'
onClick={googleAuth}>
Sign in with Google
</button>
)}
</div>
);
};
export default Home;
import { Client, Account, Storage } from 'appwrite';
import Constants from '@/utilities/constants';
const client = new Client().setEndpoint(Constants.APPWRITE_BASE_URL).setProject(Constants.APPWRITE_PROJECT_ID);
export const account = new Account(client);
export const storage = new Storage(client);
export default client;
can you try logging Constants.BASE_URL before account.createOAuth2Session('google', Constants.BASE_URL, Constants.BASE_URL);?
It's showing my app's domain name: https://myapp.com.
So did you add that hostname as a web platform in your project?
Where do I go to change that? I don't remember what I initially set it to. I might have set it as localhost because I was on a development environment.
Nevermind I found it.
Now it works.
Okay so I was able to implement oAuth. I still need to figure out how I'm going to set my projects up but thank you for your help!
