Load DB from URL

[yooper]

Hello, Is there anyway to specify a URL so that libsql-studio will automatically load the sqlite database upon page load? An example might look like

https://libsqlstudio.com/playground/client?url=https://example.com/sqlite.db

[invisal]

We don't have. But we can implement this quickly. The only problem is CORS. If the website owner allows us, we should be able to do it.

@yooper any specified use-case you need it for? If it is important, I can do it tonight :)

[yooper]

Use Case

I have several sqlite databases that are hosted on a remote server. It would be great if I could provide the URL to the file on the remote server and an additional authorization code to access them. Ideally, I want to open my web browser with a URL like this:

https://libsqlstudio.com/playground/client?url=https://example.com/sqlite.db&authToken=djflajfldaljdlk444r233223

Thank you

[invisal]

@yooper I have added this support. You can try

https://libsqlstudio.com/playground/client?url=https://r2.invisal.com/sample/chinook.db

[yooper]

Thank you for adding that feature. I will get back to you tomorrow after I run through a couple tests.

[yooper]

Hello @invisal , While testing the feature I hit an issue with my authentication approach. I tried using the http basic authentication approach where you add the auth credentials into the url. For example,

https://libsqlstudio.com/playground/client?url=https://username:password@example.com/sqlite.db

Javascript's fetch does not allow you to do this and throws the error:

Uncaught (in promise) TypeError: Failed to execute 'fetch' on 'Window': Request cannot be constructed from a URL that includes credentials: 

Can you implement a check on the url to see if it has the basic auth credentials in the url and change the fetch request to use the extracted username and password in the authorization headers? Here is a rough outline of the code.

function extractCredentialsAndPrepareHeaders(url) {
    try {
        const parsedUrl = new URL(url);

        // Extract credentials from the URL
        const { username, password } = parsedUrl;

        // Remove username and password from the URL to clean it
        parsedUrl.username = '';
        parsedUrl.password = '';

        // Prepare the Authorization header
        const base64Credentials = btoa(`${username}:${password}`);
        const headers = {
            'Authorization': `Basic ${base64Credentials}`
        };

        // Return the cleaned URL and the headers
        return {
            cleanedUrl: parsedUrl.href,
            headers
        };
    } catch (error) {
        console.error('Error parsing URL:', error);
        return null;
    }
}

// Example usage:
const inputUrl = "http://username:password@localhost:3000/data";
const result = extractCredentialsAndPrepareHeaders(inputUrl);
if (result) {
    console.log('Cleaned URL:', result.cleanedUrl);
    console.log('Authorization Headers:', result.headers);
}

I am also open to alternative methodologies to authenticate against the remote service. Thank you!

[invisal]

@yooper I will investigate the problem and provide the fix and alternative solution if there is any tonight.

[invisal]

@yooper I have added support for fetch with basic auth.

[yooper]

@invisal , thank you for adding in this feature. Everything is working for me!