{"id":20974200,"url":"https://github.com/thirdweb-example/thirdweb-auth-express","last_synced_at":"2025-04-12T01:35:48.898Z","repository":{"id":237361612,"uuid":"794358028","full_name":"thirdweb-example/thirdweb-auth-express","owner":"thirdweb-example","description":"Enable wallet-based login with thirdweb Auth \u0026 Express","archived":false,"fork":false,"pushed_at":"2024-05-27T04:56:23.000Z","size":480,"stargazers_count":10,"open_issues_count":0,"forks_count":7,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-25T21:15:53.302Z","etag":null,"topics":["auth","expressjs","react","siwe","siwe-auth","web3"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thirdweb-example.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2024-05-01T01:07:57.000Z","updated_at":"2024-11-22T06:38:48.000Z","dependencies_parsed_at":null,"dependency_job_id":"387996aa-979c-4dc8-9907-2aa9f1ee4e87","html_url":"https://github.com/thirdweb-example/thirdweb-auth-express","commit_stats":null,"previous_names":["thirdweb-example/thirdweb-auth-express"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fthirdweb-auth-express","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fthirdweb-auth-express/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fthirdweb-auth-express/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thirdweb-example%2Fthirdweb-auth-express/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thirdweb-example","download_url":"https://codeload.github.com/thirdweb-example/thirdweb-auth-express/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248504735,"owners_count":21115200,"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":["auth","expressjs","react","siwe","siwe-auth","web3"],"created_at":"2024-11-19T04:27:13.084Z","updated_at":"2025-04-12T01:35:48.877Z","avatar_url":"https://github.com/thirdweb-example.png","language":"TypeScript","readme":"![Group 1](https://github.com/thirdweb-example/thirdweb-auth-express/assets/17715009/06383e68-9c65-4265-8505-e88e573443f9)\n\n# React + Express Auth Starter Template\n\n[\u003cimg alt=\"thirdweb SDK\" src=\"https://img.shields.io/npm/v/thirdweb?label=Thirdweb SDK\u0026style=for-the-badge\u0026logo=npm\" height=\"30\"\u003e](https://www.npmjs.com/package/thirdweb)\n[\u003cimg alt=\"Discord\" src=\"https://img.shields.io/discord/834227967404146718.svg?color=7289da\u0026label=discord\u0026logo=discord\u0026style=for-the-badge\" height=\"30\"\u003e](https://discord.gg/thirdweb)\n\nThe template is a standard monorepo separated into a client and a server. The client is a React app using Vite and the server is an Express app. Both the server and client use TypeScript and Bun (can be substituted for npm, yarn, or pnpm).\n\nThe client uses thirdweb's Auth SDK to communicate with the server via your own routes. When a user is authenticated, the server returns a JWT which the client can cache for future requests. Thirdweb's Auth SDK takes care of the difficult pieces like payload generation and signing while allowing you to control how authentication happens between your backend and frontend.\n\n## Getting Started\n\n\u003e Note, all commands can be substituted with npm, yarn, or pnpm if preferred.\n\nFirst, install dependencies on both the client and server:\n\n```bash\ncd client \u0026\u0026 bun install\ncd server \u0026\u0026 bun install\n```\n\n### Environment variables\n\nCopy the `.env.example` files to `.env`:\n\n```bash\ncp client/.env.example client/.env\ncp server/.env.example server/.env\n```\n\nIn each `.env` file, complete any necessary values. There are comments in each `.env.example` file explaining what each value does.\n\n### Running the app\n\nThen, run the client and server in development mode:\n\n```bash\ncd client \u0026\u0026 bun run dev\ncd server \u0026\u0026 bun run dev\n```\n\nOr from the root directory:\n\n```bash\nbun run client\nbun run server\n```\n\n## How it works\n\nAll authentication logic happens in just two files: one in the client, and one on the server.\n\nOn the client, `ConnectButtonAuth.tsx` uses the thirdweb `ConnectButton` to specify the `auth` object, which contains the callbacks to manage all auth requests your application makes. This same process can be done with your own custom components using the underlying functions in `thirdweb/auth`. The connect button is a template for the four functions every application's auth needs to implement:\n\n-   `isLoggedIn` checks whether or not the current user is logged in, the criteria for this is up to you but the default uses a JWT in local cookie storage\n-   `getLoginPayload` retrieves the message to sign for login from the server. The function to generate this payload is provided for you in the SDK, you simply need to send it to the server\n-   `doLogin` attempts to log the user with a signed payload. Normally, this involves sending the payload to your Express server.\n-   `doLogout` logs the user out. This function is entirely up to you and is based on how you handle authentication. In this app for example, it clears the local storage.\n\n\u003e Note: All complex logic such as generating and signing payloads, caching and invalidating state, and more is handled for you by the SDK. Even if you're using your own components, thirdweb provides the underlying functions to execute these steps. Check out our documentation to learn more.\n\nOn the server, `server.ts` handles all routes for the app. The SDK provides a number of useful functions to keep your backend routes as simple as possible:\n\n-   `generatePayload` generates a login payload for a given user address. This is the message the user's accont signs on the client and returns to the server for verification.\n-   `verifyPayload` verifies the user's signed payload to either log them in, or reject the attempt.\n-   `generateJWT` won't always be needed, but is a helpful function to generate a JWT for the user to use as in cookies or client-side storage to cache the user's session\n-   `verifyJWT` checks if a given JWT is valid when authenticating requests.\n\n## Documentation\n\n-   [TypeScript SDK](https://portal.thirdweb.com/typescript/v5)\n-   [Sign in with Ethereum Spec](https://eips.ethereum.org/EIPS/eip-4361)\n-   [Express Docs](https://expressjs.com/)\n\n## Support\n\nFor help or feedback, please [visit our support site](https://thirdweb.com/support)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fthirdweb-auth-express","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthirdweb-example%2Fthirdweb-auth-express","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthirdweb-example%2Fthirdweb-auth-express/lists"}