What a state is to React components, a signal is to Solid components. Here's another useful and typical example of reactive variables:
import { render } from "solid-js/web";\nimport { createSignal } from "solid-js";\n\nfunction Counter() {\n const [count,setCount] = createSignal(0);\n\n return (\n <>\n <h1> Counter: {count} </h1>\n <button onClick={()=>setCount(count=>count-1)}> Decrement </button>\n \n <button onClick={()=>setCount(count=>count+1)}> Increment </button>\n </>\n );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);You can take the current value of a signal inside the signal's mutation's callback function. The above code used the present value of count to increment and decrement it accordingly.
Effects
\nEffects are triggers or watchers that can help you fire a function when a signal updates.
\nLet's say, in the previous example, you want to throw an alert when the count becomes greater than 5.
\nTo do so, you can create an effect using the createEffect function. It takes a callback function as a parameter. This callback function is fired whenever a signal invoked inside it changes.
createEffect(()=>{\n if(count()>5) alert('Count is greater than five')\n})So now, if you click on the Increment button, you should get an alert when it becomes greater than 5:
\nConditionals
\nSolid provides special components called <Show> to render a template based on a condition or the value of a signal. Here's an example of that:
import { render } from "solid-js/web";\nimport { createSignal,Show } from "solid-js";\n\nfunction Counter() {\n const [count,setCount] = createSignal(0);\n\n return (\n <>\n <h1> Counter: {count} </h1>\n <button onClick={()=>setCount(count=>count-1)}> Decrement </button>\n \n <button onClick={()=>setCount(count=>count+1)}> Increment </button>\n <Show when={count()>5}>\n <p>Count is greater than five </p>\n </Show>\n </>\n );\n}\n\nrender(() => <Counter />, document.getElementById("app")!);Once the count becomes greater than 5, the <p> will start showing on the DOM:
For instance, consider the following example that uses the It renders a list of posts fetched from a dummy API: Here's an example that does that: When you enter the red box, the Let's combine all that knowledge to build a small todo application with Solid. To get started, you'll create a new SolidJS project configured with Vite by running: That should create a new Solid project for you. Navigate inside this project and open it in a code editor (like VS Code): Next, install the dependencies by running: And finally, kickstart the app by running: That should open the project for you at Your initial project structure gives the Notice that you also have an Now let's create some boilerplate files. Here's what the architecture of our Todo app would look like: You'll have your top-most parent First, the Second, the Create a JSX file for each of the above components. The To store the Now let's add the template inside the component's JSX: You bind the input field to the You also need to create the Here's how the entire You also need to render this inside the Once you do that, you should see an input field with a submit button rendered by the Now let's work on two simple components responsible for rendering the todos. First is the You use the When you click on an item, you invoke the Finally, render the Great! Let's complete the todo app by writing the logic for adding and deleting a todo. To add a new todo, you only need to complete the logic inside the You'll add the It looks like you're able to add todos now. Awesome! To delete the todo when they're clicked, populate your First, make a copy of the current todos array. Then, filter through this copy to remove the todo you wish to delete. Finally, update your original You can delete todos as well; fantastic! Functionally your app is complete, but it surely misses some aesthetics. Let's add some simple yet neat-looking styles. You can directly update the styles in our And that should give us a much better-looking todo app now: Using effects, refs and events are also much similar to React in Solid. So it's safe to say that Solid provides almost the same if not slightly different syntactic sugar as React. Then why do we need another React-like framework for building web applications? Solid differs from React in terms of performance, developer experience, rendering algorithm, and reactivity. Let's skim through the key differences: At the beginning of this tutorial, we discussed how Solid doesn't use a virtual DOM. Instead, it uses a compiled DOM. This gives it a significant edge over React and any other framework in terms of run-time performance. It generates a blazingly fast production bundle that is aimed to provide a more rich user experience for your users. Reactivity lies at the heart of SolidJS, which is why you'll never find any unnecessary renders of your Solid components. Only the part of a template that needs to update will re-render. With React, however, change in a state leads to re-rendering the entire component. There are ways to combat this, but it needs additional efforts to learn and incorporate these concepts into your applications. Even though Solid has excellent and extensive documentation, the React community is much larger since it has been around for longer. That can be a deal-breaker if you want to build scalable web applications quickly. Even third-party libraries are short in number for Solid in comparison to React. Solid has an exciting future and is worth a side-project or an MVP for your startup. If you wish to explore Solid in-depth, you can check out an official tutorial by the Solid team here that walks you through every concept in Solid. You can also explore the entire code for the demo in this tutorial here. Until next time! Web design and CSS have come a long way. And today, modern websites have everything you could wish for alongside stunning designs. Then why should your website's login and signup forms look boring? The web ecosystem has tons of reliable third-party libraries and frameworks to help you build intuitive designs even if you're not a design wizard. Amidst the plethora of libraries comes a utility first CSS framework called Tailwind CSS. So in this post, you'll learn: I'll then walk you through step by step how to use it to create a modern login and signup form with routing in React. Finally, you'll see how to make these forms functional using LoginRadius Authentication APIs docs/references/api/authentication). If you've heard of Materialize and Bootstrap, Tailwind CSS is much similar in what it offers. It's a CSS framework that helps developers build layouts, components, themes, and whatnot, without writing all the CSS themselves. However, unlike Bootstrap and Materialize, it doesn't give you built-in components out of the box. Instead, it gives you a wide range of fully customizable utility classes that you can use to style your pages. Also, it's pretty easy to integrate with modern frontend frameworks like React, NextJS, VueJS, Angular, Svelte, etc. I'll also explore that shortly when we add Tailwind to our React app. On the downside, Tailwind might make your HTML bloated with loads of CSS classes for small and specific rules. However, you can control it with a framework like React by building smaller reusable components and using JSX bindings for long class names for more maintainability and readability. In fact, we'll take this optimal approach in building our Login form, so you'll understand some best practices you can use to avoid bloated HTML templates in your React app. We'll create a simple yet modern looking login and signup form that looks like this: It will be interactive using React state, can route to different pages, and we'll also, in the end, talk about how we can make it functional from a backend standpoint. Sounds good? Let's start by understanding how we can add TailwindCSS to our React app. Inside a directory of your choice, create a new React project by running: Next, move inside the project and install react-router-dom by running: Now, add Tailwind to your React project by following the steps given here. First, install Tailwind CSS and its related dependencies by running the following command in the root directory: Next, generate some configurational files by running the following command in the root directory: That should generate a Awesome! Now, go ahead and update the Almost there! We'll now add some necessary Tailwind directives to your Each of the above directives represents a layer of Tailwind's utility classes that you can use in your project. Their declaration allows using these utility classes anywhere in your project. Finally, we'll kickstart your React project by spinning a local development server: You're now ready to start using Tailwind CSS to create some awesome-looking UI for your React app! We'll break down the entire page into small, reusable components to ensure that your code is readable and maintainable and doesn't have bloated HTML templates. For instance, you can have a Similarly, you can have a reusable custom So first, let's go ahead and create these files and folders. You'll develop corresponding files for the Signup page as well. Create the following files and folders inside your root directory: For perspective, here's how we'll use those components to build your entire Login Page: For the Login.js files ( Similarly, you can create such boilerplates for the rest of the files. You've created a The above file has two arrays: one each for your login form fields and signup form fields. Each array contains an object that contains attributes for the input fields. The field names should be self-explanatory as to what they represent. Here's a quick summary of that: Later, we'll use this array to cycle through each input field and render a custom As you already have your components boilerplates in place, let's first set up routing for your app. By default, when a user opens the app, we'll direct them to a Login page. Then, if the route changes to /signup, we'll direct them to a Signup page. Head over to your Notice that you have two containers wrapped around your The first container gives a minimum height of 100% and sets a fixed height of the container to 100vh via the Finally, we have some padding classes prefixed with Similarly, the second container sets some width for its child elements and provides some spacing via the respective Tailwind classes. Now, let's create the Head over to Your Using the ' justify-center ' class, we place all these elements inside a flexbox container and horizontally center them. There is also an outer container that simply gives the header some bottom margin using the Then, we give our header image some fixed height and width using the Finally, our text and links have some typography classes for font-size, font-colour, hover effect, and font-weight. Let's now go ahead and render the Here's what the login page should now look like: Let's now start building the rest of the Login page form. We'll now create our reusable and great looking Head over to the Remember all those fields' key-value pairs you set earlier in your Those are all the props your Notice how the HTML markup of this component looks very clean. How is that possible? Are you not using any Tailwind classes here? As there are a lot of Tailwind classes for styling this input field, we have created a constant for it — called We also take a Next, create the Based on your Then we have a Then we simply loop through the Before seeing how the login form looks, you need to render it inside your Login page. So render the above Now, if you go back to your React app, you should see your Login page input fields appear as follows: Excellent, it looks like you're almost there! Now add the final pieces to the Login page by writing the The Inside Again here we're using some Tailwind typography and flexbox classes to style and structure the layout of the UI. Let's go to the Add the following code inside this file: Notice that you also have loads of CSS classes inside our At last, we'll put everything together inside And once we do that, we should have a stunning, modern looking login page appear right in front of us: You've created so many reusable components. Now, it's straightforward to use them to build the Signup page further. Feel free to take this as a challenge and build it yourself based on what you've learned. Here's a quick walkthrough of the steps and how you can use the same approach to build the Signup page in minutes. First, create a main Here's how the entire code looks like: Then, render this component inside And that's it! That's all there is to build a great looking signup page that looks as follows: Don't worry; if you got stuck somewhere, feel free to refer to the entire codebase for this tutorial here. You can use LoginRadius to quickly set up an authentication backend for your frontend application. First, set up an account, and get your API key from your Account Dashboard. Then, you can use their login endpoint to authenticate users. The endpoint takes an email and password as parameters and validates them against the correct credentials. If we were to integrate this endpoint in our previously built Similarly, you can use the Signup endpoint to create users without managing a complete backend database yourself. Curious to learn more? I did a full-fledged guide on authenticating Svelte apps with LoginRadius here. In this tutorial, you have learned to create beautiful registration and authentication forms for your web app with Tailwind CSS. You also learned the advantages and disadvantages of Tailwind CSS and understood how Tailwind CSS works better with React. In this tutorial, I’ll talk about adding authentication in a Svelte application using LoginRadius Authentication APIs. You'll understand step by step how to: You'll also learn how to consume REST APIs in a Svelte app using Fetch API and update user information in your Svelte store. Svelte is a lightweight and minimal JavaScript compiler that ships a single JavaScript bundle to your application without any internal code of its own. This results in smaller bundle size and often a faster running application. It was also the most loved framework of 2021. But what's the first feature you'd add in a Svelte application? Authentication! It's the gateway for your users to interact and use your website. So in this post, I’ll talk about how to add authentication in a Svelte application. You'll learn how to create forms in Svelte and add reactivity to it. You'll also understand how to conditionally render different UI components and set up protected routes for authenticated users in a Svelte application. To speed things up, you won't build your own authentication services from scratch. Instead, you'll use LoginRadius to quickly configure an authentication backend for your Svelte App. Here's a little demo of what your Svelte App would look like by the end of the tutorial: Looks exciting? Let's jump right into it! Let's start by creating a new Svelte project and adding some boilerplate code. Navigate into the directory of your choice and create a new Svelte project by running: That should create a new Svelte project with a simple starter template. Additionally, you'll need to install svelte-navigator package to set up routing in your Svelte app: You need to add environment variable support in your Svelte app to store and use your LoginRadius API Keys and Secrets. First, install a package called dotenv that let's create and use a special Next, head over to the You can refer to the complete Besides the initial set of files, your project will have the following directory structure: So go ahead and create those files and folders accordingly. I'll talk about each of these as you start filling them with some code. Your starter template should come with the following styles inside your However, I have also added some additional styles inside the global stylesheet inside the Your Svelte app will store the authenticated user's data in a global data store to easily access and modify that data from any component within your application. Svelte provides you with the Create a global object called You have also synced the above The root component in your Svelte app is the App Component. This is located inside It has the following imports declared inside: It also has an Let's head over to the Here's what the HTML of your Login Form consists of: You have a login form with two input fields for email and password and a submit button. The form also has an After the form, you have a simple link with an Inside the script of your Login component, create two variables — You also need to create a function called At the moment, you're simply encapsulating the Let's render the Login component inside your Awesome! Let's follow the same process to create your Signup form. Head over to the Similar to the Login Form, the Signup Form will have the following HTML: The only difference is now you have two additional fields — first name and last name. You also have a link just below the signup form that takes the user to the login page. Here's what the script section of your Your Let's render the Signup component inside your Let's create your Home component or the page where you'll redirect an user on a successfull login. Inside In the above HTML, you simply use some Svelte conditionals to render the user's name and a logout button. The script part of your Home component looks like this: You import the global The next step is to set up LoginRadius, so you can start using its Authentication APIs from your Svelte App. Head over to LoginRadius and create a new account by filling in the following details: You'll then see a form with the name of your App, a URL, and a Data Center: Hit Next and LoginRadius will set up an authentication app for you. You can try the pre-built authentication page LoginRadius provides for your app by clicking on Try Signing Up Now. Once you do that, you'll be shown a pre-built authentication page of your LoginRadius app: However, for this tutorial, all you need are the LoginRadius APIs since you already have a frontend (your Svelte App) in place. Once you're inside your LoginRadius account, head over to the Configurations tab from your dashboard. Then expand the API Credentials tab of your application. Inside that, you should see your APP Name, API Key, and API Secret. Head back to the Svelte App's You'll need to ensure that the above Finally, you need to extract these environment variables in your And pass this variable as props to both the Login and Signup component: Great! Now you're ready to integrate LoginRadius APIs in your Svelte app. You'll use two APIs — one for registering the user on the Signup page and the other for authenticating the user on the Login Page. However, both APIs will take the API key and API secret as query parameters. So in the above endpoint, you'll only change the Inside your Since an API request is an asynchronous process, you also have a' loading' variable to disable the submit button until the API responds. You need to send a request to the Signup API inside your Inside the callback of your fetch request, you can handle any errors returned by the API based on different error codes. In case of success, you'll populate your You can set the disabled attribute on your Submit button based on the loading state of the API. Lastly, render a conditional template based on the status of your Signup API. And that's it! Let's give your Signup functionality a whirl. Create a new account first: And voila! You can see in the network tab that the API is successful. And you got back a bunch of data about the newly created user. You also have a success that appears underneath the Signup form. Let's also test an erroneous flow. What if you signup via the same credentials again? The LoginRadius Signup API returns the error message, details, error code, etc., that you've handled accordingly. Also, if you use a simple password, the LoginRadius API returns an error based on a validation mechanism. That's great because it makes your authentication workflow more air-tight. Similarly, you can now integrate the Login API as well in your If you relate it to the Signup component, it's almost identical. The only thing that has changed is the API endpoint. Additionally, if the Login API is a success, you're also storing the data in your Let's also test this out: Let's also test an erroneous Login flow by entering the credentials for a user that doesn't exist: Great! Let's now tie all these individual pages together by setting up routing in your Svelte app. You'll use the First, you'll define the routes for the Signup, Login, and Home pages inside your If you visit Remember, you had a link to the Signup page at the bottom of the Login page and vice versa? Also, your login page doesn't redirect anywhere after you login successfully. In order to programmatically navigate to a specific page on completion of an action, you can use the To use this hook, import Now call the Similarly, you can also complete the Finally, you'll also navigate to the Home page on a successful response from your Login API inside your Login component's Great! You can now navigate from your Login page to the Signup page and vice versa. You should also be automatically redirected to the Home page on a successful login. If you try to visit the Home component by entering the path For this purpose, you have created a You can then wrap another higher order Route component on top of the Now, all you need to do is use this And now you should be able to access the I hope I've shed some light on how to authenticate Svelte apps. You can do a lot from here, like adding Svelte Kit to this project to simplify the routing system for your Svelte application. You can refer to the entire source code for this tutorial here. You can also explore LoginRadius to add forgot password functionality or social signups with Facebook and Google. In this post, I’ll talk about how cookies compare to browser storage. You’ll understand why cookies came out, the problem they solve, and their limitations. Then you’ll explore what browser storage is, and dive deeper into local storage and session storage. You’ll look at their features, where they can be useful, and how to use them via JavaScript. You’ll then see how you can contrast the features, advantages, and disadvantages of each and also highlight specific use cases of each. You’ll also look at the best practices or approach to keep in mind while using each of them and the best place to store your JWT or auth tokens. How many times have you seen a popup on a website that says: This website is using cookies to store your information. I'm guessing so often that you've lost the count! Cookies have been used since time immemorial for storing session related information of a user. This allows websites to provide a unique and engaging experience to their users. However, cookies can be a bit difficult to use, have limited use-case, and have small data storing capacity. To combat this, modern browsers come with their own storage mechanisms like local storage and session storage. In this post, I’ll talk about these storage mechanisms. You'll understand how local storage, session storage, and cookies compare against one another and explore common use cases of each. By the end of this post, you'll know exactly when to use which. Let's have a refresher on the history of cookies. Back in the day, websites used HTTP protocol which is stateless. This meant that they couldn't store user-related information like the user’s session id, the name of the user, etc., in the browser. As the web advanced and grew more popular, websites started storing user related information in the browser itself. This helped them differentiate what kind of user is interacting with their website and provide a personalized experience to the user. That's how cookies were born. They presented a mechanism to store lightweight client or server side data on the browser as key value pairs. They also had an expiry timestamp after which they were automatically deleted by the browser. Also, both browser and the server could set and retrieve cookies from a user’s browser. Moreover, these cookies were sent alongside each HTTP request automatically. This came in handy for server side websites at a time when single page applications weren't a thing. They could easily discern a user's information with each HTTP request that user made. Where cookies solved a great problem, it had some limitations. First, they could only store data up to a few kbs. As client-side applications became more complex, there was a need to store more complex data in the browser. With the onset of HTML5, websites were introduced to browser storage APIs for storing client side information. These APIs were available on browser's window objects globally. Thus, any JavaScript running in the browser could easily access them. The major differentiator was that they had higher data storage capacity and could only be accessed by client-side JavaScript. Browsers rolled out two storage mechanisms — local storage and session storage. So let's explore and understand them in detail. Let's first take a peek at where the session storage resides in the browser: Open the developer tools in the browser and head over to the \"Application\" tab. Under the storage section, you'll find a section named \"Session Storage\". There it is! Now, let's look at the features of browser's session storage. Session storage can store data ranging between 5mb - 10mb. The exact amount of storage capacity varies as per each browser's implementation, but it's a lot more than 4kb of storage capacity cookies offer! As the name suggests, session storage only persists the data as long as a browser tab is opened. This means that each time you open a new tab or a new browser window, a new session storage is created. So any data you store inside the session storage will automatically get deleted when you close that tab/window. You can access the session storage in the This would return the length of the session storage along with an object representing the data that's currently present inside. Since it's empty to begin with, the length is 0. Note that you may directly access the Let's add a key-value pair to the session storage using the This will set a new item in the session storage with the key You now get your recently added data back! You'll also see this inside the session storage section of the browser's application tab: Let's add a bit more complex JSON object in the session storage that looks like this: You'll first need to stringify it since the value against a key can only be a string. Then, you'll store it inside the session storage using the It should now appear inside the session storage of the browser's application tab: Awesome! Let's take a look at retrieving this data. You can use the If you're retrieving an object, you'll need to use Since data in session storage persists only across a browser tab, there are some unique usecases for session storage. Session storage can be used in multi-step processes that must be performed in a single instance. This includes booking flights, hotels, movie tickets, train reservations etc. You can store the details of the previous steps in the browser's session storage to prepopulate those forms or inputs. Since these are critical activities that must be performed in a single go, the data will automatically get deleted when the user jumps to a new tab or a new browser window. Blogging websites, newsletters, tutorial websites etc., have tons of visitors who read through the content without creating an account. In such scenarios, you can subtly prompt the user every time they visit the website to create an account. You can track the session of each user in the session storage. Every time a user reads a blog post or an article on a different tab, you can ask them to create an account. This could be a great way to offer a non-blocking experience for your users whilst effectively converting them to a signed-up user for your website. Under the application tab where session storage resides, you'll find a section called local storage right underneath it. That's where you can see everything you store inside the local storage of your browser. Local storage works, appears, and similar to session storage. For instance, just like Session storage, local storage can also store data ranging between 5mb - 10mb depending upon a browser's implementation. Unlike session storage where data is automatically deleted when a browser tab or window is closed, data in local storage has no default expiry. It's only deleted if you manually delete that data from the local storage either directly, via browser settings, or through your JavaScript code. That means that data in a local storage persists even after a particular tab or browser window is closed. You can add and retrieve data from local storage in the same way you perform those operations with session storage. The only change is now you'll have to use the For instance, you can add an item to the Consequently, you can retrieve an item using the Local storage has a number of uses due to the fact that data inside it has no default expiry. Think about all those scenarios where you want to store some global data that's accessed often in your application. For instance, your user's email id, username, full-name, etc. All these data are widely used throughout different pages of your application. Storing this data inside the local storage will help you prevent unwanted API calls to the server to fetch this data. Also, since this data isn't normally changed often, the chances of having inconsistent data across the browser and the server is quite low. You can also use it to store application specific data that is immutable throughout a login session of a user. For instance, if you have an ecommerce site, you can store the preferred payment option of the user, default delivery addresses, etc. You can also store user preferences such as the theme a user prefers for your website (dark or light mode). Now that you've understand how browser storage works, you can compare them effectively against cookies. However, let's first look at their similarities. Remember in the beginning I asked you how many times you've seen that cookies popup? Most of these popups also have an option where you can choose not to accept these cookies. In other words, cookies are blockable by users and so is browser storage. Users can choose not to allow their data to be stored via any of these mechanisms — and hence, your application should never completely rely on these storage mechanisms. Both cookies and browser storage store key-value pairs as strings and are well supported in all modern browsers. The data inside this can also be easily edited by the user. You know that browser storage has a greater storage capacity than cookies. Hence, browser storage is always a better choice than cookies to store large client-side data. However, since session storage and local storage have different data persistence, you should carefully choose either of them depending on how long you want the data to persist. Cookies allow you to automatically set a TTL or expiry time; are transferred with every HTTP request to the server; and, can also be accessed by the server. These features are missing in browser storage. Which brings us to the question — where would cookies be actually more useful than browser storage? The answer is server side data! If you've dealt with authentication before, you know that at some point you need to store the authentication token or JWT of a user somewhere where it's easily accessible. That's where cookies are helpful. But why can't we use or why shouldn't we use browser storage here? Data such as JWT or Auth token should not be stored in browser storage because they can be accessed by any client side JavaScript running in the browser. This means that if your application somehow leaves an XSS vulnerability, your user's authentication token could be easily leaked to the attacker. The attacker could then make false requests, modify your user's data in the database, and do a lot of damage for your application as well as users. Hence, it's always best to store JWTs in http only cookies. Http only cookies are special cookies that cannot be accessed by client side JavaScript. This way they're secure against XSS attacks. Also, authentication token is often refreshed on expiry and one can use cookies TTL easily to manage that. For simpler cases, one can also store JWT inside regular cookies by setting a TTL. But all in all, authentication itself can be a tricky subject. If you're looking for a no-code identity platform that can seamlessly handle authentication for your application, consider using LoginRadius. Now that you understand how powerful browser storage is, don't feel shy to use it in your applications. Use cookies for server side data where you need a TTL, session storage for specific use cases discussed above, and local storage to manage global data in your application. However, avoid the pattern where your single page application directly interacts with the local storage. For instance, if you're using React with Redux to manage the state in your application, let your reducers take control over what goes and comes out of local storage. Your React components should be abstracted from using local storage directly. Finally, since local storage data has no default expiry, be vary of when you're clearing this data to avoid data inconsistency between your frontend and backend.onMount method to fetch and render some data:
\nimport { render } from "solid-js/web";\nimport { createSignal, onMount, For } from "solid-js";\n\nfunction App() {\n const [posts, setPosts] = createSignal([]);\n\n onMount(async () => {\n const res = await fetch(`https://jsonplaceholder.typicode.com/posts`);\n setPosts(await res.json());\n });\n\n return <>\n <h1>Effects: onMount</h1>\n\n <div>\n <For each={posts()}>{ post =>\n <p>\n {post.body}\n </p>\n }</For>\n </div>\n </>;\n}\n\nrender(() => <App />, document.getElementById('app'));onCleanup
\nonCleanup is the exact opposite of onMount. It's fired whenever a component unmounts from the DOM completely. Ideally, you can use this method to clear any event listeners you may have added to your DOM elements.
\nimport { render } from "solid-js/web";\nimport { onMount, onCleanup } from "solid-js";\n\nfunction App() {\n\n const handleMouseEnter=()=>{\n console.log('Entered the box')\n }\n\n onCleanup(()=>{\n const box=document.querySelector('#box');\n box.removeEventListener('mouseenter',handleMouseEnter)\n })\n\n onMount(async () => {\n const box=document.querySelector('#box');\n const onMouseEnter=box.addEventListener('mouseenter',handleMouseEnter)\n });\n\n return <>\n <h1>Effects</h1>\n\n <div id="box" style={{height:'200px',width:'200px',border:'1px solid red'}}>\n\n </div>\n </>;\n}\n\nrender(() => <App />, document.getElementById('app'));mouseenter event fires, and you get a message on the console. As a cleanup, when the component unmounts, we remove this event listener from that <div>. Build a Todo App with SolidJS
\nSetup
\n
\nnpx degit solidjs/templates/js my-app
\ncd my-app && code .
\nnpm i
\nnpm run starthttp://localhost:3000. Awesome!Architecture & Boilerplate Code
\n<App/> component by default. This is going to be your entry point component. For starters, clean everything that's inside it:
\nimport styles from './App.module.css';\n\n\nfunction App() {\n \n return (\n <div class={styles.App}>\n \n </div>\n );\n}\n\nexport default App;App.module.css file being imported here. It's then referenced inside the <div> container. You'll add all our styles inside this App.module.css file and reference it the same way. <App/> component that would store all the todos and the functions to manipulate these todos. This <App/> component will have two child components. <AddTodo> component will be responsible for adding a new todo.<Todos/> component will be responsible for rendering the list of todos via its own child — <TodoItem/> component. The
\n<AddTodo/> component will render an input field and a button. The input field is where the user types a new todo. The button will be used to send this new todo back to a function in the parent <App/> component to add this todo to the todos list. This function will be taken as props inside the <AddTodo/> component.newTodo, create a signal since you want this property to be reactive based on what the user enters in the input.
\n const [newTodo,setNewTodo]=createSignal('')
\nimport {createSignal} from 'solid-js'\n\n\nfunction AddTodo({addTodo}){\n\n const [newTodo,setNewTodo]=createSignal('')\n\n \n return(\n <div>\n <input \n onChange={handleChange} \n value={newTodo()} type="text" \n placeholder="Type a new todo..."\n />\n <button onClick={handleClick}>Add Todo</button>\n </div>\n )\n}\n\nexport default AddTodo;newTodo signal. You now need to create the handleChange function that updates the newTodo signal based on the onChange event. handleClick function that passes the newTodo signal to the addTodo function prop and clears the input state.
\n const handleChange=(e)=>setNewTodo(e.target.value)\n\n const handleClick=()=>{\n addTodo(newTodo)\n setNewTodo('')\n }<AddTodo/> component looks like:
\nimport {createSignal} from 'solid-js'\n\n\nfunction AddTodo({addTodo}){\n\n const [newTodo,setNewTodo]=createSignal('')\n\n const handleChange=(e)=>setNewTodo(e.target.value)\n\n const handleClick=()=>{\n addTodo(newTodo)\n setNewTodo('')\n }\n \n return(\n <div>\n <input \n onChange={handleChange} \n value={newTodo()} type="text" \n placeholder="Type a new todo..."\n />\n <button onClick={handleClick}>Add Todo</button>\n </div>\n )\n}\n\nexport default AddTodo;<App/> component:
\nimport styles from './App.module.css';\nimport {createSignal} from 'solid-js'\nimport AddTodo from './AddTodo';\n\nfunction App() {\n\n const addTodo=(newTodo)=>{\n \n }\n\n const deleteTodo=(todo)=>{\n\n }\n\n return (\n <div class={styles.App}>\n <h1 class={styles.heading}>Todos</h1>\n <AddTodo addTodo={addTodo}/>\n </div>\n );\n}\n\nexport default App;<AddTodo/> component on the screen:Rendering Todos
\n<Todos/> component. As you already know, this component takes in two props — a list of todos called the todos signal and the deleteTodo method.
\nimport { For } from 'solid-js';\nimport TodoItem from './TodoItem';\n\nfunction Todos({todos,deleteTodo}){\n console.log(todos())\n return(\n <For each={todos()}>{(todo,ind)=>\n \n }\n </For>\n )\n\n}\n\nexport default Todos;<For/> component to loop through the list of todos. Now, you need to pass each todo item and the deleteTodo method further down to your <TodoItem/> component. This component is responsible for rendering each list item.
\nfunction TodoItem({todo,deleteTodo}){\n const handleDelete=()=>deleteTodo(todo);\n return(\n <p onClick={handleDelete}>{todo}</p>\n )\n}\n\nexport default TodoItem;deleteTodo function and pass the clicked todo item as a parameter. <Todos/> component inside the root <App/> component.
\nimport styles from './App.module.css';\nimport {createSignal} from 'solid-js'\nimport Todos from './Todos';\nimport AddTodo from './AddTodo';\n\nfunction App() {\n const [todos,setTodos]=createSignal([])\n\n const addTodo=(newTodo)=>{\n }\n\n const deleteTodo=(todo)=>{\n \n }\n\n return (\n <div class={styles.App}>\n <h1 class={styles.heading}>Todos</h1>\n <AddTodo addTodo={addTodo}/>\n <Todos deleteTodo={deleteTodo} todos={todos}/>\n </div>\n );\n}\n\nexport default App;Adding and Deleting Todos
\naddTodo function in the <App/> component. This function already takes a newTodo parameter, the new todo item you need to add.
\nconst addTodo=(newTodo)=>{\n setTodos([newTodo(),...todos()]);\n}newTodo in the todos signal that is an array using its setter function setTodos. Use JavaScript array destructuring here to ensure to keep the previous todos intact. Let's give this a whirl now:deleteTodo function:
\n const deleteTodo=(todo)=>{\n let newTodos=todos;\n newTodos=newTodos().filter(_todo=>_todo!=todo);\n setTodos(newTodos)\n }todos signal with this copy using the setTodos setter. Let's test it out now:Styling the App
\nApp.module.css file:
\n*{\n margin: 0;\n padding: 0;\n}\n\n.App {\n text-align: center;\n height: 100vh;\n background: #F8F8F8;\n padding: 100px;\n display:flex;\n flex-direction: column;\n align-items: center;\n}\n\n.heading{\n font-size: 96px;\n margin-bottom: 20px;\n}\n\ninput{\n border-radius: 12px;\n outline: none;\n border: none;\n padding: 5px 20px;\n margin-right: 20px;\n height: 60px;\n width: 400px;\n font-size: 24px; \n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n}\n\nbutton{\n height: 65px;\n width: 150px;\n border: none;\n outline: none;\n border-radius: 12px;\n font-size: 24px;\n padding: 5px 15px;\n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n cursor: pointer;\n font-weight: 600;\n background:#2e3136;\n color:#fff;\n}\n\np{\n height: 60px;\n background: white;\n width: 600px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n border-radius: 12px;\n font-size: 24px;\n margin: 20px 0px;\n box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;\n}\n\np:hover{\n background: rgb(232, 169, 146);\n color:#fff;\n cursor: pointer;\n}\n\n\n.header {\n background-color: #282c34;\n min-height: 100vh;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n font-size: calc(10px + 2vmin);\n color: white;\n}Performance
\nSolid is Truly Reactive
\nCommunity Support, Documentation, and Resources
\nConclusion
\n\n
\nWhat is Tailwind CSS?
\nWhat You'll Build Today?
\nProject Setup
\n
\nnpx create-react-app react-tailwind-app
\ncd create-react-app react-tailwind-app && npm i react-router-domInstall Tailwind CSS
\n
\nnpm install -D tailwindcss postcss autoprefixer
\nnpx tailwindcss init -ptailwind.config.js file and postcss.config.js file for you as shown:Configuring Tailwind CSS
\ntailwind.config.js file to support templates for your React component files as shown:
\nmodule.exports = {\n content: [\n "./src/**/*.{js,jsx,ts,tsx}",\n ],\n theme: {\n extend: {},\n },\n plugins: [],\n}index.css file present in the root directory:
\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n...
\nnpm startFrontend Architecture and Boilerplate
\nComponent Architecture
\n<Header/> component that takes care of the page's heading and displays a link to navigate to another page. <Input/> component that can be used inside the form. All in all, here's what your frontend architecture would look like:Directory Structure
\n
\n.\n├── components/\n│ ├── FormAction.js\n│ ├── FormExtra.js\n│ ├── Header.js\n│ ├── Input.js\n│ ├── Login.js\n│ └── Signup.js\n├── constants/\n│ └── formFields.js\n└── pages/\n ├── Login.js\n └── Signup.js/src/pages/Login.js), you can put down the following code:
\nexport default function LoginPage(){\n return(\n <>\n \n </>\n )\n}Form Fields Constants
\nformFields.js file earlier. This file will hold all the input fields related constants like placeholder, value, name, field type, etc. Inside this file, add the following code:
\nconst loginFields=[\n {\n labelText:"Email address",\n labelFor:"email-address",\n id:"email-address",\n name:"email",\n type:"email",\n autoComplete:"email",\n isRequired:true,\n placeholder:"Email address" \n },\n {\n labelText:"Password",\n labelFor:"password",\n id:"password",\n name:"password",\n type:"password",\n autoComplete:"current-password",\n isRequired:true,\n placeholder:"Password" \n }\n]\n\nconst signupFields=[\n {\n labelText:"Username",\n labelFor:"username",\n id:"username",\n name:"username",\n type:"text",\n autoComplete:"username",\n isRequired:true,\n placeholder:"Username" \n },\n {\n labelText:"Email address",\n labelFor:"email-address",\n id:"email-address",\n name:"email",\n type:"email",\n autoComplete:"email",\n isRequired:true,\n placeholder:"Email address" \n },\n {\n labelText:"Password",\n labelFor:"password",\n id:"password",\n name:"password",\n type:"password",\n autoComplete:"current-password",\n isRequired:true,\n placeholder:"Password" \n },\n {\n labelText:"Confirm Password",\n labelFor:"confirm-password",\n id:"confirm-password",\n name:"confirm-password",\n type:"password",\n autoComplete:"confirm-password",\n isRequired:true,\n placeholder:"Confirm Password" \n }\n]\n\nexport {loginFields,signupFields}\n
\nlabelText: The label for an input fieldlabelFor: The value that associates a label to the input field via an id attribute on the input fieldid, name , type, and placeholder: Respective attributes on the input field isRequired: If you want to make an input field mandatory, in this case, all our input fields for form submission will be mandatory<Input/> component that you'll create shortly.Set Up Routing
\n/src/App.js file and add the following code:
\nimport './App.css';\nimport {\n BrowserRouter,\n Routes,\n Route,\n} from "react-router-dom";\nimport SignupPage from './pages/Signup';\nimport LoginPage from './pages/Login';\n\nfunction App() {\n return (\n <div className="min-h-full h-screen flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8">\n <div className="max-w-md w-full space-y-8">\n <BrowserRouter>\n <Routes>\n <Route path="/" element={<LoginPage/>} />\n <Route path="/signup" element={<SignupPage/>} />\n </Routes>\n </BrowserRouter>\n </div>\n </div>\n );\n}\n\nexport default App;<BrowserRouter/> with some long classnames. min-h-full and h-screen classes. Then, it centers everything via flex, items-center to vertically center all the flex child elements, and justifty-center to center them horizontally. p. For top and bottom padding, we use the prefix py- followed by some value. We also have some responsive padding on small and large screen devices prefixed with sm: and lg: respectively. You can learn more about these padding and margin properties to see other similar classes you can use. The Header Component
\n<Header/> component that you can render on both the login and signup pages for quick information and navigation./src/components/Header.js, and add the following code:
\nimport {Link} from 'react-router-dom';\n\nexport default function Header({\n heading,\n paragraph,\n linkName,\n linkUrl="#"\n}){\n return(\n <div className="mb-10">\n <div className="flex justify-center">\n <img \n alt=""\n className="h-14 w-14"\n src="https://ik.imagekit.io/pibjyepn7p9/Lilac_Navy_Simple_Line_Business_Logo_CGktk8RHK.png?ik-sdk-version=javascript-1.4.3&updatedAt=1649962071315"/>\n </div>\n <h2 className="mt-6 text-center text-3xl font-extrabold text-gray-900">\n {heading}\n </h2>\n <p className="mt-2 text-center text-sm text-gray-600 mt-5">\n {paragraph} {' '}\n <Link to={linkUrl} className="font-medium text-purple-600 hover:text-purple-500">\n {linkName}\n </Link>\n </p>\n </div>\n )\n}<Header/> component takes four props:\n
\nheading that it displays on the top;paragraph;linkName to display which page it will redirect the user to; and,linkUrl.mb-10 class.h-14 and w-14 classes, respectively. <Header/> component with all the props inside the Login page (/src/pages/Login.js):
\nimport Header from "../components/Header"\n\nexport default function LoginPage(){\n return(\n <>\n <Header\n heading="Login to your account"\n paragraph="Don't have an account yet? "\n linkName="Signup"\n linkUrl="/signup"\n />\n \n </>\n )\n}The Input Component
\n<Input/> component that you'll use to build your Login form./src/components/Input.js file, and add the following code:
\nconst fixedInputClass="rounded-md appearance-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 focus:outline-none focus:ring-purple-500 focus:border-purple-500 focus:z-10 sm:text-sm"\n\nexport default function Input({\n handleChange,\n value,\n labelText,\n labelFor,\n id,\n name,\n type,\n isRequired=false,\n placeholder,\n customClass\n}){\n return(\n <div className="my-5">\n <label htmlFor={labelFor} className="sr-only">\n {labelText}\n </label>\n <input\n onChange={handleChange}\n value={value}\n id={id}\n name={name}\n type={type}\n required={isRequired}\n className={fixedInputClass+customClass}\n placeholder={placeholder}\n />\n </div>\n )\n}formFields.js constants file?<Input/> component will take. It will also take a value and a handleChange prop since we want this to be a controlled component linked to some state.fixedInputClass. It contains all the essential styling classes for the input field.customClass prop that will append any custom Tailwind class you want to pass to the input field for customizations. How cool is that?!The Login Component
\n<Login/> component inside /src/components/Login.js, where the entire Login form will be rendered. This component will also be responsible for owning any state or event handlers passed down as props to other child components.loginFields from your formFields constants, we programmatically generate an initial value for your loginState.handleChange event handler to update the state whenever an onChange event is fired from the nested <Input/> component. fields array and render an <Input/> component that you've created in the previous section.
\nimport { useState } from 'react';\nimport { loginFields } from "../constants/formFields";\nimport Input from "./Input";\n\nconst fields=loginFields;\nlet fieldsState = {};\nfields.forEach(field=>fieldsState[field.id]='');\n\nexport default function Login(){\n const [loginState,setLoginState]=useState(fieldsState);\n\n const handleChange=(e)=>{\n setLoginState({...loginState,[e.target.id]:e.target.value})\n }\n\n\n return(\n <form className="mt-8 space-y-6">\n <div className="-space-y-px">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={loginState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n </div>\n\n \n\n </form>\n )\n}<Login/> component inside /src/pages/Login.js file as shown:
\nimport Header from "../components/Header"\nimport Login from "../components/Login"\n\nexport default function LoginPage(){\n return(\n <>\n <Header\n heading="Login to your account"\n paragraph="Don't have an account yet? "\n linkName="Signup"\n linkUrl="/signup"\n />\n <Login/>\n </>\n )\n}<FormExtra> and <FormAction/> components.Wrapping Up the Login Page
\n<FormExtra/> component holds the template and styles for a simple \"Remember me\" functionality. /src/components/FormExtra.js file, add the following code:
\nexport default function FormExtra(){\n return(\n <div className="flex items-center justify-between ">\n <div className="flex items-center">\n <input\n id="remember-me"\n name="remember-me"\n type="checkbox"\n className="h-4 w-4 text-purple-600 focus:ring-purple-500 border-gray-300 rounded"\n />\n <label htmlFor="remember-me" className="ml-2 block text-sm text-gray-900">\n Remember me\n </label>\n </div>\n\n <div className="text-sm">\n <a href="#" className="font-medium text-purple-600 hover:text-purple-500">\n Forgot your password?\n </a>\n </div>\n </div>\n\n )\n}/src/components/FormAction.js file and create a submit button for the Login form.
\nexport default function FormAction({\n handleSubmit,\n type='Button',\n action='submit',\n text\n}){\n return(\n <>\n {\n type==='Button' ?\n <button\n type={action}\n className="group relative w-full flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 mt-10"\n onSubmit={handleSubmit}\n >\n\n {text}\n </button>\n :\n <></>\n }\n </>\n )\n}<button/> element to style it. It makes our HTML appear bloated and difficult to read. We can follow the same approach of using a constant and a prop against the className for the <button/> as we previously did to combat this. /src/components/Login.js file as follows:
\nimport { useState } from 'react';\nimport { loginFields } from "../constants/formFields";\nimport FormAction from "./FormAction";\nimport FormExtra from "./FormExtra";\nimport Input from "./Input";\n\nconst fields=loginFields;\nlet fieldsState = {};\nfields.forEach(field=>fieldsState[field.id]='');\n\nexport default function Login(){\n const [loginState,setLoginState]=useState(fieldsState);\n\n const handleChange=(e)=>{\n setLoginState({...loginState,[e.target.id]:e.target.value})\n }\n\n const handleSubmit=(e)=>{\n e.preventDefault();\n authenticateUser();\n }\n\n //Handle Login API Integration here\n const authenticateUser = () =>{\n\n }\n\n return(\n <form className="mt-8 space-y-6" onSubmit={handleSubmit}>\n <div className="-space-y-px">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={loginState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n </div>\n\n <FormExtra/>\n <FormAction handleSubmit={handleSubmit} text="Login"/>\n\n </form>\n )\n}The Signup Page
\n<Singup/> component inside /src/components/Signup.js file similar to the <Login/> component you've completed in the previous section. It will render the signup form fields and attach state and event handlers to it.
\nimport { useState } from 'react';\nimport { signupFields } from "../constants/formFields"\nimport FormAction from "./FormAction";\nimport Input from "./Input";\n\nconst fields=signupFields;\nlet fieldsState={};\n\nfields.forEach(field => fieldsState[field.id]='');\n\nexport default function Signup(){\n const [signupState,setSignupState]=useState(fieldsState);\n\n const handleChange=(e)=>setSignupState({...signupState,[e.target.id]:e.target.value});\n\n const handleSubmit=(e)=>{\n e.preventDefault();\n console.log(signupState)\n createAccount()\n }\n\n //handle Signup API Integration here\n const createAccount=()=>{\n\n }\n\n return(\n <form className="mt-8 space-y-6" onSubmit={handleSubmit}>\n <div className="">\n {\n fields.map(field=>\n <Input\n key={field.id}\n handleChange={handleChange}\n value={signupState[field.id]}\n labelText={field.labelText}\n labelFor={field.labelFor}\n id={field.id}\n name={field.name}\n type={field.type}\n isRequired={field.isRequired}\n placeholder={field.placeholder}\n />\n \n )\n }\n <FormAction handleSubmit={handleSubmit} text="Signup" />\n </div>\n\n \n\n </form>\n )\n}/src/pages/Signup.js alongside the <Header/> components with some modified props for the signup page.
\nimport Header from "../components/Header";\nimport Signup from "../components/Signup";\n\nexport default function SignupPage(){\n return(\n <>\n <Header\n heading="Signup to create an account"\n paragraph="Already have an account? "\n linkName="Login"\n linkUrl="/"\n />\n <Signup/>\n </>\n )\n}Use LoginRadius Authentication APIs
\n<Login/> component (/scr/components/Login.js), here's what the authenticateUser method would look like:
\n//Handle Login API Integration here\n const authenticateUser = () =>{\n \n \n const endpoint=`https://api.loginradius.com/identity/v2/auth/login?apikey=${apiKey}`;\n fetch(endpoint,\n {\n method:'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body:JSON.stringify(loginFields)\n }).then(response=>response.json())\n .then(data=>{\n //API Success from LoginRadius Login API\n })\n .catch(error=>console.log(error))\n \n }Conclusion
\n\n
\nWhat is Svelte?
\nSvelte Project Demo
\nSetup a Svelte App
\nCreate a New Svelte Project
\n
\nnpx degit sveltejs/template svelte-auth-app
\nnpm i svelte-navigatorConfigure Environment Variable Support
\n.env file to define your environment variables.
\nnpm i dotenvrollup.config.js file. Here, make some configurational changes on the plugins property, so your Svelte app can read those environment variables on the client-side:
\n\t...\n\tplugins: [\n\t\treplace({\n\t\t\t// stringify the object\n\t\t\t__myapp: JSON.stringify({\n\t\t\t env: {\n\t\t\t\tisProd: production,\n\t\t\t\t...config().parsed // attached the .env config\n\t\t\t }\n\t\t\t}),\n\t\t }),\n ...\n\t],rollup.config.js file for this project here.Create Files and Folders
\n![\"Directory](\"/b127258daa14eecbda3f07a8bccce890/Directory-Structure-Svelte-App.png\")
Add Project Styles
\nApp.svelte file:
\nmain {\n text-align: center;\n padding: 1em;\n max-width: 240px;\n margin: 0 auto;\n}\n\nh1 {\n color: #ff3e00;\n text-transform: uppercase;\n font-size: 4em;\n font-weight: 100;\n}\n\n@media (min-width: 640px) {\n main {\n max-width: none;\n }\n}/public/build/global.css file. You can copy those styles from here.Global Data Store for Authenticated User
\nwritable function inside the svelte/store dependency.user inside your /src/stores.js file:
\nimport { writable } from "svelte/store"\n\nexport const user = writable(\n localStorage.user ? JSON.parse(localStorage.getItem("user")) : null\n)user object with the browser's local storage so that this data persists on page reloads. If you're unfamiliar with what local storage is, check out my guide on Local Storage vs. Session Storage vs. Cookies that dives deeper into browser storage and other related concepts.The App Component Boilerplate
\n/src/App.svelte.
\n<script>\n /** IMPORTS */ import Login from './Login.svelte'; import Signup from\n './Signup.svelte'; import Home from './Home.svelte'; import PrivateRoute from\n "./routes/PrivateRoutes.svelte"; /** VARIABLES */ const sdkoptions = {}\n</script>sdkoptions variable that will store the environment variables that you can easily pass to different components as and when they need it. You can get rid of any additional HTML inside the App.svelte file generated by the starter template.The Login Component
\n/src/Login.svelte file to create the Login Page.Create Login Form
\n
\n<h3>Login</h3>\n<form on:submit|preventDefault="{handleSubmit}">\n <input\n class="form-field"\n bind:value="{email}"\n type="email"\n placeholder="Email"\n />\n <input\n class="form-field"\n bind:value="{password}"\n type="password"\n placeholder="Password"\n />\n <button class="form-field">\n Login\n </button>\n</form>\n<p>\n Don't have an account?\n <strong class="link" on:click="{navigateToSignup}">Sign up</strong>\n</p>on:submit handler with an event modifier to prevent the default reloading action of the form when it gets submitted.on:click handler that allows the user to navigate to the Signup page.Login Form Field Bindings and Handlers
\nemail and password — to handle the bindings to the input fields. Also, make the sdkoptions variable exportable since you'll receive it as props from the App component.
\n<script>let email; let password; export let sdkoptions;</script>handleSubmit that is the on:submit handler for your Login form:
\n<script>\n\t...\n const handleSubmit=(e)=>{\n let loginFields={email,password};\n\t console.log(loginFields)\n }\n const navigateToSignup=()=>{}\n</script>email and password bindings into a JavaScript object. Later, you'll send a request to your Login API here. You also have an empty navigateToSignup function that I'll come back to once you set up your routes.App.svelte file:
\n<main>\n <Login />\n</main>![\"Login](\"/a83987b29ea11ed6919d189c638e18b3/Login-Page.png\")
The Signup Component
\n/src/Signup.svelte file to create your Signup Page.Create Signup Form
\n
\n<h3>Create a New Account</h3>\n<form on:submit|preventDefault="{handleSubmit}">\n <input\n class="form-field"\n bind:value="{firstName}"\n type="text"\n placeholder="First Name"\n />\n <input\n class="form-field"\n bind:value="{lastName}"\n type="text"\n placeholder="Last Name"\n />\n <input\n class="form-field"\n bind:value="{email}"\n type="email"\n placeholder="Email"\n />\n <input\n class="form-field"\n bind:value="{password}"\n type="password"\n placeholder="Password"\n />\n <button class="form-field">\n Signup\n </button>\n</form>\n<p>\n Already have an account?\n <strong class="link" on:click="{navigateToLogin}">Login</strong>\n</p>Signup Form Field Bindings and Handlers
\nSignup.svelte file should look like:
\n<script>\n\n\tlet email;\n let password;\n let firstName;\n let lastName;\n let loading;\n\n\n export let sdkoptions;\n\n const handleSubmit=()=>{\n const signupFields={\n "FirstName": firstName,\n "LastName": lastName,\n "Email": [\n {\n "Type": "Primary",\n "Value": email\n }\n ],\n "Password": password\n }\n console.log(signupFields)\n }\n\n const navigateToLogin=()=>{}\n</script>signupFields object has a specific format because it aligns with the structure of your Signup API's request. It would make complete sense when you hook your Signup API here.App.svelte file:![\"Signup](\"/f70cc840f16f82553b479878867845f4/Signup-Page.png\")
The Home Component
\n/src/Home.svelte file, add the following HTML:
\n{#if user && _user}\n<h3>Welcome {_user?.profile?.FullName}</h3>\n<button on:click="{logout}">Logout</button>\n{/if}
\n<script>\n import {user} from './stores';\n\n let _user;\n\n user.subscribe(data=>_user=data)\n const logout=()=>{\n user.set(null);\n localStorage.clear();\n }\n\n</script>user object from your Svelte store and store it inside your Home component's state _user. For the logout function, you simply set this user object in your store to null and clear the local storage.Setup LoginRadius
\nCreate LoginRadius Account
\n![\"Signup](\"/5f0a6c05fe8103a95752a598ff49cb06/Signup-2.png\")
![\"Signup](\"/d8b3b347f5c28460e05fcc3aeb364a90/Signup-3.png\")
![\"Signup](\"/4113757d959a0955ec852e781c5f1dad/Signup-4.png\")
![\"LoginRadius](\"/294bf6ef8298c2248b922f708db69374/LoginRadius-Auth-Page.png\")
Get LoginRadius API Configurations
\n![\"LoginRadius](\"/2f2ec40982bff4f7b0ff5f1e2feb34e6/LoginRadius-Configuration-Tab.png\")
![\"LoginRadius](\"/f186d4d464190f4ab2407c896cb101be/LoginRadius-API-Credentials.png\")
Add API Credentials as Environment Variables
\n.env file and add the above credentials inside it:
\nAPP_NAME=<YOUR_APP_NAME>\nAPI_CLIENT_KEY= <YOUR_APP_API_KEY>\nAPI_SECRET= <YOUR_APP_API_SECRET>.env file is present inside the .gitignore of your Svelte project. You don't want to accidentally push this file to a public repository on Github.
\n/node_modules/\n/public/build/\n\n.DS_Store\n\n.envConsume Environment Variables in Svelte Components
\nsdkoptions variables inside your App component file.
\n...\n\tconst sdkoptions = {\n\t"apiKey": __myapp["env"].API_CLIENT_KEY,\n\t"appName":__myapp["env"].APP_NAME,\n "apiSecret":__myapp["env"].API_SECRET\n\t}\n...
\n...\n<Login {sdkoptions} />\n<Signup {sdkoptions} />\n...Integrate LoginRadius API
\n
\nconst endpoint = `${BASE_URL}?apikey=${sdkoptions.apiKey}&apisecret=${sdkoptions.apiSecret}`BASE_URL according to which API you're hitting.Integrate Signup API
\nSignup.svelte file, you'll create a variable called signupResponse to store the result of the Signup API. It also has properties like success and error to prompt the user on the status of your API calls.
\n<script>\n let signupResponse={\n success:null,\n error:null,\n uid:null,\n id:null,\n fullname:null\n }\n \tlet loading;\n\n</script>Signup API Request on Signup Form Submission
\nhandleSubmit() function. First, set the loading to true and reset the signupResponse object. Then, use the fetch API to make a POST request with the signupFields object as post parameter:
\nconst handleSubmit = () => {\n const signupFields = {\n FirstName: firstName,\n LastName: lastName,\n Email: [\n {\n Type: "Primary",\n Value: email,\n },\n ],\n Password: password,\n }\n loading = true\n signupResponse = {\n success: null,\n error: null,\n uid: null,\n id: null,\n fullname: null,\n }\n const endpoint = `https://api.loginradius.com/identity/v2/manage/account?apikey=${sdkoptions.apiKey}&apisecret=${sdkoptions.apiSecret}`\n fetch(endpoint, {\n method: "POST",\n headers: {\n "Content-Type": "application/json",\n },\n body: JSON.stringify(signupFields),\n })\n .then(response => response.json())\n .then(data => {})\n .catch(error => console.log(error))\n .finally(() => (loading = false))\n}Handle API Response
\nsignupResponse object with data from the API. In the finally block, set the loading to false.
\n...\n.then(data=>{\n if(data.ErrorCode){\n if(data.ErrorCode==936){\n signupResponse={\n ...signupResponse,\n error:data.Message\n }\n }\n else if(data.ErrorCode==1134){\n signupResponse={\n ...signupResponse,\n error:data.Errors[0].ErrorMessage\n }\n }else{\n signupResponse={\n ...signupResponse,\n error:data.Description\n }\n }\n }else{\n signupResponse={\n ...signupResponse,\n success:"Account created successfully! Please login via the same details.",\n fullname:data.FullName,\n id:data.id,\n uid:data.Uid\n }\n }\n })\n...Disable Submit Button
\n
\n...\n<button disabled="{loading}" class="form-field">\n Signup\n</button>\n...Show Signup Success and Error
\n
\n... {#if signupResponse.error}\n<p class="error">Error ❌ {signupResponse.error}</p>\n{/if} {#if signupResponse.success}\n<p class="success">\n Success ✔ {signupResponse.success}\n</p>\n{/if} ...![\"Signup](\"/1ec6121e723d287acd3097bcf72a8fe8/Signup-Success-with-API.png\")
![\"Signup](\"/332563b5257d0cf45b9ae3039ea0a832/Signup-Failure-Existing-Email.png\")
![\"Signup](\"/af70d87365d494ebae97ec028b47d597/Signup-Error-Password-Validation.png\")
Integrate Login API
\nLogin.svelte file:
\n<script>\n\n\t...\n import {user} from './stores';\n\n let email;\n let password;\n let loading;\n\n let loginResponse={\n error:null,\n success:null,\n profile:null,\n auth_token:null\n }\n\n export let sdkoptions;\n\n const handleSubmit=(e)=>{\n let loginFields={email,password};\n loading=true;\n loginResponse={\n error:null,\n success:null,\n profile:null,\n auth_token:null\n }\n const endpoint=`https://api.loginradius.com/identity/v2/auth/login?apikey=${sdkoptions.apiKey}&apisecret=${sdkoptions.apiSecret}`;\n loading=true;\n fetch(endpoint,\n {\n method:'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body:JSON.stringify(loginFields)\n }).then(response=>response.json())\n .then(data=>{\n console.log(data)\n if(data.ErrorCode){\n if(data.ErrorCode==936){\n loginResponse={\n ...loginResponse,\n error:data.Message\n }\n }\n else if(data.ErrorCode==1134){\n loginResponse={\n ...loginResponse,\n error:data.Errors[0].ErrorMessage\n }\n }else{\n loginResponse={\n ...loginResponse,\n error:data.Description\n }\n }\n }else{\n loginResponse={\n ...loginResponse,\n success:true,\n profile:data.Profile,\n auth_token:{\n access_token:data.access_token,\n refresh_token:data.refresh_token,\n ttl:data.expires_in\n }\n }\n user.set(loginResponse)\n localStorage.setItem('user',JSON.stringify(loginResponse))\n\n }\n })\n .catch(error=>console.log(error))\n .finally(()=>loading=false);\n }\n ...\n\n</script>\n\n...\n{#if loginResponse.error}\n\t<p class="error">Error ❌ {loginResponse.error}</p>\n{/if}\n{#if loginResponse.success}\n\t<p class="success">\n Success ✔\n </p>\n{/if}\n<p>\n Don't have an account?\n <strong class="link" on:click={navigateToSignup}>Sign up</strong>\n</p>user store and consequently updating your localStorage.![\"Login](\"/4bb4c7881a3e1accbb0b996f7bed9b77/Login-API-Success.png\")
![\"Login](\"/5b4dd5cb3d6ed27fc288aff238ded14f/Login-Error.png\")
Setup Routes
\nsvelte-navigator package that you previously installed to configure routing in your app.Add Routing
\nApp.svelte file:
\n<script>\n\n /** IMPORTS */\n import { Router, Route } from "svelte-navigator";\n ...\n</script>\n\n<main>\n <Router>\n <div>\n <Route path="signup">\n <Signup {sdkoptions} />\n </Route>\n <Route path="login">\n <Login {sdkoptions} />\n </Route>\n <Route path="/">\n <Home />\n </Route>\n </div>\n </Router>\n</main>/login, you should see the Login Page. Similarly, if you go to /signup, you should see the Signup Page.Programmatic Redirection
\nuseNavigate hook from the svelte-navigator library.useNavigate and save its invoked reference inside a variable, as follows:
\n<script>\n import {useNavigate} from "svelte-navigator"; const navigate = useNavigate();\n ...\n</script>navigate() function and pass the path of the page you wish to redirect to. So let's complete the navigateToLogin function inside your Signup component:
\n<script>... const navigateToLogin=()=>navigate('/login'); ...</script>navigateToSignup function inside your Login component:
\n<script>... const navigateToSignup=()=>navigate('/signup') ...</script>handleSubmit function:
\n const handleSubmit=(e)=>{\n ...\n fetch(endpoint,\n ...\n .then(data=>{\n \t\t\t\t...\n }else{\n\t\t\t\t...\n navigate('/')\n }\n })\n ...\n }\n\n</script>Add Protected/Private Routes
\n/ in the URL, you'll be able to see the Home page regardless of your authenticated state. However, you must protect this route so that it's only accessible to authenticated users in your application.RouteGuard.svelte file inside your routes folder. It's a higher-order component that uses the useNavigation hook to programmatically redirect to the login page if an unauthenticated user visits the home page. You use the user object from your Svelte store to validate the authenticated state of a user.
\n<script>\n import { useNavigate, useLocation } from "svelte-navigator";\n import { user } from "../stores";\n\n const navigate = useNavigate();\n const location = useLocation();\n\n $: if (!$user) {\n navigate("/login", {\n state: { from: $location.pathname },\n replace: true,\n });\n }\n </script>\n\n {#if $user}\n <slot />\n {/if}RouteGuard component inside the PrivateRoutes.svelte file, as follows:
\n<script>\n import { Route } from "svelte-navigator";\n import RouteGuard from "./RouteGuard.svelte";\n\n export let path;\n </script>\n\n <Route {path} let:params let:location let:navigate>\n <RouteGuard>\n <slot {params} {location} {navigate} />\n </RouteGuard>\n </Route>PrivateRoute component to wrap your Home component instead of a regular Route component:
\n...\n\t<PrivateRoute path="/" let:location>\n\t\t<Home />\n\t</PrivateRoute>\n.../ route or the Home page only when you're authenticated:![\"Home](\"/9abde471077ac6c2b3ec3795169cafac/Home-Component.png\")
Conclusion
\n
\n\n
\nA Brief History of Cookies
\nEnter Cookies
\nThe Rise of Browser Storage
\nBrowser’s Session Storage
\n\n
\n![\"Application](\"/6322f4dfe998ff0adaa9b8ee847c80ec/application-tab-screenshot.png\")
![\"Session](\"/d1d9b02e5a20551b8e2dd9cb909c8588/session-storage-tab-screenshot.png\")
Storage Capacity
\nData Persistence
\nUsing Session Storage
\nwindow object:
\nwindow.sessionStorage\n//Storage {length: 0}sessionStorage object as well.Adding Data
\nsetItem function available in the sessionStorage object:
\nsessionStorage.setItem("id", "123")id and value 123. If you simply invoke the sessionStorage object now:
\nsessionStorage\n//Storage {id: '123', length: 1}![\"Session](\"/a536d2cf8d666e60cd9dc0936adf8090/session-storage-example-1.png\")
Inserting Complex JSON Data
\n
\nconst data = {\n _id: "61c6c1df7cda7d370a9ef601",\n index: 0,\n guid: "13672f0e-f693-4704-a6f9-839ff36e8960",\n isActive: true,\n balance: "$3,602.49",\n picture: "http://placehold.it/32x32",\n age: 25,\n friends: [\n {\n id: 0,\n name: "Adkins Coleman",\n },\n {\n id: 1,\n name: "Howe Douglas",\n },\n {\n id: 2,\n name: "Becky Velez",\n },\n ],\n}setItem method:
\nsessionStorage.setItem("user_data", JSON.stringify(data))![\"Complex](\"/841be8af005e05920607f66cddfbf745/session-storage-example-2.png\")
Retrieving Data
\ngetItem() function to retrieve a value stored against a key from the session storage by specifying the key as the first parameter in the function.
\nsessionStorage.getItem("id")\n//'123'JSON.parse first to convert the string into a JavaScript object:
\nJSON.parse(sessionStorage.getItem("user_data"))Usecase
\nBooking Applications
\nPrompting Login/Signups to a User
\nBrowser’s Local Storage
\n![\"Local](\"/6b873e80fdedd356fdc792765cbed627/local-storage-tab-screenshot.png\")
Data Persistence
\nUsing Local Storage
\nlocalStorage object to perform these operations instead.localStorage, as follows:
\nlocalStorage.setItem("id", "123")getItem() function:
\nlocalStorage.getItem("id")\n//'123'Usecase
\nGeneric
\nApplication Specific
\nCookies vs. Browser Storage
\nSimilarities
\nDifferences
\nStoring Your JWT/Auth Token
\nWrapping it Up
\n