{"id":22707298,"url":"https://github.com/tutv/rn-login","last_synced_at":"2026-05-05T07:33:50.431Z","repository":{"id":85524344,"uuid":"142825200","full_name":"tutv/rn-login","owner":"tutv","description":"An example for practicing AsynStorage in React Native","archived":false,"fork":false,"pushed_at":"2018-08-02T04:02:53.000Z","size":295,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-29T20:45:05.718Z","etag":null,"topics":["async-storage","react-native"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tutv.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2018-07-30T04:34:34.000Z","updated_at":"2018-08-02T04:02:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"f36b334c-12da-40d5-965f-4ed4ceedb37a","html_url":"https://github.com/tutv/rn-login","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tutv/rn-login","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutv%2Frn-login","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutv%2Frn-login/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutv%2Frn-login/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutv%2Frn-login/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tutv","download_url":"https://codeload.github.com/tutv/rn-login/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tutv%2Frn-login/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32640535,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"online","status_checked_at":"2026-05-05T02:00:06.033Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["async-storage","react-native"],"created_at":"2024-12-10T10:11:58.570Z","updated_at":"2026-05-05T07:33:50.401Z","avatar_url":"https://github.com/tutv.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sử dụng AsyncStorage để làm trang đăng ký, đăng nhập\n\n## Mục tiêu\n\n- Biết cách sự dụng AsyncStorage để lưu dữ liệu vào local storage.\n- Biết cách sử dụng dữ liệu có cấu trúc (JSON) để quản lý dữ liệu trong Storage.\n\n## Nội dung\n\n- Tạo một ứng dụng cho phép người dùng đăng nhập, đăng ký.\n- Ứng dụng cho phép lưu lại những người dùng đã đăng ký với `username` và `password`.\n\n## Hướng dẫn\n\n- Project sẽ sử dụng `react-navigation` để tạo các tabs trên giao diện và sử dụng `md5` package để mã hóa `password`.\n\nThêm các packages vào project:\n\n```\nnpm i --save react-navigation md5\n```\n\n- Tạo 1 file `StorageServices.js` để tương tác `AysncStorage` với vai trò là 1 services cung cấp các tác vụ `createNewUser` và `getUserByUserName`:\n\n```javascript\nimport {AsyncStorage} from 'react-native'\n\nconst _getKey = (key) =\u003e `cg@users:${key}`\n\nexport const getUserByUserName = username =\u003e {\n    if (!username) {\n        return Promise.reject(new Error('Username is empty'))\n    }\n\n    const key = _getKey(username)\n\n    return AsyncStorage.getItem(key)\n        .then(str =\u003e {\n            if (!str) {\n                throw new Error('User not found')\n            }\n\n            try {\n                return JSON.parse(str)\n            } catch (error) {\n                //Remove data is broken\n                AsyncStorage.removeItem(key)\n\n                throw error\n            }\n        })\n        .catch(error =\u003e {\n            return Promise.resolve(false)\n        })\n}\n\nexport const createNewUser = ({username, name, password}) =\u003e {\n    return getUserByUserName(username)\n        .then(user =\u003e {\n            if (user) {\n                throw new Error('The user already exists')\n            }\n\n            const newUser = {username, name, password}\n            const key = _getKey(username)\n\n            return AsyncStorage.setItem(key, JSON.stringify(newUser))\n        })\n}\n```\n\n- Tạo 1 file `AuthServices.js` để xử lý các tác vụ đăng nhập/đăng ký bằng cách sử dụng `StorageServices`:\n\n```javascript\nimport {createNewUser, getUserByUserName} from \"./StorageServices\"\nimport md5 from 'md5'\n\nconst _hashPassword = password =\u003e {\n    return Promise.resolve(md5(password))\n}\n\nconst _verifyPassword = (password, hash) =\u003e {\n    const hashed = md5(password)\n\n    return Promise.resolve(hashed === hash)\n}\n\nexport const register = ({username, password, name}) =\u003e {\n    if (!password || password.length \u003c 6) {\n        return Promise.reject(new Error('Your password is too short'))\n    }\n\n    return _hashPassword(password)\n        .then(hash =\u003e {\n            const user = {username, password: hash, name}\n\n            return createNewUser(user)\n        })\n}\n\nexport const login = ({username, password}) =\u003e {\n    if (!username) {\n        return Promise.reject(new Error('Please enter your username!'))\n    }\n\n    return getUserByUserName(username)\n        .then(user =\u003e {\n            if (!user) {\n                throw new Error('User is not exits')\n            }\n\n            const passwordHashed = user.password || '';\n\n            return _verifyPassword(password, passwordHashed)\n                .then(success =\u003e {\n                    if (!success) {\n                        throw new Error('Your password is wrong')\n                    }\n\n                    delete user.password\n                    _loginSuccess(user)\n\n                    return user\n                })\n        })\n}\n\nexport const logout = () =\u003e {\n    _store.isAuthenticated = false;\n    _store.user = {}\n\n    _broadcast()\n}\n\nconst _store = {\n    isAuthenticated: false,\n    user: {},\n    subscribers: []\n}\n\nconst _loginSuccess = (user) =\u003e {\n    _store.user = {\n        ...user\n    }\n    _store.isAuthenticated = true\n    _broadcast()\n}\n\nconst _broadcast = () =\u003e {\n    _store.subscribers.forEach(subscriber =\u003e {\n        typeof subscriber === 'function' \u0026\u0026 subscriber(_store.user)\n    })\n}\n\nexport const isAuthenticated = () =\u003e _store.isAuthenticated\n\nexport const getCurrentUser = () =\u003e _store.user\n\nexport const subscribeAuthentication = subscriber =\u003e {\n    if (typeof subscriber !== 'function') return\n    if (_store.subscribers.indexOf(subscriber) !== -1) return\n\n    _store.subscribers = [].concat(_store.subscribers, [subscriber])\n}\n\nexport const unsubscribeAuthentication = subscriber =\u003e {\n    _store.subscribers = _store.subscribers.filter(_sub =\u003e _sub !== subscriber)\n}\n```\n\n- Sử dụng `react-navigation` để tạo 2 tabs là `HomePage` và `LoginPage`. Ở trong 2 screens sẽ sử dụng các functions do `AuthServices` xử lý các tác vụ đăng nhập và đăng ký.\n\n## Mã nguồn\n\nTham khảo tại: https://github.com/tutv/rn-login\n\n## Ảnh demo\n\n![Login](/demo/login.jpeg)\n\n![Login failed](/demo/login-failed.jpeg)\n\n![Home page](/demo/home.jpeg)","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftutv%2Frn-login","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftutv%2Frn-login","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftutv%2Frn-login/lists"}