{"id":19720775,"url":"https://github.com/ngthucdotcom/react-zalo-auth-kit","last_synced_at":"2026-06-14T15:31:54.786Z","repository":{"id":110991256,"uuid":"558498017","full_name":"ngthucdotcom/react-zalo-auth-kit","owner":"ngthucdotcom","description":"React components kit for Zalo Auth","archived":false,"fork":false,"pushed_at":"2022-12-15T02:02:15.000Z","size":5808,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-10T16:13:54.738Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/react-zalo-auth-kit","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ngthucdotcom.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-10-27T17:04:51.000Z","updated_at":"2022-11-11T03:30:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"7be1adc3-9a60-4129-969c-368e4fcc279d","html_url":"https://github.com/ngthucdotcom/react-zalo-auth-kit","commit_stats":null,"previous_names":[],"tags_count":71,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngthucdotcom%2Freact-zalo-auth-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngthucdotcom%2Freact-zalo-auth-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngthucdotcom%2Freact-zalo-auth-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ngthucdotcom%2Freact-zalo-auth-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ngthucdotcom","download_url":"https://codeload.github.com/ngthucdotcom/react-zalo-auth-kit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241040807,"owners_count":19898937,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T23:12:28.043Z","updated_at":"2026-06-14T15:31:49.761Z","avatar_url":"https://github.com/ngthucdotcom.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Zalo Account Kit\n\n## Description\n\n|   Develop   |         Mapped        | User Identity |           Mapped          | Business |\n|:-----------:|:---------------------:|:-------------:|:-------------------------:|:--------:|\n| Zalo App ID |     User ID by App    |    Zalo ID    | Follower ID User ID by OA |   OA ID  |\n|             | User identify for App |               | As a sender or recipient  |          |\n\n## Usage\n\n### 1. Read the [Zalo Developers](https://developers.zalo.me/docs/api/social-api-4) document to understand the principles of the API.\n\n### 2. Register your app and set up the callback URL\n\n2.0. Requires a Zalo account before starting. Sign up\nvia [Zalo App](https://id.zalo.me/account/static/zalo-register.html)\n\n2.1. Register your app: [https://developers.zalo.me/createapp](https://developers.zalo.me/createapp)\n\n2.2. Verify your domain: [https://developers.zalo.me/app/your-app-id/verify-domain](https://developers.zalo.me/app/your-app-id/verify-domain)\n\n2.3. Set up the callback URL: [https://developers.zalo.me/app/your-app-id/login](https://developers.zalo.me/app/your-app-id/login)\n\n2.3.1. Note: turn off the \"Check the secret key when calling API to get the access token\" option if you want to use\nclient side, code challenge and code verifier is required.\n\n2.4. Activate the app: [https://developers.zalo.me/app/your-app-id/settings](https://developers.zalo.me/app/your-app-id/settings)\n\n### 3. Install and import the ZaloAccountKit package\n\n* Install the package\n\n```bash\nnpm i react-zalo-auth-kit\n```\n\n* Import the package\n\n```js\n// the simple method to use a basic kit\nimport {useZaloAuthKit} from \"react-zalo-auth-kit\";\n// create a popup window to get the oauth code\nimport ZaloLoginPopup from \"react-zalo-auth-kit/ZaloLoginPopup\";\n// styled button easy to use\nimport ZaloStyledButton from \"react-zalo-auth-kit/ZaloStyledButton\";\n\nor\n// kit with styled button and basic auth\nimport ZaloLoginButton from \"react-zalo-auth-kit/ZaloLoginButton\";\n```\n\n### 4. Use templates\n\n* Kit for Zalo Auth use Styled Button and Basic Auth\n\n```js\nimport React, {useState} from 'react';\nimport ZaloLoginButton from \"react-zalo-auth-kit/ZaloLoginButton\";\n\nfunction App() {\n\tconst [userInfo, setUserInfo] = useState(null);\n\n\tconst defaultCallback = (credential) =\u003e {\n\t\tconsole.log('defaultCallback', credential);\n\t\tsetUserInfo(credential['user']);\n\t}\n\n\tif (userInfo) {\n\t\treturn (\n\t\t\t\u003cdiv\u003e\n\t\t\t\t\u003ch1\u003eLogin Success\u003c/h1\u003e\n\t\t\t\t\u003cimg src={userInfo.photoURL} alt=\"avatar\"/\u003e\n\t\t\t\t\u003cp\u003e{userInfo.displayName} ({userInfo.uid})\u003c/p\u003e\n\t\t\t\u003c/div\u003e\n\t\t);\n\t}\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch1\u003eLogin Kit\u003c/h1\u003e\n\t\t\t\u003cZaloLoginButton\n\t\t\t\tstate=\"login_kit\"\n\t\t\t\tappId=\"your-app-id\"\n\t\t\t\tcallback={defaultCallback}\n\t\t\t\tpermissions={['id', 'name', 'picture']}\n\t\t\t\tredirectUri={window.location.origin}\n\t\t\t/\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n\nexport default App;\n```\n\n* ZaloStyledButton\n\n```js\nimport React, {useEffect, useState} from 'react';\nimport ZaloStyledButton from \"react-zalo-auth-kit/ZaloStyledButton\";\n\nfunction App() {\n\tconst [isClicked, setIsClicked] = useState(false);\n\n\tuseEffect(() =\u003e {\n\t\tconst toggle = setTimeout(() =\u003e {\n\t\t\tsetIsClicked(false);\n\t\t}, 3000);\n\t\treturn () =\u003e clearTimeout(toggle);\n\t}, [isClicked]);\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch1\u003eStyled Button\u003c/h1\u003e\n\t\t\t\u003cp\u003eAction: {isClicked ? \"Button pressed\" : \"Button unpressed\"}\u003c/p\u003e\n\t\t\t\u003cZaloStyledButton callback={() =\u003e setIsClicked(true)}/\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n\nexport default App;\n```\n\n* Basic Auth without Styled Button\n\n```js\nimport React, {useEffect, useState} from 'react';\nimport {useZaloAuthKit} from \"react-zalo-auth-kit\";\nimport ZaloLoginPopup from \"react-zalo-auth-kit/ZaloLoginPopup\";\n\nfunction App() {\n\tconst ZaloKit = useZaloAuthKit({\n\t\tappId: 'your-app-id',\n\t\tredirectUri: window.location.origin,\n\t\tpermissions: ['id', 'name', 'picture'],\n\t});\n\tconst [codeVerifier, setCodeVerifier] = useState(\"\");\n\tconst [authCodeUrl, setAuthCodeUrl] = useState(\"\");\n\tconst [openPopup, setOpenPopup] = useState(false);\n\tconst [userInfo, setUserInfo] = useState(null);\n\n\tconst handleLogin = () =\u003e {\n\t\tconst [codeVerifier, codeChallenge] = ZaloKit.pkceCode().generate(43);\n\t\tsetAuthCodeUrl(ZaloKit.oauthRequest('basic_auth', codeChallenge));\n\t\tsetCodeVerifier(codeVerifier);\n\t\tsetOpenPopup(true);\n\t};\n\n\tconst handleAuthCode = () =\u003e {\n\t\tsetOpenPopup(false);\n\t};\n\n\tconst handleLoginSuccess = (credential) =\u003e {\n\t\tconsole.log('handleLoginSuccess', credential);\n\t\tsetUserInfo(credential['user']);\n\t};\n\n\twindow.handleSignInWithZalo = (eventEmitter) =\u003e {\n\t\treturn ZaloKit.login(eventEmitter, codeVerifier).then(handleLoginSuccess);\n\t}\n\n\tconst oauthCodeAndAuthProcess = () =\u003e {\n\t\tif (ZaloKit.hasParamsToProcess(window.location.search) \u0026\u0026 window.location.search.includes('basic_auth')) {\n\t\t\twindow.opener.handleSignInWithZalo(window.location.search);\n\t\t\tsetOpenPopup(false);\n\t\t\twindow.close();\n\t\t}\n\t};\n\n\tuseEffect(() =\u003e {\n\t\tconst checkingAuthCode = setInterval(() =\u003e {\n\t\t\toauthCodeAndAuthProcess();\n\t\t}, 1000);\n\t\treturn () =\u003e clearInterval(checkingAuthCode);\n\t})\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch1\u003eBasic Auth\u003c/h1\u003e\n\t\t\t{\n\t\t\t\tuserInfo \u0026\u0026 \u003cdiv\u003e\n\t\t\t\t\t\u003cimg src={userInfo.photoURL} alt=\"avatar\"/\u003e\n\t\t\t\t\t\u003cp\u003e{userInfo.displayName} ({userInfo.uid})\u003c/p\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t}\n\t\t\t\u003cbutton onClick={handleLogin}\u003eLogin\u003c/button\u003e\n\t\t\t\u003cZaloLoginPopup open={openPopup} requestUrl={authCodeUrl} onClose={handleAuthCode}/\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n\nexport default App;\n```\n\n* Basic Auth with Styled Button\n\n```js\nimport React, {useEffect, useState} from 'react';\nimport {useZaloAuthKit} from \"react-zalo-auth-kit\";\nimport ZaloLoginPopup from \"react-zalo-auth-kit/ZaloLoginPopup\";\nimport ZaloStyledButton from \"react-zalo-auth-kit/ZaloStyledButton\";\n\nfunction App() {\n\tconst ZaloKit = useZaloAuthKit({\n\t\tappId: 'your-app-id',\n\t\tredirectUri: window.location.origin,\n\t\tpermissions: ['id', 'name', 'picture'],\n\t});\n\tconst [codeVerifier, setCodeVerifier] = useState(\"\");\n\tconst [authCodeUrl, setAuthCodeUrl] = useState('');\n\tconst [openPopup, setOpenPopup] = useState(false);\n\tconst [userInfo, setUserInfo] = useState(null);\n\n\tconst handleLogin = () =\u003e {\n\t\tconst [codeVerifier, codeChallenge] = ZaloKit.pkceCode().generate(43);\n\t\tsetAuthCodeUrl(ZaloKit.oauthRequest('styled_auth', codeChallenge));\n\t\tsetCodeVerifier(codeVerifier);\n\t\tsetOpenPopup(true);\n\t};\n\n\tconst handleAuthCode = () =\u003e {\n\t\tsetOpenPopup(false);\n\t};\n\n\tconst handleLoginSuccess = (credential) =\u003e {\n\t\tconsole.log('handleLoginSuccess', credential);\n\t\tsetUserInfo(credential['user']);\n\t};\n\n\twindow.handleSignInWithZaloUseStyledButton = (eventEmitter) =\u003e {\n\t\treturn ZaloKit.login(eventEmitter, codeVerifier).then(handleLoginSuccess);\n\t}\n\n\tconst oauthCodeAndAuthProcess = () =\u003e {\n\t\tif (ZaloKit.hasParamsToProcess(window.location.search) \u0026\u0026 window.location.search.includes('styled_auth')) {\n\t\t\twindow.opener.handleSignInWithZaloUseStyledButton(window.location.search);\n\t\t\tsetOpenPopup(false);\n\t\t\twindow.close();\n\t\t}\n\t};\n\n\tuseEffect(() =\u003e {\n\t\tconst checkingAuthCode = setInterval(() =\u003e {\n\t\t\toauthCodeAndAuthProcess();\n\t\t}, 1000);\n\t\treturn () =\u003e clearInterval(checkingAuthCode);\n\t})\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003ch1\u003eStyled Auth\u003c/h1\u003e\n\t\t\t{\n\t\t\t\tuserInfo \u0026\u0026 \u003cdiv\u003e\n\t\t\t\t\t\u003cimg src={userInfo.photoURL} alt=\"avatar\"/\u003e\n\t\t\t\t\t\u003cp\u003e{userInfo.displayName} ({userInfo.uid})\u003c/p\u003e\n\t\t\t\t\u003c/div\u003e\n\t\t\t}\n\t\t\t\u003cZaloStyledButton callback={handleLogin}/\u003e\n\t\t\t\u003cZaloLoginPopup open={openPopup} requestUrl={authCodeUrl} onClose={handleAuthCode}/\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n\nexport default App;\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngthucdotcom%2Freact-zalo-auth-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fngthucdotcom%2Freact-zalo-auth-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fngthucdotcom%2Freact-zalo-auth-kit/lists"}