From 831e7e8dc40a69b482951011e4d754d61eb51e74 Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Thu, 11 Apr 2024 12:26:45 -0400 Subject: [PATCH 1/6] DOCS-6094 update users overview (#892) --- docs/users/overview.mdx | 24 ++++++++++++++++-------- 1 file changed, 16 insertions(+), 8 deletions(-) diff --git a/docs/users/overview.mdx b/docs/users/overview.mdx index 52ef405e7e..9d248b6d94 100644 --- a/docs/users/overview.mdx +++ b/docs/users/overview.mdx @@ -5,22 +5,30 @@ description: Learn how to manage your users in your Clerk application. # Users -Clerk provides the prebuilt components [``](/docs/components/user/user-button) and [``](/docs/components/user/user-profile) in order to help your users manage their profile data. However, if you would like to manage user authentication and profile data yourself, or if you would like to build your own profile management flow, Clerk provides a set of APIs to help you do that. +Depending on your need, Clerk provides a set of tools to manage your users. You can manage user information [in the frontend](#manage-user-information-in-the-frontend) using Clerk's prebuilt components, React hooks, or JavaScript methods, or [in the backend](#manage-user-information-in-the-backend) using the Clerk Backend SDK. -## `User` object +## Understand the `User` object -The `User` object holds all of the information for a single user of your application and provides a set of methods to manage their account. Each user has a unique authentication identifier which might be their email address, phone number, or a username. +[The `User` object](/docs/references/javascript/user/user) holds all of the information for a single user of your application and provides a set of methods to manage their account. -A user can be contacted at their primary email address or primary phone number. They can have more than one registered email address, but only one of them will be their primary email address. This goes for phone numbers as well; a user can have more than one, but only one phone number will be their primary. At the same time, a user can also have one or more external accounts by connecting to [OAuth providers](/docs/authentication/social-connections/overview) such as Google, Apple, Facebook, and many more. +A `User` object holds profile data like the user's name, profile picture, and a set of [metadata](/docs/users/metadata) that can be used internally to store arbitrary information. The metadata are split into `publicMetadata` and `privateMetadata`. Both types are set from the [Backend API](https://clerk.com/docs/reference/backend-api), but public metadata can be accessed from the [Frontend API](https://clerk.com/docs/reference/frontend-api) as well. -Finally, a `User` object holds profile data like the user's name, profile picture, and a set of [metadata](/docs/users/metadata) that can be used internally to store arbitrary information. The metadata are split into `publicMetadata` and `privateMetadata`. Both types are set from the [Backend API](https://clerk.com/docs/reference/backend-api), but public metadata can be accessed from the [Frontend API](https://clerk.com/docs/reference/frontend-api) as well. +Each `User` has at least one authentication [identifier](/docs/authentication/configuration/sign-up-sign-in-options#identifiers), which might be their email address, phone number, or a username. + +A user can be contacted at their primary email address or primary phone number. They can have more than one verified email address, but only one of them will be their primary email address. This goes for phone numbers as well; a user can have more than one, but only one phone number will be their primary. At the same time, a user can also have one or more external accounts by connecting to [OAuth providers](/docs/authentication/social-connections/overview) such as Google, Apple, Facebook, and many more. For more information on the `User` object, such as helper methods for retrieving and updating user information and authentication status, checkout the [ClerkJS SDK documentation](/docs/references/javascript/user/user). +## Manage user information in the frontend + +Clerk provides the prebuilt components [``](/docs/components/user/user-button) and [``](/docs/components/user/user-profile) in order to help your users manage their profile data. + If you are using React, the [React SDK](/docs/references/react/use-user) provides hooks to help manage user authentication and profile data. -## `User` operations +If Clerk's prebuilt components don't meet your specific needs or if you require more control over the logic, you can use React hooks and JavaScript methods to [rebuild existing Clerk flows.](https://clerk.com/docs/custom-flows/overview) + +## Manage user information in the backend -The [Clerk Backend SDK](https://github.com/clerk/javascript/tree/main/packages/backend) exposes Clerk's backend API resources and low-level authentication utilities for JavaScript environments. While the backend SDK is mainly used as a building block for Clerk's higher-level SDKs, it can also be used on its own for advanced flows and custom integrations. +The [Clerk Backend SDK](/docs/references/backend/overview) exposes Clerk's backend API resources and low-level authentication utilities for JavaScript environments. -For information about the `User` operations available, such as `getUser()`, `createUser()`, and `deleteUser()`, check out the [Backend SDK documentation](/docs/references/backend/overview). \ No newline at end of file +For information about the `User` operations available, such as `getUser()`, `createUser()`, and `deleteUser()`, check out the [Backend SDK reference docs](/docs/references/backend/overview). From 455eb64dd62fe4ee91cd256aea062f3e2feed476 Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Thu, 11 Apr 2024 12:26:56 -0400 Subject: [PATCH 2/6] DOCS-6079 fix paths for /sign-in and /sign-up when used with React Router (#893) --- docs/references/react/add-react-router.mdx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/docs/references/react/add-react-router.mdx b/docs/references/react/add-react-router.mdx index e6dc4b39de..4fe9c95121 100644 --- a/docs/references/react/add-react-router.mdx +++ b/docs/references/react/add-react-router.mdx @@ -3,13 +3,13 @@ title: Add React Router to your Clerk-powered React application description: Learn how to add React Router to your React application using their Data API router. --- - ); } -``` +``` ```tsx filename="src/routes/dashboard.invoices.tsx" import { Link } from "react-router-dom"; @@ -172,7 +172,7 @@ if (!PUBLISHABLE_KEY) { export default function RootLayout() { const navigate = useNavigate(); - + return (
@@ -231,9 +231,9 @@ export default function DashboardLayout() { With all the routes and layouts you need created, you now need to wire up the layouts and the routes with the `createBrowserRouter` function from `react-router-dom`. This will use the Data API (aka Data Router) to configure your application. -You can start by removing `src/App.tsx`—the contents of that file were moved to `src/layouts/root-layout.tsx`. +You can start by removing `src/App.tsx`—the contents of that file were moved to `src/layouts/root-layout.tsx`. -In `src/main.tsx`, import `RouterProvider` and `createBrowserRouter()` from `react-router-dom`, as well as all of the default components from the layouts and routes you created. Replace the contents inside of `` with only ` `. Lastly, you will build the `router` using `createBrowserRouter()`. +In `src/main.tsx`, import `RouterProvider` and `createBrowserRouter()` from `react-router-dom`, as well as all of the default components from the layouts and routes you created. Replace the contents inside of `` with only ` `. Lastly, you will build the `router` using `createBrowserRouter()`. ```tsx filename="src/main.tsx" import React from 'react' @@ -259,8 +259,8 @@ const router = createBrowserRouter([ children: [ { path: "/", element: }, { path: "/contact", element: }, - { path: "/sign-in", element: }, - { path: "/sign-up", element: }, + { path: "/sign-in/*", element: }, + { path: "/sign-up/*", element: }, { element: , path: "dashboard", From 456f38bc0a14426d2b5dad453b81f14bcd17ada0 Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Thu, 11 Apr 2024 12:39:49 -0400 Subject: [PATCH 3/6] DOCS-6057 add app router example to clerkloading reference (#895) --- docs/components/control/clerk-loaded.mdx | 99 ++++++++++++++++------- docs/components/control/clerk-loading.mdx | 70 +++++++++++----- 2 files changed, 120 insertions(+), 49 deletions(-) diff --git a/docs/components/control/clerk-loaded.mdx b/docs/components/control/clerk-loaded.mdx index a2d5f0d7fa..aed0006643 100644 --- a/docs/components/control/clerk-loaded.mdx +++ b/docs/components/control/clerk-loaded.mdx @@ -13,38 +13,81 @@ The `` component guarantees that the Clerk object has loaded and wi - ```tsx filename="pages/_app.tsx" - import "@/styles/globals.css"; - import { ClerkLoaded, ClerkProvider } from "@clerk/nextjs"; - import { AppProps } from "next/app"; + + + ```tsx filename="app/layout.tsx" + import { ClerkProvider, ClerkLoaded, ClerkLoading } from '@clerk/nextjs' + import './globals.css'; + + export default function RootLayout({ + children, + }: { + children: React.ReactNode + }) { + return ( + + + + + {children} + + + + + ) + } + ``` + + Once you have wrapped your app with ``, you can access the `Clerk` object without the need to check if it exists. + + ```tsx filename="app/page.tsx" + declare global { + interface Window { + Clerk: any; + } + } - function MyApp({ Component, pageProps }: AppProps) { - return ( + export default function Home() { + return
This page uses Clerk {window.Clerk.version};
; + } + ``` + - - - - - - ); - } + + ```tsx filename="pages/_app.tsx" + import "@/styles/globals.css"; + import { ClerkLoaded, ClerkProvider } from "@clerk/nextjs"; + import { AppProps } from "next/app"; - export default MyApp; - ``` + function MyApp({ Component, pageProps }: AppProps) { + return ( - Once you have wrapped your app with ``, you can access the `Clerk` object without the need to check if it exists. + + + + + + ); + } - ```tsx filename="pages/index.tsx" - declare global { - interface Window { - Clerk: any; + export default MyApp; + ``` + + Once you have wrapped your app with ``, you can access the `Clerk` object without the need to check if it exists. + + ```tsx filename="pages/index.tsx" + declare global { + interface Window { + Clerk: any; + } } - } - export default function Home() { - return
This page uses Clerk {window.Clerk.version};
; - } - ``` + export default function Home() { + return
This page uses Clerk {window.Clerk.version};
; + } + ``` + + @@ -65,7 +108,7 @@ The `` component guarantees that the Clerk object has loaded and wi - ); + ); } function Page() { @@ -77,7 +120,7 @@ The `` component guarantees that the Clerk object has loaded and wi return (
The content
- ); + ); } export default App; @@ -102,4 +145,4 @@ The `` component guarantees that the Clerk object has loaded and wi - \ No newline at end of file + diff --git a/docs/components/control/clerk-loading.mdx b/docs/components/control/clerk-loading.mdx index be3e2d7ffa..a7c5b7ecf9 100644 --- a/docs/components/control/clerk-loading.mdx +++ b/docs/components/control/clerk-loading.mdx @@ -13,27 +13,55 @@ The `` renders its children while Clerk is loading, and is helpful - ```tsx filename="pages/_app.tsx" - import "@/styles/globals.css"; - import { ClerkLoaded, ClerkLoading, ClerkProvider } from "@clerk/nextjs"; - import { AppProps } from "next/app"; - - function MyApp({ Component, pageProps }: AppProps) { - return ( - - - -
Clerk is loading
- - - - - - ); - } + + ```tsx filename="app/layout.tsx" + import { ClerkProvider, ClerkLoaded, ClerkLoading } from '@clerk/nextjs' + import './globals.css'; + + export default function RootLayout({ + children, + }: { + children: React.ReactNode + }) { + return ( + + + + +
Clerk is loading...
+ + + {children} + + + + + ) + } + ``` + + ```tsx filename="pages/_app.tsx" + import "@/styles/globals.css"; + import { ClerkLoaded, ClerkLoading, ClerkProvider } from "@clerk/nextjs"; + import { AppProps } from "next/app"; + + function MyApp({ Component, pageProps }: AppProps) { + return ( + + + +
Clerk is loading
+ + + + + + ); + } - export default MyApp; - ``` + export default MyApp; + ``` + @@ -80,4 +108,4 @@ The `` renders its children while Clerk is loading, and is helpful - \ No newline at end of file + From 08c5d9ca65cdea6ee0464e1313e31f14b391becf Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Thu, 11 Apr 2024 12:54:17 -0400 Subject: [PATCH 4/6] DOCS-6014 update options for nodejs middleware (#896) --- docs/backend-requests/handling/nodejs.mdx | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) diff --git a/docs/backend-requests/handling/nodejs.mdx b/docs/backend-requests/handling/nodejs.mdx index a9232fc35a..83c11776e0 100644 --- a/docs/backend-requests/handling/nodejs.mdx +++ b/docs/backend-requests/handling/nodejs.mdx @@ -26,7 +26,8 @@ The Clerk Node SDK offers two authentication middlewares specifically for [Expre app.get( "/protected-endpoint", ClerkExpressWithAuth({ - // ...options + // Add options here + // See the Middleware options section for more details }), (req, res) => { res.json(req.auth); @@ -61,7 +62,8 @@ app.listen(port, () => { app.get( '/protected-route', ClerkExpressWithAuth({ - // ...options + // Add options here + // See the Middleware options section for more details }), (req: WithAuthProp, res: Response) => { res.json(req.auth); @@ -96,7 +98,8 @@ app.listen(port, () => { app.get( '/protected-endpoint', ClerkExpressRequireAuth({ - // ...options + // Add options here + // See the Middleware options section for more details }), (req, res) => { res.json(req.auth); @@ -135,7 +138,8 @@ declare global { app.get( '/protected-route', ClerkExpressRequireAuth({ - // ...options + // Add options here + // See the Middleware options section for more details }), (req: RequireAuthProp, res) => { res.json(req.auth); @@ -168,6 +172,12 @@ These options can be used with both [`ClerkExpressWithAuth`](#clerk-express-with | Name | Type | Description | | ----------- | ----------- | -------------- | +| `audience` | `string \| string[]` | A string or list of [audiences](https://datatracker.ietf.org/doc/html/rfc7519#section-4.1.3). If passed, it is checked against the `aud` claim in the token. | | `authorizedParties`| `string[]` | Can be used to validate that the `azp` claim equals any of your known origins that are permitted to generate those tokens. This is an extra security check that we highly recommend that you do. For more information, refer to [Manual JWT Verification](https://clerk.com/docs/backend-requests/handling/manual-jwt).
An example of the value you can pass is: `['http://localhost:4003', 'https://clerk.dev']` | | `jwtKey` | `string` | Clerk's JWT session token can be verified in a networkless manner using the JWT verification key. By default, Clerk will use our well-known JWKs endpoint to fetch and cache the key for any subsequent token verification. If you use the `CLERK_JWT_KEY` environment variable or the `jwtKey` option to supply the key, Clerk will pick it up and do networkless verification for session tokens using it. For more information, refer to [Networkless Token Verification](https://clerk.com/docs/references/nodejs/token-verification#validate-the-authorized-party-of-a-session-token). | | `onError` | `(error: ClerkAPIResponseError) => unknown` | This function can act as a custom error handler tailored to the needs of your application. | +| `signInUrl` | `string` | The URL to redirect to when the user is not authenticated. | +{/* | `strict` | `boolean` | When set to `true`, the middleware will raise an error when an unauthenticated request is made. When set to `false`, the middleware will return an empty auth object. | */} +| `isSatellite` | `boolean \| (url: URL) => boolean` | When using Clerk's satellite feature, this should be enabled for secondary domains. | +| `domain` | `string \| (url: URL) => boolean` | The domain used for satellites to inform Clerk where this application is deployed. | +| `proxyUrl` | `string` | If using a proxy, specify the URL of the proxy. | From 724acf0692f809fc2ba5aee4e7faeb9af9419c90 Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Thu, 11 Apr 2024 13:56:25 -0400 Subject: [PATCH 5/6] pull firebase integration guide from core-2 docs (#898) --- docs/integrations/databases/firebase.mdx | 278 +++++++++++++---------- 1 file changed, 157 insertions(+), 121 deletions(-) diff --git a/docs/integrations/databases/firebase.mdx b/docs/integrations/databases/firebase.mdx index 38b19ac058..e4be8f3d64 100644 --- a/docs/integrations/databases/firebase.mdx +++ b/docs/integrations/databases/firebase.mdx @@ -5,163 +5,199 @@ description: Learn how to integrate Clerk into your Firebase application. # Integrate Firebase with Clerk -To enable Firebase integration with your Clerk application, you will need to provide Clerk with the required Firebase configuration attributes depending on the Firebase features you would require authenticated user access to. + + +- Use Clerk to authenticate access to your Firebase data. +- Configure your Firebase Clerk integration. + + + +Integrating Firebase with Clerk gives you the benefits of using Firebase's features while leveraging Clerk's authentication, prebuilt components, and webhooks. -To get started, go to the Clerk Dashboard and navigate to the **[Integrations](https://dashboard.clerk.com/last-active?path=integrations)** page. Turn on the Firebase integration. - - - -Once enabled, you will be presented with a form to enter the required Firebase configuration attributes. - - - -## Configuration - -To fill out the Firebase configuration form, you can either fill the fields manually or provide a JSON file from Firebase. If you choose to upload the JSON file, the fields will automatically get filled for you. - -### Upload a JSON Firebase configuration file - -Go to the [Firebase console](https://console.firebase.google.com/) and choose your application. On the Firebase console homepage, click on the settings cog icon in the top left, next to **Project Overview**. A menu will open. Choose the **Project settings** option. - - + -Once you are directed to the **Project settings** page, click on the **Service Accounts** tab. +### Configure the integration - +The Firebase integration enables you to use Clerk to generate a valid authentication token to send to Firebase Auth. This enables you to leverage Clerk's prebuilt components, auth provider options, and more, while accessing Firebase products like Firestore with a session validated by Firebase Auth. -On the **Service Accounts** page, click on the **Generate new private key** button. +To get enable the integration: - +1. Navigate to the Clerk Dashboard. +2. In the sidebar, select **[Integrations](https://dashboard.clerk.com/last-active?path=integrations)**. +3. Toggle the **Firebase** integration on. The configuration modal will appear. Keep this open while you configure your Firebase project. -A modal will pop open. Click on the **Generate key** button. The JSON configuration file will be downloaded to your computer. +Next, configure your integration. - + + + The recommended way to configure your integration is to use a service account key provided by Firebase in order to configure the integration *automatically*. To do so: -To upload the file to Clerk, click on the **Upload JSON** button on the Firebase integration screen inside the configuration modal. + 1. In your Firebase project, visit [the Service Accounts settings](https://console.firebase.google.com/project/_/settings/serviceaccounts/adminsdk). + 2. Near the bottom of the page, select the **Generate new private key** button. + 3. In the modal that pops up, select the **Generate key** button to download the JSON file that contains your service account key. + 4. In the Clerk Dashboard, the Firebase configuration modal should still be open. Select the **Upload service account key** button and upload the JSON file you downloaded. + 5. The appropriate fields in the configuration modal will be filled in automatically. Select **Apply changes** to save your configuration. - + Select the **Configure manually** tab above these instructions if you do not want to use a service account key. + + -### Fill in the required attributes manually + If you want to manually configure your Firebase integration, you must provide Clerk with the following information about your Firebase project: -The attributes that you need to fill in to connect Clerk with Firebase, as a custom authentication system, are described below. + - **Service account email** – Find this in your Firebase project's [Google Cloud Console](https://console.cloud.google.com/projectselector2/iam-admin/serviceaccounts?consoleUI=FIREBASE&hl=fi&supportedpurview=project), or in the `client_email` field of your service account key JSON file. + - **Firestore project ID** – Find this under **Project Settings** in the Firebase dashboard, or in the `project_id` field of your service account key JSON file. + - **Private Key** – You can [generate this manually](https://firebase.google.com/docs/cloud-messaging/auth-server#:~:text=In%20the%20Firebase%20console%2C%20open,confirm%20by%20clicking%20Generate%20Key.), or find it in the `private_key` field of your service account key JSON file. + - **Firebase database URL** *(Optional)* – To find this: + - In the Firebase dashboard, select **Realtime Database** + - Select the **Data** tab, and select the copy button to add the database URL to your clipboard. + + -- **Service account ID** - The **service account ID** can be found in the [Google Cloud Console](https://console.cloud.google.com/projectselector2/iam-admin/serviceaccounts?consoleUI=FIREBASE&hl=fi&supportedpurview=project) for your Firebase project, or in the `client_email` field of a service account JSON file. -- **Project ID** - The **Firebase project ID** is the unique identifier of your Firebase project. Can be found under the **Project Settings** in the Firebase platform. -- **Database URL** *(Optional)* - The **Firebase Realtime Database URL** as retrieved from the Firebase platform under the **Realtime Database** page. -- **Private Key** - The private key used for signing which belongs to the Google service account ID of your project. Can be found in the Google Cloud Console for your Firebase project, or in the `private_key` field of a service account JSON file. +### Enable authentication in Firebase -## Firebase user sign-in with Clerk as an authentication provider +To use Firebase auth, ensure authentication is enabled in your Firebase dashboard. To do so: -After successfully completing the integration setup on in the Clerk Dashboard, you should set up your frontend to connect Clerk with the Firebase authentication system. +1. Navigate to your Firebase dashboard. +2. In the navigation sidebar, select the **Build** dropdown and select [**Authentication**](https://console.firebase.google.com/u/0/project/_/authentication). +3. Select **Get started**. +4. Enable any sign-in method you want, such as **Email/Password**. - +### Add a Security Rule to your Firestore database (optional) -### Retrieve a Firebase user authentication token from Clerk +Adding the [Cloud Firestore](https://firebase.google.com/docs/firestore/quickstart) feature in your Firebase application is optional. -The Firebase Web SDK requires an authentication token to sign in your users using Clerk as the custom authentication provider. This token can be retrieved calling the `getToken` method returned from the [`useAuth()`](/docs/references/react/use-auth) hook and calling it with the `integration_firebase` template parameter. +To use Firestore with Clerk, ensure that you have defined [Security Rules](https://firebase.google.com/docs/firestore/security/get-started) that allow authenticated requests to access your database. For example: -```jsx -await getToken({ template: "integration_firebase" }); +```bash +service cloud.firestore { + match /databases/{database}/documents { + match /{document=**} { + allow read, write: if request.auth != null; + } + } +} ``` -The above method will return the token needed for the Firebase Web SDK to sign in your users with Clerk. - -### Sign in using the Firebase Web SDK - - - The Firebase Web SDK referenced is the browser installation of the official Firebase JavaScript SDK package on [npm](https://www.npmjs.com/package/firebase). - - -To authenticate your users on Firebase using Clerk, you would need to call the `signInWithCustomToken` method of the Firebase Auth scope. +### Get your Firebase config object + +To connect to your Firebase app in your code, you need a config object from your Firebase project. To find it: + +1. Visit [your Firebase project settings](https://console.firebase.google.com/project/_/settings/general/). +2. In the **Your apps** section, there should be a code snippet that includes the `firebaseConfig` object. Copy this object. It should look similar to the following: + ```typescript + const firebaseConfig = { + apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", + authDomain: "clerk-example-xxxxx.firebaseapp.com", + databaseURL: "https://clerk-example-xxxxx-default-xxxx.firebaseio.com", + projectId: "clerk-test-xxxx", + storageBucket: "clerk-test-xxxx.appspot.com", + messagingSenderId: "012345678910", + appId: "1:012345678:web:abcdef123456hijklm", + measurementId: "G-ABC123DEF" + }; + ``` +3. Save this information somewhere secure. You'll need it to connect to your Firebase app. - -```jsx -import { getAuth, signInWithCustomToken } from "firebase/auth"; +See [Google's Firebase documentation](https://support.google.com/firebase/answer/7015592) for more information on the config object. -const auth = getAuth(); -await signInWithCustomToken(auth, clerkCustomToken); -``` +### Use Firebase with Clerk in your code -```jsx -import firebase from "firebase"; +Now that you have configured the integration, and you have retrieved your Firebase config object, it's time to use Firebase with Clerk in your code. -await firebase.auth().signInWithCustomToken(clerkCustomToken); -``` - +The following example: +- Uses Clerk to generate an authentication token for Firebase's API. +- Creates a button for signing into your Firebase app. +- Creates a button for fetching example data from your Firestore database. -An example implementation using Next.js: +This example is written for Next.js App Router, but is supported by any React meta framework, such as Remix or Gatsby. -```jsx +```tsx filename="app/firebase/page.tsx" +"use client"; import { useAuth } from "@clerk/nextjs"; import { initializeApp } from "firebase/app"; import { getAuth, signInWithCustomToken } from "firebase/auth"; -import { useEffect } from "react"; -import firebaseConfig from "../lib/firebase.config"; - -// Initialize Firebase app with config -initializeApp(firebaseConfig); - -export default function Home() { +import { getFirestore } from "firebase/firestore"; +import { doc, getDoc } from "firebase/firestore"; + +const firebaseConfig = { + apiKey: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", + authDomain: "clerk-example-xxxxx.firebaseapp.com", + databaseURL: "https://clerk-example-xxxxx-default-xxxx.firebaseio.com", + projectId: "clerk-test-xxxx", + storageBucket: "clerk-test-xxxx.appspot.com", + messagingSenderId: "012345678910", + appId: "1:012345678:web:abcdef123456hijklm", + measurementId: "G-ABC123DEF", +}; + +// Connect to your Firebase app +const app = initializeApp(firebaseConfig); +// Connect to your Firestore database +const db = getFirestore(app); +// Connect to Firebase auth +const auth = getAuth(app); + +// Remove this if you do not have Firestore set up +// for your Firebase app +const getFirestoreData = async () => { + const docRef = doc(db, "example", "example-document"); + const docSnap = await getDoc(docRef); + if (docSnap.exists()) { + console.log("Document data:", docSnap.data()); + } else { + // docSnap.data() will be undefined in this case + console.log("No such document!"); + } +}; + +export default function FirebaseUI() { const { getToken } = useAuth(); - - useEffect(() => { - const signInWithClerk = async () => { - const auth = getAuth(); - const token = await getToken({ template: "integration_firebase" }); - const userCredentials = await signInWithCustomToken(auth, token); - - /** - * The userCredentials.user object will call the methods of - * the Firebase platform as an authenticated user. - */ - console.log("user ::", userCredentials.user); - }; - - signInWithClerk(); - }, []); + const signInWithClerk = async () => { + console.log("Sign in with clerk"); + const token = await getToken({ template: "integration_firebase" }); + const userCredentials = await signInWithCustomToken(auth, token || ""); + // The userCredentials.user object can call the methods of + // the Firebase platform as an authenticated user. + console.log("User:", userCredentials.user); + }; return ( -
-

