Posted on Oct 21 Once a user has successfully completed the signup process for your application, you might consider initiating an Onboarding Segmentation Survey for your users right away. This approach enables you to gain a deeper understanding of your users.In this article, you'll discover the process of implementing authentication and protected routes using Supabase. Following that, you'll explore how to effortlessly integrate an onboarding segmentation survey into your application.When you are ready, let's dive in.In this article, you will learn how to:If you are unfamiliar with Supabase, it is an open-source alternative to Firebase. Among its array of products, one of the key features we will delve into is its authentication feature.We'll start by signing in to the dashboard to create a project. Your dashboard looks this if you have not created a project before:Next, go ahead and create your project by clicking the new project button. Name your project however you want; I'll name mine Auth-with-inapp-survey for the purpose of this article.Hit the create new project button when you are done, your new project will then appear on your dashboard, this way:With your project successfully created, the next step is to set up your Next.js project. Supabase simplifies this process by offering a pre-configured Next.js project with Supabase-auth, TypeScript, and Tailwind CSS. To create this project, run the following command in your terminal:This command will set up your Next.js project, integrating it with Supabase-auth and the necessary configurations. Although Tailwind CSS is included, for the purposes of this article, we don't need to use it.The advantage of creating a Next.js project that comes pre-configured with Supabase is that it streamlines the authentication setup for you. This includes setting up functionalities like sign-up, sign-in, log-out, and even a login page, as illustrated in the image below:Pretty cool right :face_with_cowboy_hat: All you need to do is duplicate the .env.local.example file within your project using the following command:Then, recover your supabase URL and Anon key from your project's API settings.Launch your application, and it will start on your localhost at port 3000. Your home page will display the following content, and it also includes a link to the pre-configured login page. Although for this tutorial I would prefer to set my login page as the home page - the index page. If you also share this preference, follow these steps:Clear the content on the index page and paste the content from the login page into it.Move the messages.tsx file from your login folder to the components folder. Once this is done, you can safely delete the login folder.However, there are a few more adjustments required in your auth files to adapt to the new route since the login route now serves as the index page.In the sign-up/route.ts, make the following modification:In the sign-out/route.ts:In the sign-in/route.ts:Note that in the sign-in route, we redirected to the dashboard page in the return statement, although we won't implement a dashboard page for this tutorial. This just ensures that the user is directed to the dashboard page after the sign-in process is completed.Finally, in the callback/route.ts:After a user attempts to sign-up on the app, the user will have to confirm his email. Upon successful email confirmation, the user will be automatically redirected to the URL specified in the return statement of the callback function which is the onboarding page.These modifications will align your authentication routes with the new setup where the login page serves as the initial page.Now that we've completed these steps, let's proceed with implementing our onboarding page.To create the onboarding page, navigate to the root app directory, and follow the structure depicted below:Before we move on to implement the in-app survey, it's essential to ensure that our onboarding page is protected before a user signs up. After all, what's authentication without protected routes, right? Fortunately, Supabase provides a straightforward solution for handling this with server components.Within your page.tsx file for the onboarding page, insert the following code:In this code, we create a new Supabase client using createServerComponentClient, which takes cookies as a parameter. This client is then assigned to the variable supabase.Note: We use cookies to store user sessions as opposed to localStorage in server components because you can't access localStorage in server components. Kudos to Supabase for this solution! 👍 The subsequent code block:is used to check if a user session exists. If a session exists, the user can access the onboarding page without any issues. However, if the session is absent, the if statement will be triggered, redirecting the user back to the login page.I've also imported the logoutButton component into this page in case you want to explore how the sign-in/sign-out process works.Now, let's focus on implementing our onboarding segmentation survey in the onboarding page. This way, users will encounter it right after signing up. The following section will provide a step-by-step guide on how to do this.Thanks to Formbricks, we do not have to build this from scratch 👏 Formbricks is an open-source survey software that helps businesses create and send different kinds of in-app surveys. Formbricks is easy to use and integrates with any web, mobile, or desktop application. Support us by giving us a star, it helps us build our community. P.S: Formbricks is offering swag for Hacktoberfest, and you also have the opportunity to win a Macbook Air! Come and participate! Moving forward, here's a concise preview of the steps we're about to cover:Upon creating your account on Formbricks, you'll be directed to your dashboard, where you'll find a variety of survey templates. For this tutorial, select the onboarding segmentation survey template as that's what we'll be using.Next, you'll be taken to a page where you can edit and tailor this survey to meet your specific requirements. Here, you'll encounter three pre-customized question cards, and you have the option to add more questions if necessary.It's important to note that any modifications made to each question card are instantly reflected in the preview.Once you've completed your question editing, navigate to the "Settings" tab located adjacent to the "Questions" tab. In this section, you can configure the survey to align with your specific needs.For the "How to Ask" card, ensure that the web app option is selected.Another crucial configuration is the survey trigger. Here, you'll define how and when you want your survey to be triggered. To align with the flow of our project and display the survey whenever a user reaches the onboarding page we've implemented, we will choose to trigger the survey only when a user navigates to the onboarding page.To set up this process, begin by selecting the dropdown and choosing the "Add action" option. This action will trigger a modal to appear:Complete the fields in the modal as illustrated below. Feel free to customize these details according to your preferences:Please note that in this step, we need to select the "Page URL" option, which allows us to specify the URL where the survey should be displayed. As shown, I've filled the URL field with https:localhost:3000/onboarding.Once you've provided the necessary information, click the "Track Action" button and then select the option from the dropdown:Another card to note is the "styling" card. This card enables you to style your survey to align with your UI requirements.Upon completing the setup, click the "Publish" button located at the top right corner of the page. This action will redirect you to a page displaying your survey analytics.Next, we will delve into how to establish a connection between your web app and Formbricks.In the settings page, navigate to the "setup checklist" tab found in the sidebar. This page contains all the necessary steps for connecting your web app to Formbricks.You'll also notice a widget status that informs you whether your app has been successfully connected or not. At this point, since it hasn't been connected, it will be displayed like this:To establish the connection, follow these steps:The value of your environmentId can be obtained from your setup checklist page. I've intentionally omitted it here as it's meant to remain private.Upon restarting your web app, the status indicator will be updated to the following: Additionally, you'll see in your console that your app has successfully been connected to Formbricks. You can now test this by attempting to sign up for your app. When you click the sign-up button, you will receive a notification that a mail has been sent to your email address for verification. Upon verification, you will be redirected to the 'onboarding' page as intended. There, your onboarding segmentation survey will appear just as we've implemented:And there you have it, you've learned how straightforward it is to segment your users using Formbricks.Throughout this article, you've gained insights into:You can access the code for this project here.Additionally, don't forget to support us by giving us a star ⭐!Templates let you quickly answer FAQs or store snippets for re-use.Great write up Ola, thank you! :) Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well Confirm For further actions, you may consider blocking this person and/or reporting abuse Bap - Oct 17 Duc Ng - Oct 20 Bagas Hizbullah - Oct 14 Ahana Sharma - Oct 13 Always wanted to gather form data privacy-first? Once suspended, formbricks will not be able to comment or publish posts until their suspension is removed. Once unsuspended, formbricks will be able to comment and publish posts again. Once unpublished, all posts by formbricks will become hidden and only accessible to themselves. If formbricks is not suspended, they can still re-publish their posts from their dashboard. Note: Once unpublished, this post will become invisible to the public and only accessible to Olasunkanmi Balogun. They can still re-publish the post if they are not suspended. Thanks for keeping DEV Community safe. Here is what you can do to flag formbricks: formbricks consistently posts content that violates DEV Community's code of conduct because it is harassing, offensive or spammy. Unflagging formbricks will restore default visibility to their posts. DEV Community — A constructive and inclusive social network for software developers. With you every step of your journey. Built on Forem — the open source software that powers DEV and other inclusive communities.Made with love and Ruby on Rails. DEV Community © 2016 - 2023. We're a place where coders share, stay up-to-date and grow their careers.