Aura Auth

TikTok

Add GitHub authorization provider to Aura Auth to authentication and authorize

TikTok OAuth App

Register the Application

The first step is to create and register an OAuth App on the TikTok developer console to obtain access to the user's resources.

  1. Navigate to your TikTok Developer Portal and go to Developer Portal > Manage apps.
  2. Click Connect an app.
  3. Select Individual or Organization ownership and click Confirm.
  4. Fill in the "App name" and "App type".
  5. Fill the Basic information section with the required details.
    • App icon: 1024 x 1024 px
    • Category: Select the most relevant category for your app.
    • Description: Description of your app's functionality and purpose.
    • Terms of Service URL: Link to your app's terms of service.
    • Privacy Policy URL: Link to your app's privacy policy.
    • Platforms: Select the platforms your app will support (e.g., Web, Desktop, iOS, Android).
  6. Fill the App review section required to pass the TikTok review process.
    • Short description: A concise summary of your app's functionality (max 1000 characters).
  7. Add scopes required for your app to function properly. For example, if you need to access user profile information, you would add the user.info.basic scope.
  8. Read teh complete App Review Guidelines to ensure your app meets all requirements before submission.
  9. Click Submit for review.
  10. Ensure you copy the Client ID and click Generate a new client secret.

Installation

Install the @aura-stack/auth package. Please follow the Installation Guide to complete the setup and core configuration for aura-stack/auth.

npm install @aura-stack/auth

Environment setup

Now, you must configure the environment variables required by Aura Auth, including the GitHub credentials and the encryption secrets.

.env
# Aura Secrets
AURA_AUTH_SECRET="your-32-byte-secret"
AURA_AUTH_SALT="your-32-byte-salt"

# TikTok Credentials
AURA_AUTH_TIKTOKE_CLIENT_ID="your_tiktok_client_id"
AURA_AUTH_TIKTOKE_CLIENT_SECRET="your_tiktok_client_secret"

Configure the Auth Instance

Configure the createAuth instance inside an auth.ts file located at the root of your project. Ensure you explicitly export the handlers, api, and jose objects.

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

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

// Extract the required utilities
export const { handlers, api, jose } = auth

The handlers object contains mapping utilities for standard HTTP methods (GET, POST, PATCH) as well as a unified ALL handler. This allows you to easily mount the authentication routes across any framework (Next.js, Elysia, Express, etc.).

Customizing the OAuth Provider

If you need to define custom scopes, change the response type, or map profile data differently, you can use the provider's factory function instead of a simple string identifier.

@/lib/auth.ts
import { createAuth } from "@aura-stack/auth"
import { tiktok } from "@aura-stack/auth/oauth/tiktok"

export const auth = createAuth({
  oauth: [
    tiktok({
      authorize: {
        params: {
          // Override default scopes
          scope: "user.info.stats",
        },
      },
    }),
  ],
})

export const { handlers, api, jose } = auth

Sign In to TikTok (Client & Server)

There are multiple ways to trigger the sign-in flow depending on your ecosystem.

Sign-in Path (Direct Navigation)

The common route to trigger the auth flow natively without needing a client library is simply navigating the browser to: http://localhost:3000/auth/signIn/tiktok


Client-Side (React, Vue, etc.)

You can utilize the createAuthClient utility to programmatically trigger sign-ins. You can also define a redirectTo destination.

Constraint Rule: The baseURL passed into createAuthClient MUST exactly match the root domain and path where the HTTP handlers expose their endpoints on the server.

components/Login.tsx
import { createAuthClient } from "@aura-stack/auth/client"

export const authClient = createAuthClient({
  baseURL: "http://localhost:3000/auth",
})

const triggerSignIn = async () => {
  await authClient.signIn("tiktok", {
    redirectTo: "/dashboard",
  })
}

Server-Side (Next.js Actions, Remix Loaders, etc.)

For environments supporting server-side actions, use the programmatic api.signIn method securely.

actions.ts
import { api } from "./auth"

export const serverSignIn = async () => {
  const response = await api.signIn("tiktok", {
    redirectTo: "http://localhost:3000/dashboard",
  })

  // Example returning redirect location
  return response.headers.get("Location")
}

Session Retrieval

After a user successfully signs in, you can retrieve their session data securely.

Client-Side:

const session = await authClient.getSession()
console.log(session?.user) // The authenticated TikTok user profile

Server-Side:

// Note: You must pass the native Web Request object or Headers!
const session = await api.getSession(request)
console.log(session?.user) // Safely retrieved backend session

Resources

On this page