search

Toaster

Component for displaying toast notifications used internally by the SDK during authentication flows. It is built on top of Radix UI Toast primitives and provides visual confirmation during login/authentication flows.

This documentation explains how the Toaster works internally within the Deva SDK.

Important: This is an internal-only component. External developers cannot access or control these toasts directly for now.

hashtag
Why You Need It

The Toaster component is required for the Deva SDK to provide visual feedback during authentication. Without it, users won't see important notifications when logging in or if authentication fails.

Think of it as the SDK's internal notification system that you enable by mounting the component once at your app root.

hashtag
Setup

Add Toaster to your app root to enable SDK notifications:

import { DevaProvider } from "@bitplanet/deva-sdk";
import { Toaster } from "@bitplanet/deva-sdk/components";

export default function App() {
  return (
    <DevaProvider clientId="your-client-id" env="your-target-environment">
      <YourApp />
      <Toaster />
    </DevaProvider>
  );
}

hashtag
What It Does

The Toaster component serves as the user feedback mechanism for SDK-managed authentication operations:

  • Visual Confirmation - Shows when login succeeds

  • Error Communication - Explains why login failed

  • Automatic Handling - SDK controls when and what toasts appear

  • No Configuration Needed - Works out of the box

hashtag
When Toasts Appear

The SDK automatically displays toasts during authentication:

Login Success:

Login Failure:

hashtag
Internal Use Only

The toast system is currently for internal SDK use only.

This is intentional - the SDK manages its own notifications to ensure consistent user experience across all Deva-powered applications. The Toaster only displays messages for SDK operations like authentication.

hashtag
Need Custom Notifications?

If you need toast notifications for your own application logic (outside of SDK authentication), use a separate toast library:

  • react-hot-toast

  • sonner

  • react-toastify

These can coexist with the SDK's Toaster without conflicts.

hashtag
Position

Toasts appear in the bottom-right corner of the viewport by default.

hashtag
Related Documentation

PreviousCustomizationNextuseDeva

Last updated