I am using appwrite with react and I am having a problem logging in or signing up users.
When a users click the button he should see the home page, edit post and add post routes.
But I’m getting an error in Failed to construct ‘URL’: Invalid URL
Here is the error message:
console message
Below is the code for my appwrite.auth.js file:
import conf from "../conf/conf.js"
import { Client, Account, ID } from "appwrite";
export class AuthService {
client = new Client();
account;
constructor() {
this.client
.setEndpoint(conf.appwriteUrl)
.setProject(conf.appwriteProjectId)
this.account = new Account(this.client)
}
async createAccount({email, password, name}){
try {
const userAccount = await this.account.create(ID.unique(), email, password, name)
if (userAccount) {
return this.login({email, password})
} else {
return userAccount
}
} catch (error) {
throw error
}
}
async login({email, password}){
try {
return await this.account.createEmailSession(email, password)
} catch (error) {
throw error
}
}
async getCurrentUser(){
try {
return await this.account.get()
} catch (error) {
console.log("Appwrite service :: getCurrentUser() :: ", error)
}
return null
}
async logout(){
try {
await this.account.deleteSessions()
} catch (error) {
console.log("Appwrite service :: logout() :: ", error);
}
}
}
const authService = new AuthService()
export default authService
Below is my appwrite/config.js file for reference:
import conf from "../conf/conf";
import { Client, Databases, Storage, Query, ID } from "appwrite";
export class Service {
client = new Client()
databases;
bucket;
constructor(){
this.client
.setEndpoint(conf.appwriteUrl)
.setProject(conf.appwriteProjectId)
this.databases = new Databases(this.client)
this.bucket = new Storage(this.client)
}
async getPost(slug) {
try {
return await this.databases.getDocument(conf.appwriteDatabaseId, conf.appwriteCollectionId, slug)
} catch (error) {
console.log("Appwrite service :: getPost() :: ", error)
return false
}
}
async getPosts(queries = [Query.equal("status", "active")]) {
try {
return await this.databases.listDocuments(conf.appwriteDatabaseId, conf.appwriteCollectionId, queries)
} catch (error) {
console.log("Appwrite service :: getPosts() :: ", error)
return false
}
}
async createPost({title, slug, content, featuredImage, status, userId}) {
try {
return await this.databases.createDocument(conf.appwriteDatabaseId, conf.appwriteCollectionId, slug, {title, content, featuredImage, status, userId})
} catch (error) {
console.log("Appwrite service :: createPost() :: ", error)
return false
}
}
async updatePost(slug, {title, content, featuredImage, status}) {
try {
return await this.databases.updateDocument(conf.appwriteDatabaseId, conf.appwriteCollectionId, slug, {title, content, featuredImage, status})
} catch (error) {
console.log("Appwrite service :: updatePost() :: ", error)
return false;
}
}
async deletePost(slug) {
try {
await this.databases.deleteDocument(conf.appwriteDatabaseId, conf.appwriteCollectionId, slug)
return true;
} catch (error) {
console.log("Appwrite service :: deletePost() :: ", error)
return false;
}
}
// storage service
async uploadFile(file) {
try {
return await this.bucket.createFile(conf.appwriteBucketId, ID.unique(), file) // if error use uploadFile()
} catch (error) {
console.log("Appwrite service :: uploadFile() :: ", error)
return false
}
}
async deleteFile(fileId) {
try {
return await this.bucket.deleteFile(conf.appwriteBucketId, fileId)
} catch (error) {
console.log("Appwrite service :: deleteFile() :: ", error)
return false
}
}
getFilePreview(fileId) {
return this.bucket.getFilePreview(conf.appwriteBucketId, fileId).href
}
}
const service = new Service()
export default service;
Is there a way to fix this? It seems doesn’t seem to recognize the new construct URL.
I have been following Hitesh Chowdary’s YouTube Tutorial.
https://www.youtube.com/watch?v=zWF7O7aHQW4
