How to verify your domain using Astro

I’ve just spent a few minutes setting up a custom handle for my Bluesky account and thought I’d share my experience. If you’re looking to do the same with your Astro website, this guide should help streamline the process!

Understanding Domain Verification

When setting up a custom handle on Bluesky, you need to prove you own the domain. There are two methods:

1. Configuring your DNS settings
2. Adding a verification file to your domain

While DNS configuration is typically recommended, I opted for the file-based approach since I couldn’t easily find the DNS settings in my Netlify dashboard. Both methods work equally well!

Step 1: Create the Middleware

First, you’ll need to set up a middleware to handle the verification file. Create a new file at src/middleware.ts:

import { defineMiddleware } from "astro:middleware";

type ContextLocals = {
  locals: {
    did?: string;
  };
};

export const onRequest = defineMiddleware(async (context, next) => {
  const { locals }: ContextLocals = context;

  // Handle the atproto-did file specifically
  if (context.url.pathname === "/.well-known/atproto-did") {
    return new Response(locals.did || "", {
      headers: {
        "Content-Type": "text/plain",
      },
    });
  }

  // For all other routes, proceed with default headers
  return next();
});

Step 2: Get Your DID

Now, let’s get your unique DID from Bluesky:

1. Open Bluesky Desktop
2. Navigate to Settings > @ Change Handle
3. Choose “I have my own domain”
4. Select “No DNS Panel”
5. Click “Copy File Contents” to get your DID

Step 3: Create the Verification File

Set up the required files in your project:

1. Create a .well-known folder inside your public directory
2. Inside .well-known, create a file named atproto-did (no file extension)
3. Paste your DID into this file

Step 4: Configure Content Type

Create an .htaccess file in your public directory to ensure proper content type handling:

# public/.htaccess
<IfModule mod_rewrite.c>
    RewriteEngine On

    # Allow access to .well-known directory
    RewriteCond %{REQUEST_URI} !^/\.well-known/
</IfModule>

# Set correct content type for atproto-did file
<Files "atproto-did">
    ForceType text/plain
</Files>

Final Steps

1. Commit and deploy your changes
2. Wait a few minutes for the deployment to complete
3. Return to Bluesky and click “Verify Text File”

Your domain should now be verified, and you can use your custom handle!

Troubleshooting

If verification fails, check these common issues:

1. Ensure your file is named exactly atproto-did with no extension
2. Verify the file is accessible at yourdomain.com/.well-known/atproto-did
3. Check that the file contents match exactly what Bluesky provided
4. Wait a few minutes after deployment before trying verification

Conclusion

That’s it! You’ve successfully set up domain verification for your Bluesky handle using Astro. This method works great with static hosting providers like Netlify, Vercel, or GitHub Pages.

Have questions or running into issues? Feel free to reach out to me on Bluesky @paulapenedo.dev!