JavaScript How to configure oauth in sveltia cms and integrate with sveltekit, deploy to vercel?

[Coding Nguyen]

hello​

I am building a website written with sveltekit, tailwindCss, sveltia cms and deploying to vercel. However, I am having difficulty logging into sveltia cms. Specifically, I cannot configure oauth and when accessing the url/admin it cannot login through my github. The website is located in the /site/htdocs/ directory and the bug is in the admin section. I really hope you can help me solve this problem. Thanks, I hope to receive help from the community. If you are interested you can check out my repo
here link

 

[JimmysNetwork]

hello​

I am building a website written with sveltekit, tailwindCss, sveltia cms and deploying to vercel. However, I am having difficulty logging into sveltia cms. Specifically, I cannot configure oauth and when accessing the url/admin it cannot login through my github. The website is located in the /site/htdocs/ directory and the bug is in the admin section. I really hope you can help me solve this problem. Thanks, I hope to receive help from the community. If you are interested you can check out my repo
here link

Hello,


I have not personally used sveltekit but from what I have read you can try troubleshooting some of the following:

1. Verify GitHub OAuth Settings:

• Ensure you've created a GitHub OAuth app at GitHub Developer Settings.
• Set the "Authorization callback URL" to point to your deployed site's admin OAuth redirect URL (e.g., https://your-domain.com/admin/auth/callback).

2. Update Sveltia CMS Configuration:

• In your sveltia.config.js or similar configuration file, ensure you have the correct client ID and secret from GitHub.

Example:

export default {
  auth: {
    providers: {
      github: {
        clientId: 'your-client-id',
        clientSecret: 'your-client-secret',
      },
    },
  },
};

3. Environment Variables:

• Store your GitHub client ID and secret securely in Vercel's environment variables (GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET).
• Update your app to read these values:

clientId: process.env.GITHUB_CLIENT_ID,
clientSecret: process.env.GITHUB_CLIENT_SECRET,

4. Redirect Issues:

• Ensure your /admin route correctly proxies or handles the OAuth flow.
• Check the redirect_uri passed during the OAuth request matches what is set in GitHub.

Hope this will help resolve the issues. Let me know if you continue expierencing any problems.

 

[Zakwan@MTH]

Hey There !
In order to troubleshoot SvelteKit GitHub OAuth issues, verify your GitHub OAuth settings by ensuring the callback URL (e.g., https://your-domain.com/admin/auth/callback) is correctly set in your GitHub app. Update your Sveltia CMS configuration to include the GitHub client ID and secret, storing them securely in environment variables (e.g., GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET) and referencing them via process.env. Ensure your /admin route correctly handles the OAuth flow and that the redirect_uri matches the GitHub configuration.

export default {
  auth: {
    providers: {
      github: {
        clientId: 'your-client-id',
        clientSecret: 'your-client-secret',
      },
    },
  },
};

 

[Coding Nguyen]

Hey There !
In order to troubleshoot SvelteKit GitHub OAuth issues, verify your GitHub OAuth settings by ensuring the callback URL (e.g., https://your-domain.com/admin/auth/callback) is correctly set in your GitHub app. Update your Sveltia CMS configuration to include the GitHub client ID and secret, storing them securely in environment variables (e.g., GITHUB_CLIENT_ID, GITHUB_CLIENT_SECRET) and referencing them via process.env. Ensure your /admin route correctly handles the OAuth flow and that the redirect_uri matches the GitHub configuration.

export default {
  auth: {
    providers: {
      github: {
        clientId: 'your-client-id',
        clientSecret: 'your-client-secret',
      },
    },
  },
};

I tried doing it your way and when accessing localhost:5173/oauth it worked. However, the sad thing here is that the cms is corrupted, meaning that when accessing localhost:5173/admin, it no longer displays the cms. also, i wonder how to change its path url for example i want it to be localhost:5173/oauth/callback instead of localhost:5173/callback because i want it to work properly with the configuration on github and environment variables on vercel. Thanks for your help and please review my code in the repo.

 

[Coding Nguyen]

I am using sveltekit to config sveltia cms because it is compatible but when doing it your way though, it can load oauth but the cms fails.