Back

Email Verification Error "AppwriteException" Vite with React

  • 0
  • Web
Tighty
16 Oct, 2023, 21:26

Hi guys, When I want to create an email verification with the createVerification endpoint, I'm getting this error: stack: 'AppwriteException: Invalid url param: URL host m…//exampledomain.com/assets/index-89d49a4b.js:132:100454)'}

Im using a react app that I created with vite and deployed on vercel. All the other endpoints work. Its just the verification.

Im also using the appwrite cloud. No selfhosting.

Thats the payload that is beeing send: {url: "https://exampledomain.com/verification-completed"}

Does anyone have experience with that kind of behaviour?

Here is the full error message that I get back: { "name": "AppwriteException", "message": "Invalid url param: URL host must be one of: localhost, cloud.appwrite.io, *, *exampledomain.com, exampledomain.com, www.exampledomain.com", "stack": "AppwriteException: Invalid url param: URL host must be one of: localhost, cloud.appwrite.io, *, *exampledomain.com, exampledomain.com, www.exampledomain.com\n at Y8.<anonymous> (https://exampledomain.com/assets/index-89d49a4b.js:132:106658)\n at Generator.next (<anonymous>)\n at a (https://exampledomain.com/assets/index-89d49a4b.js:132:100454)" }

Appreciate the help!

TL;DR
The user is trying to create an email verification with the Appwrite API using Vite and React. They are encountering an error stating that the URL host is invalid. The URL they are using for the callback is "https://exampledomain.com/verification-completed". The error message suggests that the URL host must be one of "localhost", "cloud.appwrite.io", or "*exampledomain.com". The user has tried changing the callback URL to "localhost:port/verification-completed" and it works in development mode but not in production on Vercel. They have also tried building the project with webpack with the same result. They
Drake
17 Oct, 2023, 00:35

as it says...what you're passing for hte url is invalid

Drake
17 Oct, 2023, 00:36

what's your code?

Tighty
17 Oct, 2023, 14:17

My code is: const client = new Client(); client.setEndpoint(appwriteEnv.endpoint!).setProject(appwriteEnv.project!);

const account = new Account(client); createVerification: (url: string) => { return account.createVerification(url); },

url (for the callback) is: https://exampledomain.com/verification-completed

It works on localhost. Just doesn't work in production on vercel. I think it could be because of the build of vite in combination with react. But I dont know if thats the right track. Any experience with that?

I tried to also build it with webpack. Also when Im using the serve of the builded project, it gives me the same error. So it just does not work in general when I access the builded project. Only works when I start the project in dev mode with for exmaple "yarn start"

Drake
17 Oct, 2023, 14:44

are you able to share the network logs from the browser?

Drake
17 Oct, 2023, 14:45

what exactly did you put for your web platforms?

Tighty
17 Oct, 2023, 15:16

As my Platform I have a Web Platform: *exampledomain.com, exampledomain.com, www.exampledomain.com"

I also noticed that once I change the callback url to localhost:port/verification-completed, it works when I build and serve the project. So there has to be something with the domain in combination with the built project.

Drake
17 Oct, 2023, 17:13

uhhh that's 1 platform? you can't have multiple values

Tighty
17 Oct, 2023, 19:00

Yeah I've noticed πŸ˜„ My bad! As the hostname I've put "*exampledomain.com". But that is what I get when I call createVerification on the built deployed react app:

"{ "name": "AppwriteException", "message": "Invalid url param: URL host must be one of: localhost, cloud.appwrite.io, *exampledomain.com", "stack": "AppwriteException: Invalid url param: URL host must be one of: localhost, cloud.appwrite.io, *exampledomain.com\n at e.<anonymous> (https://exampledomain.com/static/js/main.3a597d5b.js:2:696578)\n at p (https://exampledomain.com/static/js/main.3a597d5b.js:2:678641)\n at Generator.<anonymous> (https://exampledomain.com/static/js/main.3a597d5b.js:2:679993)\n at Generator.next (https://exampledomain.com/static/js/main.3a597d5b.js:2:679070)\n at a (https://exampledomain.com/static/js/main.3a597d5b.js:2:688163)" }"

In the network tab under "payload" of the request the payload looks like that: url: https://exampledomain.com/verification-completed

Any idea what could cause that? As I said, everything else works. Login, making requests to different "storage endpoints" and so on.

Drake
18 Oct, 2023, 00:33

can you DM me exactly what your code, payload and what the web platform is?

Reply

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more