Registry / devops / react-zalo-auth-kit

react-zalo-auth-kit

library1.0.70jsnpmunverified

A React component library for integrating Zalo OAuth 2.0 authentication using PKCE flow (v1.0.70). It provides pre-built components like ZaloLoginButton, ZaloStyledButton, and ZaloLoginPopup along with a useZaloAuthKit hook. Release cadence is irregular; latest version 1.0.70. Key differentiator: it's the only dedicated React package for Zalo social login (popular in Vietnam), handling PKCE code challenge/verifier client-side. Requires firebase for storing user data and react-new-window for popup. Minimal documentation.

devops

npm install react-zalo-auth-kit

package ↗

INSTALL

IMPORT

SIG · REACT-ZALO-AUTH-KI

react-zalo-auth-kit

devopsjavascriptv1.0.70

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

useZaloAuthKit

✓ import { useZaloAuthKit } from 'react-zalo-auth-kit'

✗ import useZaloAuthKit from 'react-zalo-auth-kit'

Named export, not default.

ZaloLoginPopup

✓ import ZaloLoginPopup from 'react-zalo-auth-kit/ZaloLoginPopup'

✗ import { ZaloLoginPopup } from 'react-zalo-auth-kit'

Component is a separate default export from its own subpath; the main package does not re-export it.

ZaloStyledButton

✓ import ZaloStyledButton from 'react-zalo-auth-kit/ZaloStyledButton'

✗ import { ZaloStyledButton } from 'react-zalo-auth-kit'

Similar to ZaloLoginPopup; must import from subpath.

ZaloLoginButton

✓ import ZaloLoginButton from 'react-zalo-auth-kit/ZaloLoginButton'

✗ import { ZaloLoginButton } from 'react-zalo-auth-kit'

Composite component; import from subpath as default.

Setup Zalo login with pre-built button, handling success callback and user info display.

import React, { useState } from 'react'; import ZaloLoginButton from 'react-zalo-auth-kit/ZaloLoginButton'; function App() { const [userInfo, setUserInfo] = useState(null); const onSuccess = (credential) => { console.log('Login success', credential); setUserInfo(credential.user); }; if (userInfo) { return ( <div> <h1>Welcome, {userInfo.displayName}</h1> <img src={userInfo.photoURL} alt="avatar" width={64} /> <p>UID: {userInfo.uid}</p> </div> ); } return ( <div> <ZaloLoginButton state="login_kit" appId={process.env.ZALO_APP_ID ?? ''} callback={onSuccess} permissions={['id', 'name', 'picture']} redirectUri={window.location.origin} /> </div> ); } export default App;

Debug

Known issues

breakingThe package uses firebase as a peer dependency, requiring developers to configure Firebase for storing user credentials. Without a valid Firebase project, logins will fail.

fix

Set up a Firebase app and provide the Firebase config via environment variables or context. Alternatively, modify the callback to handle credentials without Firebase.

affects: >=0.0.0

breakingZalo OAuth requires a callback URL (redirect URI) that exactly matches the one registered with Zalo Developers, including the domain verification step. Mismatch causes 'invalid redirect_uri' errors.

fix

Verify the domain on Zalo Developers portal and ensure redirectUri prop matches the registered callback URL (e.g., https://yourapp.com).

affects: >=0.0.0

gotchaZaloLoginPopup and ZaloStyledButton are not exported from the main package. Developers mistakenly import { ZaloLoginPopup } from 'react-zalo-auth-kit' resulting in undefined.

fix

Import them via subpaths: import ZaloLoginPopup from 'react-zalo-auth-kit/ZaloLoginPopup'; import ZaloStyledButton from 'react-zalo-auth-kit/ZaloStyledButton'.

affects: >=0.0.0

deprecatedThe hook useZaloAuthKit and components ZaloLoginPopup, ZaloStyledButton, ZaloLoginButton rely on peer dependency 'firebase' (v9.14.0). Firebase v9+ uses modular SDK, but peer deps specify exactly 9.14.0, which may conflict with newer versions.

fix

Install firebase@9.14.0 explicitly. If using firebase v10+, the package may break; consider forking or using an older firebase.

affects: >=0.0.0

gotchaThe package requires PKCE challenge to be generated client-side. If the Zalo app has 'Check the secret key when calling API to get the access token' enabled, PKCE will fail.

fix

In Zalo Developers settings, turn OFF the option: 'Check the secret key when calling API to get the access token' for client-side PKCE to work.

affects: >=0.0.0

Errors

Common errors & fixes

Module not found: Can't resolve 'react-zalo-auth-kit/ZaloLoginPopup'

Import path is incorrect or package not installed.

fix

Make sure package is installed: npm install react-zalo-auth-kit. Then import using the exact subpath: import ZaloLoginPopup from 'react-zalo-auth-kit/ZaloLoginPopup'.

Uncaught TypeError: (0 , _reactZaloAuthKit.useZaloAuthKit) is not a function

Default import used instead of named import for the hook.

fix

Change import to: import { useZaloAuthKit } from 'react-zalo-auth-kit'

FirebaseError: Firebase: No Firebase App '[DEFAULT]' has been created - call Firebase App.initializeApp() (app/no-app)

Firebase is not initialized before using the kit.

fix

Initialize Firebase in your app before using any component: import { initializeApp } from 'firebase/app'; initializeApp({ apiKey: '...', ... });

Upgrade

Version history

1.0.70latest on npm

Audit

Dependencies

reactrequiredPeer dependency; required for React components and hooks

firebaserequiredUsed for storing and retrieving authenticated user data

pkce-challengerequiredGenerates PKCE code verifier and challenge

react-new-windowrequiredOpens Zalo OAuth login page in a popup window

Agent activity

4 hits · last 30 days

node

Resources

packagereact-zalo-auth-kit ↗