Hello Clerk + Firebase!

+
+ +
); } ``` +## Next steps + +
+
+ + + + + + + + +
+
From 64fe94d8a38e8814ad1907fd298ea8c9b9b58120 Mon Sep 17 00:00:00 2001 From: Alexis Aguilar <98043211+alexisintech@users.noreply.github.com> Date: Thu, 11 Apr 2024 13:56:41 -0400 Subject: [PATCH 6/6] DOCS-6072 update usage examples for sign in and sign up components (#894) --- docs/components/authentication/sign-in.mdx | 28 ++++++++++------------ docs/components/authentication/sign-up.mdx | 27 ++++++++++----------- 2 files changed, 24 insertions(+), 31 deletions(-) diff --git a/docs/components/authentication/sign-in.mdx b/docs/components/authentication/sign-in.mdx index a419e82fca..6494982709 100644 --- a/docs/components/authentication/sign-in.mdx +++ b/docs/components/authentication/sign-in.mdx @@ -35,27 +35,23 @@ The following example includes basic implementation of the `` componen - You can embed the `` component using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes). This allows you to redirect the user inside your application. The `` component should be mounted on a public page. + The following example demonstrates how you can use the `` component on a public page. - - ```jsx filename="/app/sign-in/[[...sign-in]]/page.tsx" - import { SignIn } from "@clerk/nextjs"; + If you would like to create a dedicated `/sign-in` page in your Next.js application, check out the [dedicated guide.](/docs/references/nextjs/custom-signup-signin-pages). - export default function Page() { - return ; - } - ``` + ```tsx filename="app/page.tsx" + import { SignIn, useUser } from "@clerk/nextjs"; - ```jsx filename="/pages/sign-in/[[...index]].tsx" - import { SignIn } from "@clerk/nextjs"; + export default function Home() { + const { user } = useUser(); - const SignInPage = () => ( - - ); + if (!user) { + return ; + } - export default SignInPage; - ``` - + return
Welcome!
; + } + ``` diff --git a/docs/components/authentication/sign-up.mdx b/docs/components/authentication/sign-up.mdx index 4606ed708d..23203e3d0d 100644 --- a/docs/components/authentication/sign-up.mdx +++ b/docs/components/authentication/sign-up.mdx @@ -36,26 +36,23 @@ The following example includes basic implementation of the `` componen - You can embed the `` component using the [Next.js optional catch-all route](https://nextjs.org/docs/pages/building-your-application/routing/dynamic-routes#optional-catch-all-routes). This allows you to redirect the user inside your application. The `` component should be mounted on a public page. + The following example demonstrates how you can use the `` component on a public page. - - ```jsx filename="/app/sign-up/[[...sign-up]]/page.tsx" - import { SignUp } from "@clerk/nextjs"; + If you would like to create a dedicated `/sign-up` page in your Next.js application, check out the [dedicated guide.](/docs/references/nextjs/custom-signup-signin-pages). - export default function Page() { + ```tsx filename="app/page.tsx" + import { SignUp, useUser } from "@clerk/nextjs"; + + export default function Home() { + const { user } = useUser(); + + if (!user) { return ; } - ``` - - ```jsx filename="/pages/sign-up/[[...index]].tsx" - import { SignUp } from "@clerk/nextjs"; - const SignUpPage = () => ( - - ); - export default SignUpPage; - ``` - + return
Welcome!
; + } + ```