Implementation:Langgenius Dify Webapp Auth

Knowledge Sources	Langgenius_Dify
Domains	Frontend, API_Service
Last Updated	2026-02-12 07:00 GMT

Overview

Webapp authentication token management module providing localStorage-based getter/setter functions for access tokens and passports, plus login status checking and logout functionality for shared web applications.

Description

webapp-auth.ts manages authentication state for Dify shared web applications (public-facing apps accessed via share links). Unlike the main console authentication which uses HTTP-only cookies, webapp auth uses localStorage for token storage. The module provides six token management functions: setWebAppAccessToken stores the access token; getWebAppAccessToken retrieves it; clearWebAppAccessToken removes it; setWebAppPassport stores a per-share-code passport token keyed by PASSPORT_LOCAL_STORAGE_NAME(shareCode); getWebAppPassport retrieves the passport for a given share code; and clearWebAppPassport removes it. The webAppLoginStatus function checks login status remotely by calling GET /login/status with the app_code as a query parameter (and optional user_id) via getPublic, returning both userLoggedIn (whether the user is authenticated) and appLoggedIn (whether the user has app-specific access). This remote check ensures passports are not outdated and handles enterprise SSO scenarios where tokens may be in cookies. The webAppLogout function clears both the access token and passport from localStorage and sends a POST /logout to the public API to invalidate the server-side session.

Usage

Use this module in shared webapp components for managing authentication state. getWebAppAccessToken and getWebAppPassport are consumed by the fetch layer (fetch.ts) to attach auth headers to API requests. webAppLoginStatus is used during webapp initialization to determine whether the user needs to authenticate. webAppLogout is used by logout buttons and session expiry handlers.

Code Reference

Source Location

• Repository: Langgenius_Dify
• File: web/service/webapp-auth.ts
• Lines: 1-50

Signature

export function setWebAppAccessToken(token: string): void
export function getWebAppAccessToken(): string
export function clearWebAppAccessToken(): void

export function setWebAppPassport(shareCode: string, token: string): void
export function getWebAppPassport(shareCode: string): string
export function clearWebAppPassport(shareCode: string): void

export async function webAppLoginStatus(
  shareCode: string,
  userId?: string
): Promise<{ userLoggedIn: boolean, appLoggedIn: boolean }>

export async function webAppLogout(shareCode: string): Promise<void>

Import

import {
  setWebAppAccessToken,
  getWebAppAccessToken,
  clearWebAppAccessToken,
  setWebAppPassport,
  getWebAppPassport,
  clearWebAppPassport,
  webAppLoginStatus,
  webAppLogout,
} from '@/service/webapp-auth'

I/O Contract

Inputs

Name	Type	Required	Description
token	string	Yes (set functions)	The access token or passport token to store
shareCode	string	Yes (passport functions, login status, logout)	The app share code that identifies the specific shared webapp
userId	string	No	Optional user ID to include in login status check

Outputs

Name	Type	Description
access token	string	The stored access token (empty string if not set)
passport	string	The stored passport token for a share code (empty string if not set)
userLoggedIn	boolean	Whether the user is authenticated at the platform level
appLoggedIn	boolean	Whether the user has app-specific access

Usage Examples

Check Webapp Login Status

import { webAppLoginStatus } from '@/service/webapp-auth'

async function checkAuth(shareCode: string) {
  const { userLoggedIn, appLoggedIn } = await webAppLoginStatus(shareCode)

  if (!userLoggedIn) {
    // Redirect to login page
    window.location.href = '/webapp-signin'
  } else if (!appLoggedIn) {
    // User is logged in but doesn't have app access
    showAccessDenied()
  }
}

Store and Retrieve Tokens

import {
  setWebAppAccessToken,
  setWebAppPassport,
  getWebAppAccessToken,
  getWebAppPassport,
} from '@/service/webapp-auth'

// After successful login
setWebAppAccessToken(response.access_token)
setWebAppPassport(shareCode, response.passport)

// When making API requests (used internally by fetch.ts)
const token = getWebAppAccessToken()
const passport = getWebAppPassport(shareCode)

Logout from Webapp

import { webAppLogout } from '@/service/webapp-auth'

async function handleLogout(shareCode: string) {
  await webAppLogout(shareCode)
  // Tokens cleared from localStorage and server session invalidated
  window.location.href = '/webapp-signin'
}

Related Pages

• Principle:Langgenius_Dify_Authentication_Flow
• Langgenius_Dify_Service_Fetch - Consumes getWebAppAccessToken and getWebAppPassport for request headers
• Langgenius_Dify_Service_Base - Consumes getWebAppPassport for SSE request headers
• Langgenius_Dify_Use_Share - Share hooks that depend on webapp authentication state