Oauth Providers
GitHub
To use GitHub as your Git provider, you need to create a GitHub OAuth application.
Navigate to GitHub Developer Settings
Go to GitHub Developer Settings and click New OAuth App
Configure the OAuth Application
Fill in the required fields:
- Application name: Your app name
- Homepage URL:
https://yourdomain.com - Authorization callback URL:
https://yourdomain.com:note If you want to try studio locally, set the callback url to your local urlhttp://localhost:3000
Copy Your Credentials
After creating the OAuth app, you'll receive:
- A Client ID (visible immediately)
- A Client Secret (click Generate a new client secret)
Set your environment Variables
Add the GitHub OAuth credentials to your deployment platform's environment variables or in your .env file in local
STUDIO_GITHUB_CLIENT_ID=<your_github_client_id>
STUDIO_GITHUB_CLIENT_SECRET=<your_github_client_secret>
/_studio (or on the route you've configured) to start editing.GitLab
To use GitLab as your Git provider, you need to create a GitLab OAuth application.
Navigate to GitLab Applications
Go to your GitLab User Settings → Applications (or your group/organization settings) and create a New Application.
Configure the OAuth Application
Fill in the required fields:
- Application name: Your app name
- Redirect URI:
https://yourdomain.com/__nuxt_studio/auth/gitlab - Scopes: Select
api(required for publication)If you want to try studio locally, add your local url as redirect URI:http://localhost:3000/__nuxt_studio/auth/gitlab
Copy Your Credentials
After creating the OAuth application, you'll receive:
- An Application ID (visible immediately)
- A Secret (visible immediately)
Set your environment Variables
Add the GitLab OAuth credentials to your deployment platform's environment variables or in your .env file in local
STUDIO_GITLAB_APPLICATION_ID=<your_gitlab_application_id>
STUDIO_GITLAB_APPLICATION_SECRET=<your_gitlab_secret>
/_studio (or on the route you've configured) to start editing.Advanced options
Custom Redirect URL
By default, Studio uses your deployment URL as the OAuth redirect URL. If you need to customize it you can specify a custom redirect URL:
# Using GitHub provider
STUDIO_GITHUB_REDIRECT_URL=https://custom-domain.com
# Using GitLab provider
STUDIO_GITLAB_REDIRECT_URL=https://custom-domain.com
Working with Staging/Preview Branches
By default, Studio commits changes to the branch specified in your configuration (typically main). However, you can configure Studio to work with a staging or preview branch instead.
This is useful when you want to review changes on a preview environment before merging to production. You can currently handle pull requests manually from GitHub, but automatic PR creation is included in our roadmap and will be implemented in a future release.
Configure
Update your nuxt.config.ts to target your staging branch.
export default defineNuxtConfig({
studio: {
repository: {
owner: 'your-username',
repo: 'your-repo',
branch: PROCESS.ENV.STUDIO_BRANCH_NAME, // Target your staging branch instead of main
}
}
})
Deploy
Configure your hosting platform to deploy the staging branch to a preview URL (e.g., staging.yourdomain.com).
Create a Separate OAuth App (based on your Git provider)
Create a new OAuth App specifically for your staging environment and use your staging URL as callback URL.
Set Environment Variables
Configure your staging deployment env varibales with the staging OAuth credentials.
STUDIO_GITHUB_CLIENT_ID=<your_staging_github_client_id>
STUDIO_GITHUB_CLIENT_SECRET=<your_staging_github_client_secret>
STUDIO_GITHUB_BRANCH_NAME=<your_staging_branch_name>
Access Studio on Staging
Navigate to https://staging.yourdomain.com/_studio to edit content. All commits will be pushed to your configured staging branch.
Merging to Production
Once you're satisfied with changes on your staging branch, create a pull request from your staging branch to your main branch on GitHub to deploy to production.
Automatic pull request creation from Studio is planned for a future release. For now, you'll need to manually create PRs on GitHub to merge staging changes into your main branch.