🔒 Authentication

A Discord Activity wouldn't feel complete without authenticating users. This allows you to provide a more personalized experience, such as showing your users' usernames, avatars, and more.

Lucky for us, Discord's Embedded App SDK simplifies the process.

Prompt Users to Authenticate

Most of our templates and Create Robo starters come with a built-in authentication system via <DiscordContextProvider>. This component abstracts the authentication process, so you don't have to worry about the small details.

/src/app/App.tsx

import { DiscordContextProvider } from '../hooks/useDiscordSdk'
import { Activity } from './Activity'
import './App.css'

export default function App() {
	return (
		<DiscordContextProvider authenticate scope={['identify', 'guilds']}>
			<Activity />
		</DiscordContextProvider>
	)
}

Setting authenticate to true will prompt users to authenticate with Discord when they open your activity. You can adjust the scope array to request additional permissions.

The React Hook

Once authenticated, you can access the user's information using the useDiscordSdk hook.

/src/components/Profile.tsx

import { useDiscordSdk } from '../hooks/useDiscordSdk'

export function Profile() {
	const { accessToken, authenticated, discordSdk, error, session, status } = useDiscordSdk()

	// ...
}

The object returned from useDiscordSdk includes:

• accessToken: The user's access token. (string)
• authenticated: Whether the user is authenticated. (boolean)
• discordSdk: The Discord SDK instance. (DiscordSDK)
• error: Any errors that occurred during authentication. (Error)
• session: The user's session information. (DiscordSession)
• status: The status will be authenticating during the prompt. (string)

You can use the session object to access the user's information, such as their username, avatar, and more.

const avatarUri = `https://cdn.discordapp.com/avatars/${session.id}/${session.avatar}.png?size=256`

Loading State

For convenience, <DiscordContextProvider> accepts a loadingScreen prop. This component will be displayed while the user is authenticating.

/src/app/App.tsx

<DiscordContextProvider loadingScreen={<div>Loading...</div>}>
	<Activity />
</DiscordContextProvider>

Vanilla projects

If you're not using a template based on React, you can still authenticate users using the Embedded App SDK directly.

🔗 Embedded App SDK

Learn more about the Embedded App SDK.