{"id":26047667,"url":"https://github.com/madhavpatel1810/react_node_x-auth-integration","last_synced_at":"2026-04-12T00:03:43.688Z","repository":{"id":277490358,"uuid":"932582495","full_name":"MadhavPatel1810/react_node_x-auth-integration","owner":"MadhavPatel1810","description":"This project showcases Twitter (X) login using OAuth 2.0 with a React (Vite) frontend and a Node.js (Express) backend, displaying user profile details after authentication.","archived":false,"fork":false,"pushed_at":"2025-02-25T13:18:12.000Z","size":290,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"frontend/reactjs","last_synced_at":"2025-03-14T23:43:37.711Z","etag":null,"topics":["express-js","nodejs","reactjs","twitter-api","xapi","xauth"],"latest_commit_sha":null,"homepage":"https://react-node-x-auth-integration.vercel.app","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/MadhavPatel1810.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,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-02-14T06:31:23.000Z","updated_at":"2025-03-07T17:52:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"d5405c2a-3929-4a35-94ae-2b30be43b145","html_url":"https://github.com/MadhavPatel1810/react_node_x-auth-integration","commit_stats":null,"previous_names":["madhavpatel1810/react_node_x-auth-integration"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/MadhavPatel1810/react_node_x-auth-integration","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MadhavPatel1810%2Freact_node_x-auth-integration","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MadhavPatel1810%2Freact_node_x-auth-integration/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MadhavPatel1810%2Freact_node_x-auth-integration/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MadhavPatel1810%2Freact_node_x-auth-integration/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MadhavPatel1810","download_url":"https://codeload.github.com/MadhavPatel1810/react_node_x-auth-integration/tar.gz/refs/heads/frontend/reactjs","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MadhavPatel1810%2Freact_node_x-auth-integration/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279003277,"owners_count":26083555,"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","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"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":["express-js","nodejs","reactjs","twitter-api","xapi","xauth"],"created_at":"2025-03-07T23:12:50.146Z","updated_at":"2025-10-10T08:36:02.339Z","avatar_url":"https://github.com/MadhavPatel1810.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react_node_x-auth-integration\n\n# Twitter (X) Login Integration\n\nThis project demonstrates how to implement **Twitter (now X) login** using **X Auth (OAuth 1.0a)** in a **React.js (Vite)** frontend and a **Node.js (Express)** backend. After logging in, the user's profile information (name, profile image, username, and ID) is displayed on the **My Profile** page.\n\n---\n\n## Features\n- **Frontend**:\n  - Sign in with X button.\n  - Redirect to X Auth for authentication.\n  - Display logged-in user information (profile image, name, username, and ID).\n- **Backend**:\n  - Handle X OAuth 1.0a token requests.\n  - Implement login flow via request token, user redirection, and access token exchange.\n  - Fetch user information using the X API.\n\n---\n\n## Authentication Flow (OAuth 1.0a)\n### Step 1: Obtaining a Request Token\n- Your X app must send a signed request to `POST oauth/request_token`.\n- The request includes `oauth_callback`, which is the URL-encoded redirect URL where the user will be sent after authentication.\n- Other parameters are handled by the OAuth signing process.\n\n### Step 2: Redirecting the User\n- Redirect the user to `GET oauth/authenticate` with the request token obtained in Step 1.\n- The website should issue an HTTP 302 redirect, while mobile/desktop apps should open the URL in a browser or embedded web view.\n\n### Step 3: Converting the Request Token to an Access Token\n- Exchange the request token for an access token via `POST oauth/access_token`.\n- This request must include the `oauth_verifier` obtained from Step 2.\n- The request token should be passed in the `oauth_token` header.\n\n---\n\n## Technologies Used\n- **Frontend**:\n  - React.js (Vite)\n  - Axios (for API calls)\n  - React Router (for routing)\n  - SCSS (optional, for styling)\n- **Backend**:\n  - Node.js\n  - Express.js\n  - OAuth 1.0a (X API Authentication)\n  - CORS (for cross-origin requests)\n\n---\n\n## Packages Used\n### Frontend\n- `react`: ^18.2.0\n- `react-dom`: ^18.2.0\n- `vite`: ^5.0.8\n- `axios`: ^1.7.9\n- `react-router-dom`: ^6.21.1\n\n### Backend\n- `express`: ^4.21.2\n- `cors`: ^2.8.5\n- `oauth-1.0a`: ^2.2.6\n- `dotenv`: ^16.4.7 (for environment variables)\n\n---\n\n## References\n- [X OAuth 1.0a Documentation](https://developer.twitter.com/en/docs/authentication/oauth-1-0a)\n- [React.js Documentation](https://react.dev/)\n- [Vite Documentation](https://vitejs.dev/)\n- [Express.js Documentation](https://expressjs.com/)\n- [Axios Documentation](https://axios-http.com/)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadhavpatel1810%2Freact_node_x-auth-integration","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmadhavpatel1810%2Freact_node_x-auth-integration","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmadhavpatel1810%2Freact_node_x-auth-integration/lists"}