How to oAuth2 Code Flow using Tanstack Start

#oauth #javascript #typescript #react

I just developed a Tanstack-Start example for an OAuth2 Code-Flow login to github, google and keycloak.

I wanted to login without any library usage to find out the differences of these identity-providers. And there are many small things like params required, getting the token from auth-code has slightly different fetch requirements, e.g. including params in the POST body instead of query-params etc. .

This example code was inspired by (https://www.youtube.com/watch?v=rRn2EisxPl4) but I did not use expressJS because Tanstack has all we need in server-side functions.

(https://tanstack.com/router/latest/docs/framework/react/start/server-functions)

Here is my example:

(https://github.com/progwise/tanstack-auth-examples)

Happy coding!
Michael

For a TanStack-Start solution that uses the keycloakJS library see my other article/example:

(https://dev.to/moncapitaine/tanstack-start-keycloakjs-client-library-4f84)

(https://github.com/progwise/tanstack-start-keycloak)

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more