{"id":21566810,"url":"https://github.com/sydinh/auth-approach","last_synced_at":"2026-03-02T14:39:18.036Z","repository":{"id":114653127,"uuid":"126833176","full_name":"sydinh/auth-approach","owner":"sydinh","description":null,"archived":false,"fork":false,"pushed_at":"2018-03-26T14:01:40.000Z","size":1,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-04T04:33:15.530Z","etag":null,"topics":["approach","authentication","my-repo"],"latest_commit_sha":null,"homepage":"","language":null,"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/sydinh.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-03-26T13:29:01.000Z","updated_at":"2020-09-04T03:29:46.000Z","dependencies_parsed_at":null,"dependency_job_id":"d3f00126-028b-448b-a596-6f864b83a685","html_url":"https://github.com/sydinh/auth-approach","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/sydinh/auth-approach","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sydinh%2Fauth-approach","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sydinh%2Fauth-approach/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sydinh%2Fauth-approach/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sydinh%2Fauth-approach/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sydinh","download_url":"https://codeload.github.com/sydinh/auth-approach/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sydinh%2Fauth-approach/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30006765,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-02T14:08:50.421Z","status":"ssl_error","status_checked_at":"2026-03-02T14:08:50.037Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["approach","authentication","my-repo"],"created_at":"2024-11-24T10:28:16.554Z","updated_at":"2026-03-02T14:39:18.009Z","avatar_url":"https://github.com/sydinh.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-auth\n\u003e An approach for authenticating users\n\n## 1. src/index.js\n```Javascript\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport App from './App';\n\nReactDOM.render(\u003cApp /\u003e, document.getElementById('root'))\n```\n\n## 2. src/App.js\n```Javascript\nimport React, { Component } from \"react\";\nimport axios from \"axios\";\n\nclass App extends Component {\n  state = {\n    user: null\n  };\n\n  componentDidMount() {\n    // When the app loads, try and get the current user\n  }\n\n  setUser = user =\u003e {\n    // Set the current user into state.\n  };\n\n  getCurrentUser = () =\u003e {\n    // 1. Try and retrieve the user's token\n    // 2. If they have a token, make a request to /user/current for their user details\n    // 3. Pass the token as an Authorization Header\n    // 4. If a successful response returns, store the user in state.\n  };\n  render() {\n    // 1. Add React-Router to control what view the user sees\n    // 2. If there is an active user in state, send them to the dashboard.\n    // 3. If there's no user, send them to the login screen.\n    // 4. If a logged in user tries to hit the login screen, redirect them to the dashboard.\n    return (\n      \u003cdiv className=\"App\"\u003e\n        \u003ch1\u003eAuthentication App\u003c/h1\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default App;\n```\n\n## 3. src/services/tokenService.js\n```Javascript\nexport const setToken = token =\u003e {\n  // set an item in local storage called \"token\" and set it equal to any value we pass to it\n};\n\nexport const getToken = () =\u003e {\n  // retrieve our token from local storage\n};\n\nexport const removeToken = () =\u003e {\n  // remove our token from local storage\n};\n```\n\n## 4. src/components/Dashboard.js\n```Javascript\nimport React from \"react\";\nimport axios from \"axios\";\nimport { getToken } from \"../services/tokenService\";\n\nclass Dashboard extends React.Component {\n  state = {\n    todo: \"\",\n    todos: []\n  };\n\n  handleChange = e =\u003e {\n    this.setState({\n      [e.target.name]: e.target.value\n    });\n  };\n\n  componentDidMount() {\n    // 1. When the dashboard loads, get the user's token\n    // 2. Send a GET request to /todo and pass the token to grab a list of ONLY this user's todos\n    // 3. If we get a successful response, store the todos in state.\n  }\n\n  handleSubmit = e =\u003e {\n    e.preventDefault();\n    const { todo } = this.state;\n\n    // 1. Get the user's token\n    // 2. Send a POST to /todo with\n    //  a - the body containing the TODO we wish to post\n    //  b - the Authorization Header Bearer \u003ctoken\u003e\n  };\n\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003ch1\u003eDashboard\u003c/h1\u003e\n        \u003cform onSubmit={this.handleSubmit}\u003e\n          \u003cinput name=\"todo\" type=\"text\" onChange={this.handleChange} /\u003e\n          \u003cbutton\u003eAdd Todo\u003c/button\u003e\n        \u003c/form\u003e\n        \u003cul\u003e\n          {this.state.todos.map(todo =\u003e {\n            return \u003cli\u003e{JSON.stringify(todo, null, 3)}\u003c/li\u003e;\n          })}\n        \u003c/ul\u003e\n        \u003cbutton\u003eLogout\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nexport default Dashboard;\n```\n\n## 5. src/components/Login.js\n```Javascript\nimport React, { Component } from \"react\";\nimport axios from \"axios\";\nimport { setToken } from \"../services/tokenService\";\n\nclass Login extends Component {\n  state = {\n    email: \"\",\n    password: \"\"\n  };\n\n  handleChange = e =\u003e {\n    this.setState({ [e.target.name]: e.target.value });\n  };\n\n  handleSubmit = e =\u003e {\n    e.preventDefault();\n    const { email, password } = this.state;\n    // 1. POST to /auth/login, passing in the email and password in the body\n    // 2. If we receive a successful response:\n    //  - grab the token from the response\n    //  - store it in local storage\n    //  - call getCurrentUser\n  };\n  render() {\n    return (\n      \u003cform onSubmit={this.handleSubmit}\u003e\n        \u003cdiv\u003e\n          \u003clabel htmlFor=\"login-email\"\u003eEmail: \u003c/label\u003e\n          \u003cinput\n            type=\"email\"\n            onChange={this.handleChange}\n            name=\"email\"\n            id=\"login-email\"\n            placeholder=\"email\"\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          \u003clabel htmlFor=\"login-password\"\u003ePassword: \u003c/label\u003e\n          \u003cinput\n            type=\"password\"\n            onChange={this.handleChange}\n            name=\"password\"\n            id=\"login-password\"\n            placeholder=\"Enter your desired password\"\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          \u003cinput type=\"submit\" value=\"Log In\" /\u003e\n        \u003c/div\u003e\n      \u003c/form\u003e\n    );\n  }\n}\n\nexport default Login;\n```\n## 6. src/components/Logout.js\n```Javascript\nimport React from \"react\";\nimport { removeToken } from \"../services/tokenService\";\n\nconst Logout = props =\u003e {\n  const logout = () =\u003e {\n    // 1. Remove the user's token from local storage.\n    // 2. Set the user in state to be equal to null.\n  };\n  return \u003cbutton onClick={logout}\u003eLogout\u003c/button\u003e;\n};\n\nexport default Logout;\n```\n## 7. src/components/Signup.js\n```Javascript\nimport React, { Component } from \"react\";\n\nclass Signup extends Component {\n  state = {\n    email: \"\",\n    password: \"\"\n  };\n\n  handleChange = e =\u003e {\n    this.setState({ [e.target.name]: e.target.value });\n  };\n\n  handleSubmit = e =\u003e {\n    e.preventDefault();\n    console.log(\"submitted!\");\n  };\n\n  render() {\n    return (\n      \u003cform onSubmit={this.handleSubmit}\u003e\n        \u003cdiv\u003e\n          \u003clabel htmlFor=\"email\"\u003eEmail: \u003c/label\u003e\n          \u003cinput\n            type=\"email\"\n            onChange={this.handleChange}\n            name=\"email\"\n            id=\"email\"\n            placeholder=\"email\"\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          \u003clabel htmlFor=\"email\"\u003ePassword: \u003c/label\u003e\n          \u003cinput\n            type=\"password\"\n            onChange={this.handleChange}\n            name=\"password\"\n            id=\"password\"\n            placeholder=\"Enter your desired password\"\n          /\u003e\n        \u003c/div\u003e\n        \u003cdiv\u003e\n          \u003cinput type=\"submit\" value=\"Signup\" /\u003e\n        \u003c/div\u003e\n      \u003c/form\u003e\n    );\n  }\n}\n\nexport default Signup;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsydinh%2Fauth-approach","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsydinh%2Fauth-approach","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsydinh%2Fauth-approach/lists"}