Aura Auth

Dropbox Authorization Provider

Add Dropbox authorization provider to Aura Auth to authenticate and authorize

Dropbox

Set up Dropbox authorization provider to the authentication instance to Aura Auth.


What you'll learn

Through this quick start guide you are going to learn and understand the basics and how to set up Dropbox provider to Aura Auth.


Dropbox OAuth App

Creating an OAuth app

The first step is to create and register a Dropbox App to grant access to the user's accessible resources like Get Current Account (used by Aura Auth), Files, Sharing, etc. For more detailed information, read the OAuth Guide, Dropbox API v2, and My Apps Panel.

Registering a Dropbox OAuth app includes:

  • Choose an API: Select the Scoped access option.
  • Choose the type of access you need: Select Full Dropbox to access all files and folders in a user's Dropbox.
  • Name your app: The application name shown when the user grants access to the app.

Once these values are filled in, the app is registered. Now configure the OAuth app.

Settings Panel

  • Redirect URIs: The URL where Dropbox redirects after authorization. It should end with /auth/callback/dropbox for both local and production environments.
    • Local environment: http://localhost:3000/auth/callback/dropbox
    • Production environment: Set the URL of your application.
  • Allow public clients (Implicit Grant & PKCE): Select the Allow option.

Permissions Panel

  • Scope: By default, the scope for an OAuth App is account_info.read, which allows retrieving basic information about your Dropbox account such as username, email, and country. This is required by default by Aura Auth.

Branding Panel

  • App Name: The application name shown when the user grants access to the app. This overrides the Name your app value from the first step.
  • Description: An optional description of what the app does.
  • App website: The home URL of your website.
  • Privacy policy URL: Your privacy policy URL.
  • App icons: Set icons for the consent screen.
    • Icon 64x64
    • Icon 256x256

Dropbox Aura Auth

Installation

install the package using a package manager like npm, pnpm or yarn

npm install @aura-stack/auth

Environment setup

Now, it's time to create and consume the Dropbox credentials required and used by Aura Auth, it include the client Id and client Secret and write them into a .env file.

Additionally set the secret used by Aura Auth to sign and encrypt the user's session.

.env
# Dropbox Credentials
AURA_AUTH_DROPBOX_CLIENT_ID="dropbox_client_id"
AURA_AUTH_DROPBOX_CLIENT_SECRET="dropbox_client_secret"

# Aura Secret
AURA_AUTH_SECRET="32-bytes-secret"

The AURA_AUTH_SECRET will recommended to be random and high antropy key to avoid attackers decifer the secret used by the Aura Auth application.

Configure the provider

Set the oauth option of the createAuth instance and writing "dropbox" name.

@/auth
import { createAuth } from "@aura-stack/auth"

export const auth = createAuth({
  oauth: ["dropbox"],
})

export const { handlers } = auth

Custom configuration

@/auth
import { createAuth } from "@aura-stack/auth"
import { dropbox } from "@aura-stack/auth/oauth/dropbox"

export const auth = createAuth({
  oauth: [
    dropbox({
      scope: "account_info.read files.content.read",
    }),
  ],
})

export const { handlers } = auth

Get HTTP Handlers

Use the HTTP handlers to consume the authentication logic and flow the Aura Auth library to be integrated into routers and frameworks.

backend.ts
import { handlers } from "@/auth"

export const { GET, POST } = handlers

The returned handlers include pre-built routes used in OAuth flows (/signIn/:oauth, /callback/:oauth, /session, /signOut and /csrfToken). You can mount them in Express, Hono, Next.js, or any runtime that supports native Request and Response APIs.


Resources

On this page