Tutorials
AWS Setup

Horizon AI Boilerplate - @shadcn/ui

Step-by-Step Guide to Setting Up AWS S3 for Your Dashboard

Step 1: Create an AWS Account

  1. Visit AWS Website Go to AWS website (opens in a new tab).

  2. Sign Up for an AWS Account Click on the "Create an AWS Account" button and follow the instructions to sign up. You’ll need to provide an email address, password, and billing information.

  3. Verify Your Account AWS will send a verification email. Follow the instructions in the email to verify your account.

Step 2: Set Up IAM User with S3 Permissions

  1. Log in to AWS Management Console Use the credentials you created in the previous step to log in.

  2. Navigate to IAM (Identity and Access Management) In the AWS Management Console, search for and select "IAM".

  3. Create a New User In the IAM Dashboard, click on "Users" in the left sidebar, then click "Add user". Enter a username for the new user. Select "Programmatic access" to provide access via API, CLI, SDK, and other development tools.

  4. Set Permissions Click "Next: Permissions". Choose "Attach policies directly". Search for and select the "AmazonS3FullAccess" policy to grant full access to S3.

  5. Review and Create User Click "Next: Tags" (optional) and "Next: Review". Review the settings and click "Create user".

  6. Download Credentials AWS will generate an Access Key ID and a Secret Access Key for the new user. Download the CSV file containing these credentials or copy them to a secure location. These credentials are required for configuring your application.

Step 3: Create an S3 Bucket

  1. Navigate to S3 Service In the AWS Management Console, search for and select "S3".

  2. Create a New Bucket Click on the "Create bucket" button. Enter a unique name for your bucket (e.g., my-dashboard-bucket). Choose a region that is close to your users or your application server to minimize latency.

  3. Configure Bucket Settings Configure any additional settings as needed (e.g., versioning, tags, etc.). For simplicity, you can leave most settings at their default values.

  4. Create the Bucket Click "Create bucket" to finalize.

Step 4: Obtain AWS S3 Region and Bucket Name

  1. Get Bucket Name The name you provided during bucket creation (e.g., my-dashboard-bucket).

  2. Get AWS S3 Region Go to the S3 Dashboard. Find your bucket in the list and note the region listed next to it (e.g., us-west-1, eu-central-1).

Step 5: Update Your Application Configuration

  1. Configure AWS Credentials in Your Application Use the Access Key ID and Secret Access Key obtained in Step 2. Configure these credentials in your application code or environment variables.

  2. Set Bucket Name and Region Use the bucket name and region in your application configuration.

Example configuration in a .env file:

NEXT_PUBLIC_AWS_S3_SECRET_ACCESS_KEY=your-access-key-id
NEXT_PUBLIC_AWS_S3_ACCESS_KEY_ID=your-secret-access-key
NEXT_PUBLIC_AWS_S3_REGION=your-bucket-region
NEXT_PUBLIC_AWS_S3_BUCKET_NAME=your-bucket-name

Step 6: Update Your Application Configuration

  1. Install AWS SDK Install the AWS SDK in your NextJS application:

  2. Use AWS You can check the code we made at /api/s3-download and /api/s3-upload

AuthenticationPages