chore(examples): add authenticated-routes example using firebase #3669
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
|
A MAJOR requirement is to setup your .env.local with the following variables for Firebase. VITE_PUBLIC_FIREBASE_API_KEY= |
|
Update - I realized Zustand wasn't actually necessary. Resolved to remove zustand dependency! |
|
View your CI Pipeline Execution ↗ for commit e495d04.
☁️ Nx Cloud last updated this comment at |
SeanCassiere
reviewed
Mar 6, 2025
examples/react/authenticated-routes-firebase/src/routes/login.tsx
Outdated
Show resolved
Hide resolved
More templates
@tanstack/arktype-adapter
@tanstack/create-router
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/create-start
@tanstack/history
@tanstack/react-router
@tanstack/react-router-with-query
@tanstack/react-start
@tanstack/react-start-api-routes
@tanstack/react-start-client
@tanstack/react-start-config
@tanstack/react-start-plugin
@tanstack/react-start-router-manifest
@tanstack/react-start-server
@tanstack/react-start-server-functions-client
@tanstack/react-start-server-functions-fetcher
@tanstack/react-start-server-functions-handler
@tanstack/react-start-server-functions-ssr
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-start
@tanstack/solid-start-api-routes
@tanstack/solid-start-client
@tanstack/solid-start-config
@tanstack/solid-start-plugin
@tanstack/solid-start-router-manifest
@tanstack/solid-start-server
@tanstack/solid-start-server-functions-client
@tanstack/solid-start-server-functions-fetcher
@tanstack/solid-start-server-functions-handler
@tanstack/solid-start-server-functions-ssr
@tanstack/start-config
@tanstack/start
@tanstack/start-server-functions-server
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
|
Looking at the test failure, it looks like you might want to add a /// <reference types="vite/client" />
interface ImportMetaEnv {
readonly VITE_CUSTOM_ENV_VARIABLE: string
}
interface ImportMeta {
readonly env: ImportMetaEnv
} |
…login, removed lucide-react package
SeanCassiere
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I struggled greatly getting firebase client-side authentication to play nicely inside TSR. This is a quick example on setting up your project. In this example, I'm using firebase oauth with Github. :) For this example you work you MUST create a firebase project and setup github oauth.
I personally prefer using the directory format below for organizational reasons, but I left it flat to align with other demos.
_auth/
protected-route-1 (dashboard)
(public)/
login.tsx
other public routes like signup
Due to conflicts with AuthProvider being a type in firebase, I've updated the context to "AuthContextProvider" in this example
The index.tsx in this example is a great place to host your sales/landing page... if a user is logged in and attempts to hit the root index, they'll get routed back to /dashboard, otherwise they can directly route to index OR the /login page.