Error accessing Sanity studio with Nextjs template, resolved by updating project ID.

I can help you solve this authorization issue! This is a common problem when setting up Sanity Studio embedded in Next.js, and it's almost always related to CORS configuration rather than project membership.

The "You are not authorized to access this studio" error occurs because your Studio is running on http://localhost:3000 (embedded in your Next.js app), but this origin hasn't been added to your Sanity project's allowed CORS origins. Even though you're successfully authenticated with Google or GitHub, Sanity blocks the Studio from loading because the domain isn't whitelisted.

Here's how to fix it:

Add localhost to CORS Origins

1. Go to manage.sanity.io
2. Select your project
3. Navigate to Settings → API → CORS Origins
4. Click Add CORS origin
5. Add http://localhost:3000 (make sure to include the http:// protocol)
6. Important: Check the "Allow credentials" checkbox
7. Save the changes

The "Allow credentials" option is crucial - without it, authenticated requests from your Studio won't work properly, as explained in the CORS Origins documentation.

Why This Happens

When you embed Sanity Studio in a Next.js app (rather than using the standalone Studio), it runs on your Next.js development server. Sanity treats this as a cross-origin request and requires explicit permission through CORS configuration. This is a security feature to prevent unauthorized domains from accessing your project data.

After Deployment

When you deploy your Next.js app to production, you'll need to add your production domain to CORS origins as well (e.g., https://yourdomain.com). Each environment where your Studio runs needs to be explicitly allowed.

The invited member is getting the same error because this isn't actually a permissions issue - it's a CORS configuration issue preventing the Studio from loading at all for anyone on that domain.

Try adding the CORS origin and the error should disappear immediately!