Understanding Zod Schema Validation

Zod Validation in React (Complete Tutorial)

Estimated read time: 1:20

Summary

In this comprehensive tutorial video by Cosden Solutions, you'll explore the complete process of using Zod for data validation within React applications. The creator starts by introducing Zod as a TypeScript-first schema validation library, emphasizing its compatibility with both TypeScript and JavaScript. The video guides viewers through the steps of creating and using schemas, including various types of properties and modifiers. It further demonstrates integrating Zod with real-world use cases, such as form validation using React Hook Form and secure API requests. The creator provides insightful tips and best practices for leveraging Zod, making it an essential tool for developers aiming to enhance their data validation processes.

Highlights

Zod enhances data validation by integrating directly into your React applications. 🌟
Schema validation with Zod prevents invalid data with clear, verbose error messaging. 🛠️
Integrating Zod with React Hook Form simplifies the process of handling form data. ✨
Use Zod's safeParse function to handle validation errors without crashing your app. 🚀
Extract TypeScript types from Zod schemas for type-safe coding practices across projects. 🤖
Utilize Zod in backend processes for a unified data validation strategy. 🔁

Key Takeaways

Zod is a TypeScript-first schema validation library that works well with both TypeScript and JavaScript. 📜
Zod can create and validate schemas with a variety of properties like strings, numbers, and booleans. 🎨
The library supports modifiers for validations, such as checking if emails or URLs are valid. 🏷️
Zod schemas can be integrated with React Hook Form to automate form validation. 🧙‍♂️
Using safeParse prevents your application from crashing by handling validation errors smoothly. 🛡️
Environment variables can be validated at runtime using Zod to ensure security and type safety. 🌍

Overview

The video kicks off with an introduction to Zod, a flexible schema validation library particularly well-suited to TypeScript users. It discusses the benefits of using Zod in both JavaScript and TypeScript contexts, explaining how to set up and handle different types of data schemas within your React applications.

Delving deeper, the tutorial illustrates specific examples of defining schemas, including optional and nullable fields, and using built-in modifiers for common data types. Viewers are shown how to apply these schemas in practical scenarios, such as form validation with React Hook Form, which automates and simplifies the data handling process.

Finally, the creator shares expert tips on using Zod for API requests and environment variable validation, highlighting how it fortifies application security and maintains data integrity. This tutorial empowers viewers to leverage Zod's extensive capabilities, ultimately enhancing their coding efficiency and application reliability.

Chapters

00:00 - 00:30: Introduction and Course Promotion In this chapter, the focus is on introducing the subject of data validation using Zot within a React application. Additionally, there's a promotion for the instructor's course, Project React, which promises comprehensive guidance in building complex React applications.
00:30 - 01:00: Introduction to Zod Validation The chapter introduces Zot validation in React, highlighting its unique application through a custom platform called Project React, which students have found valuable. The focus then shifts to Zot.dev, the official homepage, where Zot is described as a TypeScript-first schema validation library.
01:00 - 05:00: Basic Schema Definition The chapter discusses the use of a static type inference library for schema validation. It explains how you can create a schema, define property types, and validate data against this schema, with error notifications for invalid data. The library supports TypeScript, allowing automatic inference of types from the schema for application-wide use. It also clarifies that even though TypeScript is supported, the library works efficiently with JavaScript as well.
05:00 - 09:00: Advanced Schema Features The chapter delves into advanced schema features with a focus on using Zot for data validation. The author emphasizes the importance of combining Zot with TypeScript for optimal performance and compatibility. Since Zot supports TypeScript effectively, the guide suggests configuring TypeScript with strict mode enabled in the tsconfig.json file to ensure thorough validation and type-checking, which is typically the default setting in most TypeScript configurations.
09:00 - 12:00: Integrating Zod with TypeScript The chapter "Integrating Zod with TypeScript" focuses on the installation and basic setup of Zod in a TypeScript project. It begins with ensuring that strict mode is enabled in the tsconfig.json file. The speaker then demonstrates how to install Zod using the package manager pnpm. After installation, they rerun the development server using pnpm dev. The chapter aims to provide an understanding of the initial steps needed to integrate Zod with a TypeScript project before diving into more detailed aspects or usage of Zod.
12:00 - 29:00: Real World Applications of Zod in React The chapter introduces the concept of defining a schema and individual properties using Zot in a React application. It explores the practical application of Zot schemas in React development, emphasizing the importance of understanding where it's logical to use them. The chapter also discusses the scenarios in which validation is necessary within React projects and highlights the common uses of schemas. It provides insight into what React developers typically encounter when working on real-world projects in companies or teams. The chapter starts with a review of Zot basics before delving into specific applications within React.
29:00 - 30:00: Conclusion and Call to Action In this chapter, the focus is on setting up a schema for an application by using the library Zot. The chapter begins with the instructor showing how to import the necessary component, identified as 'Z', from Zot, which will be utilized for schema creation. The chapter proceeds by guiding the reader through the process of defining a simple user schema that represents a user within an application, using the imported 'Z' component. This chapter is crafted as a foundational step in understanding how to structure user data within an application context.

Zod Validation in React (Complete Tutorial) Transcription

00:00 - 00:30 In this video, I'm going to teach you everything that you need to know about validating your data with Zot in the context of a React application. But before we get into that, I just want to quickly mention that if you enjoy the way that I teach in my videos, and you're also serious about learning React, you should definitely check out my course Project React, which is going to teach you everything that you need to be able to be a great React developer. You are going to be building a built in complex application with a lot of moving parts, and you're going to be taught and showed how to do it every single step of the way. It's a course that is totally unique.
00:30 - 01:00 There's like a custom application that you get to work with that I haven't seen anyone else do. And all the students that have been on the course have been enjoying it, and they haven't regretted it. And I wish the same for you. If that sounds interesting, it's called Project React, and it's going to be the first link in the description. Cool. With that being said, now let's talk about Zot validation in React. All right, so let's begin. So over here, we have Zot.dev, which is the official homepage of Zot. So what is Zot? Zot is, as here, you can see a TypeScript first schema
01:00 - 01:30 validation with static type inference library. So essentially, you're able to create a schema, define what types of properties your schema has, and Zot is going to be able to validate any data that you pass against that schema and throw errors if it's not valid. And also it has TypeScript for support, which means that you can automatically infer all of the types directly from your schema to be able to use across your entire application. Now, it's important to note that you don't need to use TypeScript to be able to work with Zot. Zot also supports and works very well with JavaScript.
01:30 - 02:00 However, if you're going through the lengths of actually using Zot to validate your data, I would personally recommend that you also use TypeScript. And for the rest of this video, we are going to be working in TypeScript because it just makes sense and Zot supports it really well. So the first step for us to do is to come here and actually go to the installation. So we're going to click here. And let's see, it's going to take us to the installation. And then the only thing that you have to make sure is that if you are working in TypeScript, you have to enable the strict mode in tsconfig.json, which for the most part should already be enabled because most configurations
02:00 - 02:30 have strict mode enabled by default. But if it's not checking your tsconfig.json, and just enable it. And then we're going to come here. And we're going to take our command pnpm add Zot. And I'm going to come here into my editor, where is it, open up the terminal, cancel this, and we're just going to install Zot inside of our project. Now that we have Zot installed, I'm just going to rerun the dev server in case that we need it. So we're going to pnpm dev. And then we have here a working file, which I'm going to start by first showing you the basics of Zot,
02:30 - 03:00 right? So how to define a schema, how to define individual properties. And then I'm going to show you how you would actually use that in the context of a React application. So where does it make sense as a React developer who's working in building in React to have Zot schemas, right? What should you validate? What should you have a schema for? And what is most commonly used? And what are you most likely to see if you work in React in a real project at a company or some sort of team. So let's begin by just going over the basics of Zot. So over here at the top,
03:00 - 03:30 I'm going to make a new line. And then outside of the component, I'm just going to import here, I'm going to import Z from Zot like this Z is going to be what we're going to be used to be able to create a schema. And then here, I'm going to come here and start defining my schema, we're going to keep things simple, we're just going to do a user schema to represent a user that we would have in our application. So let's come here and we're going to do const user schema. And here we're going to do z. And then if I push dot over here, you're going to see all of the options
03:30 - 04:00 that we can actually add with z. And there's a lot of them, this might seem intimidating, you don't have to know all of them. So don't worry about that. But one that we're going to use right now, as you can see here, we have no we have nullable, we have number we have object, we're going to use the object property, because we're going to define an object to represent our user schema, which is pretty typical. So we're going to select object over here. And then we're going to call it with a parenthesis. And then we have to give it here the shape of the object. As you can see here, this is a Zot raw shape, this is going to define what properties is our user schema going to have,
04:00 - 04:30 right? What properties is our user going to have. So this is going to be an object over here. And we can come here. And we can start defining some properties. Now before we do that, look at this code right here. This is the basics of Zot, we created a user schema, usually you call it schema, because that's usually related to Zod. And then you define an object, if your schema is an object, which in most cases, it is going to be, it doesn't mean that it's always going to be. But in our case, a user is going to have properties, so an object makes sense. And then inside of here, you also use z dot something to define the individual properties of your schema,
04:30 - 05:00 which in our case, again, is an object. So for example, since we have a user, what we can do is we can do something like first name, right, and this is going to be z. And now instead of string, I'm going to instead of object, sorry, I'm going to do a string like this, right, we can call this as a string. And now we've defined that our user schema is going to have a first name property, which is going to be of type string, which means that we're going to be able to use this schema and pass any object into it as data. And then it's going to validate and check that that object has
05:00 - 05:30 a first name property, and that we're passing a string as a first name property, right. So that's how that works. So for example, we can come here and we can define our user. So we can do const user. And we can make this equal to an object over here. So now remember, I'm doing all of this outside of the component, because we're just going over the basics here. Afterwards, I'm going to integrate all of this with react specifically. And here we're going to do something we're going to do first name, and we're going to pass it here that is like this, which is my actual real first name.
05:30 - 06:00 And then if we want to actually check that this user that this object over here is valid against the user schema, we have to validate and we have to pass the schema to Zod and we have to parse it. And this is how that works. So we can come here and we can do something like console dot log. And here we can do user schema. And we can do dot parse, this is the parse function over here. And then we can pass here our user object like this, what this is going to do is this is going to take our user object, pass it to the user schema, parse it and Zod is going to automatically validate our
06:00 - 06:30 schema against all of these properties here. So for now, it's only going to check that it has a first name, and that this is a type string. That's all it's going to check. And because our user here has a first name property with a value of values, which is a string, this should pass and we should get our actual validation in our console. So let's check. So here I have the application running, we can see cause and solutions over here. If I now open up the console, we can see in our console, we have an object. And if I look at this object here, we have first name and then Darius, the reason
06:30 - 07:00 we're seeing this object is because our validation past whatever the validation passes, Zod is essentially just going to return the data that you pass into it, and then we're console logging it. So that's what we're seeing inside of the console. If however, I came in here and instead of Darius, I put a one over here, which is a number which no longer matches string, we should get an error in our console, which we can see if we come here, we have let's just refresh, we have an actual error, uncaught Zod error code, invalid type, expected string and received number instead, and the path
07:00 - 07:30 is first name. So these errors are very verbose, but they actually tell you exactly what's wrong with the schema, right? In this case, it told us it expected a string, but it got a number. And it expected that in the first name property, which matches exactly what we've done over here. So this is how schema validation works in Zod, you take an object, take any piece of data, and you validate it using the parse function against any schema. And Zod takes care of everything. Now, if you're using parse, this is actually going to throw an error inside of your application.
07:30 - 08:00 As we've seen here, this is an actual error. But sometimes you don't want to have an error thrown, you actually want to have and just know if the parse has been successful or not. And in that case, you would use a different function, you would use safe parse. So we'll come here, we remove this and we do safe parse. And this is going to do the same exact validation that we had with Zod. But it's instead not going to throw an error, it is going to return to us an object that has a success property or an error property if we have any errors. So let's come back here to
08:00 - 08:30 our application, let's reload. Let's make this a little bit like this. And you see now we have an object, we have a success property called false. And then we have an error property over here, which is a Zod error. And we have the same exact error as we had it before. So it hasn't thrown any error in terms of replication crashing or anything like that. Instead, it just puts the error in an object and then put success to false so that we can handle the error at a later point in our code without crashing our entire application. So if you need that, if you want to safely parse something, use the safe parse function. Now at the same time, if I come back here, and I also reput this to a
08:30 - 09:00 string, so we do that use again, and we save this and then come here and reload. Now you're going to see that we have success true. And then instead of an error over here, we have a data property, which is our object that has been parsed. And then we can use this to actually do something to it. This is great, because now you can pass any sort of data, any sort of value inside of any schema, you can validate it, either throw an error and crash the application or handle the error. Or you can actually have Zod return to an object with success true or false, and then handle the cases
09:00 - 09:30 success or not based off of that, this is really cool. It's really flexible. And you can do a lot with it. Now besides string, there's actually a lot more properties that we can do. For example, we can come here and we can do email like this. And we can do z dot string as well, we can also do string. But what I'm going to do here is I'm going to put dot email like this, what this is going to do is this is a modifier on the existing string, which will also check not only that it is a string, but also that it is a valid email. So this is going to do probably some regex
09:30 - 10:00 checks to make sure that the email is actually valid, right. So if I save this and go back here to our console, we're going to see that we have success false. And then the arrow over here, it's going to tell us that we're missing something because we did not provide our email inside of our user. So if I come here and I do email like this, and now if I do anything, for example, contact caused in solutions.io, which is my public email, and we do this, we are going to see that we have success true or data is actually valid. However, if I put something like let's runThis
10:00 - 10:30 is going to automatically validate this, because we're going to see that this is not a valid email, right? So the benefit of this is you can use email like this, and you don't have to do all of the validation yourself, you can just let Zot handle it. We can also do something like profile URL, right? And we can also do z.string, and then pass it here a string. And instead of email, we can do URL like this. And this is going to do the exact same thing this is going to check that
10:30 - 11:00 the string is a valid URL. So for example, if I come here and I do profile URL, and we're going to put HTTPS Google.com like this, now you're going to see that we have success because Oh, we don't we have false. Why not? Let's see. Oh, right, because our email is still invalid. Let's fix our email.io. There we go. Now we have success true, because we have an actual URL that matches the URL parameter, right? Again, if I put this and remove the.com, it is not going to be a valid URL.
11:00 - 11:30 I mean, I guess it is, I guess this is considered technically a valid URL. But let's see if I just remove this like this. There you go. Now it's considered a not valid URL. And our success is false, just like we could expect. So let's put back to a valid URL. And now we can also do more things than just strings. For example, we can do h and here we can put instead of z dot string, we can do z dot number like this. And now this is going to check that our age is an actual number. So if I put your age like this, and I put your 18, we're going to check that our age,
11:30 - 12:00 this is not actually my real age, but that the age is actually 18. Again, we're going to come here, we see that success is true. This is validating, we can also chain different things, just like we change email over here to the actual strings, we can do something with the numbers. For example, we can do min like this. And we can have min and here we can do one like this. So this is going to check that the age is actually minimum one, right. So if I come here, and I put 18, this is still going to be success true. If I come back here, and I put zero like this, this is going to be success false, because the minimum is no longer working, we can also do
12:00 - 12:30 other things. For example, we can do friends like this. And we can have this bz dot array, right, this is going to be an array type. And then we can pass it here an array of z dot string. So this is going to be an array of strings, right. So now this friends property over here friends is only going to be valid if we have friend one, friend two, and then friend three, like this, right, we go back here to our console. And then we have success false, because again, we have to
12:30 - 13:00 put our age to 18. Right, so let's put our age to 18. And now we have success true. And again, we validated that our data actually has a race. And of course, we can also chain a min or max here. So for example, we can do max like this, and we can put max three, this should still validate because we only have three entries in this array, which is the maximum success true. But if we came here, and we did max two like this, we're going to see that we have success false, right. And the last thing that I'm going to show you is the actual object because you can nest objects within each other,
13:00 - 13:30 right. So we can do something like settings, z dot object. And here we can pass another object and we can be is subscribe. And then we can do z dot Boolean, which is another property that we can do, right. So now this expects a setting object with a is subscribe property. So we can be here and we can come settings like this. And we can do an object is subscribe. And then we're gonna put, well, I don't know what we're gonna put, are you currently subscribed right now, because if you're watching this video, you should definitely subscribe to the channel, it's completely free,
13:30 - 14:00 and you're getting a ton of value. And you're learning really cool things about react. So hopefully, by now we can put subscribe to true. And you are now subscribed. And now if we validate the user schema, again, we're going to see that we have success false. Let's see why, because our array still expects three, again, I keep forgetting about these, but that just goes to show how Zod works. And it actually works. If I come here, now we have success true, because this object actually defines our shape correctly. Now, the last thing that I'm going to show you in
14:00 - 14:30 terms of the schema is optionals, because right now, every single property that we've defined over here is actually required. So if I omit any single property over here, it is going to throw success false not valid, right, but we can change that we can make this optional. For example, I can come here on any property and I can do optional like this and just make first name optional. And then if I comment this out, we are not going to see an error because the first name is optional, we can also instead of optional, we can do noble, which is actually going to make this instead of not being there, it's going to throw an error. But if we put the first name over here, and then
14:30 - 15:00 instead of this, we do know this is going to work because we've set our first name to be nullable, right, so we can do this. And you can also do something called knowledge like this, which is nullable, but it will also accept undefined like this right in the cases where you want to check and you're okay with undefined or null, you can put knowledge and then that is going to validate successfully even if it's undefined or null. So now we covered our schema. And this is pretty much enough to get you going. And if you want to look more on the other things that you can do, just
15:00 - 15:30 play around with it, get a feel for it, or you're welcome to check out these all documentation, they have a lot more than I've shown in this video, but I didn't want to overwhelm you with all of these properties. These right here, what we've shown here are pretty much the standard and most of the ones that you're going to use when you're working with this in your application. Now, if you're working in TypeScript, there's something really cool that you can do. Because as you can see here, we have this user schema over here, we have all of these types over here, which is great. But we also have this user object over here that is not typed, right, the type over here is just
15:30 - 16:00 inferred from the actual data that we have. But what we can do is we can actually extract the type of this user from the user schema to be able to use across our application. And the way that we do that is we can come here, if you're working in TypeScript, of course, we can do type user. And then we can make this equal to z dot infer. And that is going to infer the type of user schema like this, right. And now we have a user over here, which is an actual TypeScript type that is automatically inferred from our schema. As you can see here, we have email profile URL age friends,
16:00 - 16:30 everything is properly typed, our settings object or is subscribed, it's a Boolean, our first name, which is optional string null or undefined, right, everything is properly typed, which means that here in our user, we can actually define this as a user. And we're not going to have any problems. If I remove the first name over here, this is not going to give us any problems. If I remove the email over here, now we get an actual error, because the email is a required property on our user object. And this is really cool. I'm just going to put all of these back here. This is
16:30 - 17:00 really cool, because you can define this object, the schema object anywhere in your application, and then you can extract the type from it and then export this type and use it across your application. And the benefit of doing this is if your back end is also written TypeScript, you can actually share the user schema, you can use the user schema on the front end and use the types on the front end to define everything. And then on the back end, you're also using the same schema to validate all of the data that is received from the front end in terms of the API request, right.
17:00 - 17:30 So this is really useful, this is versatile. And it works really well on both the front end and the back end. So now what we're going to do, because now we understand how Zot works, I'm going to show you the most typical ways that you would use this schema in an actual real world React application. So the first and probably the most common use case that you're going to use this in your applications is whenever you're dealing with forms and user input data. So for this, what I'm going to do, I'm going to come here, and actually, we're going to install React hook form. And we're going to
17:30 - 18:00 install the hook from resolvers, because that is going to be the thing that allows us to connect Zot with React hook form. React hook form, if you don't know, is a form library that makes it really easy to build complex forms in React. It's not the only form library that you can use with React to build forms. But it's one that I prefer. And it's the one that I use. And I teach my course project react. And it's generally one that I recommend. So that's the example that I'm going to show you here. So what we need is we first need this library over here. And we also need the react hook from library. So I'm just going to come here to the editor and actually come back here to VS
18:00 - 18:30 code. And we're going to cancel this and I'm going to do pnpm add react hook form and then hook from resolvers. And here we're not going to install Zot because we already have Zot installed inside of this project, then I'm going to come back here to the application. And we're just going to use the user schema, I'm not actually going to build out an entire UI for the form, I'm just going to use it, I'm just going to show you how you would use this for an actual form, right. So what we can do is we can actually remove the user over here, we don't actually need this, we can remove the console lock, we don't actually need this, what we're going to do is we're just
18:30 - 19:00 going to set up our actual form. So we're going to do is const form equals use form, we're going to import this from react hook form, we're going to pass it here our user type, which is going to be the actual inferred type that we have here. And then we're just going to call it like this, at least for now, maybe here, we're just going to rename this to user form schema, let's pretend that we're editing the user form. So we're going to do a form like this. And then user form schema like this. And the last thing is past user form schema like this. Now to connect the Zot, we're
19:00 - 19:30 going to be able to use exactly this form schema, pass it to use form and actually validate our form directly without having to do anything, we don't have to check for knowledge, we don't have to check for email react hook form is going to do everything automatically through using Zot and this validation schema. So for that, we're going to have to come here pass an object and we're going to have to pass resolver and we're going to do Zot resolver. And we're going to import this from hook form slash resolvers, the library that we've installed. And here we're just going
19:30 - 20:00 to pass it user form schema like this, right. This is a great example and a simple example of how you would use an actual form schema in the context of a react application, you have a form over here and pretend that we have some UI that actually manages the form. If you want a real example of this, I have a bunch of videos and even have a whole tutorial video dedicated to react hook forum where we actually use Zot instead. So I'm not going to do that again, here, I'm just going to show you an illustrate the concept that you take the form, and then you pass it your form.And then you
20:00 - 20:30 validate the schema, the actual data in your form against that schema. Now, also, you don't have to use React Hook Form. You can use something else. You can do your own form validations as well. You can use the parse function. Let's say that, for example, you had a function handleSubmit. I'm again, now just kind of mixing examples. But let's say that you had handleSubmit with some data over here that was of type user form. You can take the data over here, and then you can do const success
20:30 - 21:00 and you can actually let's just do validation or result. I think that's more accurate. And then you can do user form schema dot safe, parse, and then pass it the data like this, right? And then you can do if result dot success, then handle success. Otherwise, you would handle error. Right? This is pseudocode of what you would actually do. You have a handleSubmit function that gets called whenever the form is submitted. And if you're doing this manually, you just call the user from schema,
21:00 - 21:30 pass it the data, safe, parse it, and then do something if it's successful, and do something else if it's not successful. Now the benefit of using React Hook Form is that it does all of this for you automatically, just by this line of code, you don't have to do all of this manually yourself, right? So that's why I recommend using something like React Hook Form, because you don't have to validate things yourself. But if you wanted to validate things yourself, then that's a perfectly valid way to do it. And it's a simple way using Zot as your validation library. Now another example where you might use a form schema like this from Zot actually validate data. Again,
21:30 - 22:00 any place that you would validate your data is a place that makes sense to use something like Zot. And that example is going to be here, an actual API. So let's say that we had a folder over here, let's call the API like this. And inside of here, we had API dot yes. And we had some sort of form, let's say export from async function, get users. And this function would perhaps take in some filters. Let's say for example, we have some filters over here. So we're going to do const, get
22:00 - 22:30 users schema like this, that is going to be Z, we can import this from Zot dot object, and we can do something like limit z dot number, and then offset z dot number like this, right? And we're going to keep these things basic, right, then we're going to do const, actually type users, filters, that is going to be z dot infer. And we're going to pass it here type of get users schema like this. And now we have the user filters over here, which we can do filters, users filters like
22:30 - 23:00 this. And now we can actually use the filters to do something with the right, this is a perfectly valid example, you have a schema over here that you define, you then extract your type, this type and gets here to the get users function, and it's going to get inferred whenever the get users function is actually used. And then you can take the filters over here. And you can just again, you can validate the filters, you can do something like const result equals get users schema dot safe
23:00 - 23:30 parse, and you can pass filters like this. And then you can do something with result, right, if success true, you can do something if success false. The benefit of doing this is that now the front end gets access to the schema and this type. So whenever you're designing the front end to actually put everything together, you know exactly what you're supposed to call this function with. And also, you have the actual protection in the back end, assume that this is running in the back end, you have the actual protection that this function is only going to work if it receives a
23:30 - 24:00 valid limit and a valid offset property, right, this is security on the back end. And you would use that for that, right. So again, great example of using this in a react application. If you have endpoints that you're going to call use a Zot schema validate those endpoints. And then in the front end, you have the types and you can just build your UI to make sure that it validates the schema. And finally, the last thing that I'm going to show you with Zot in the context of a react application is actually something that is really cool and really useful that people don't unfortunately talk about enough. And I'm going to give it to you for free as a bonus, because you've
24:00 - 24:30 watched this far into the video. And that is going to be using Zot to validate your environment variables at runtime in your application. This is something that is super simple, but super useful. So you know how in any react application, you can usually do something like compute your actual root project and do something like dot ENV over here. And then in here, you would have environment variables, for example, like secret key equals 123, right, something like this, right. And then let's say that you would want to use this inside of your application, it doesn't necessarily have to be a react front end application, but it could be but it can also be
24:30 - 25:00 in an OGS environment in your server in your back end API, you have an environment and you want to use that inside of your application, how would you do that efficiently? And how would you use Zot to make sure that your environment is correct and in exactly the correct shape that you expect? Well, let's say that you needed to use the secret key inside of this API over here, let's say that you had to use the secret key to be able to fetch some data from your API or something else. Usually what you would do is you would do something like secret key, for example, let's say fetch, right, we're going to pass the function, I'm just making some pseudocode slash API over here. And then we're
25:00 - 25:30 going to do headers like this. And we're going to do authorization bearer. And then we're going to do here the secret key. And now you would usually do something like env dot process, actually process dot env dot secret key like this, and you would pass the secret key here. Now the problem with this is that there's nothing guaranteeing you that the secret key is actually available, you're just assuming that it is available, right? And if you then run this function,
25:30 - 26:00 and you don't have process dot env dot secret key, this is going to throw an error, and it's actually going to land on the user, the user is going to see an error. And they're going to be like, why do I have an error, it's going to be hard to catch, because there's nothing preventing you from actually not having a secret key over here. So now if we do it with Zot, we can actually prevent that and get type safety inside of our environment variables. Because again, here, there's no type safety about any of these environment variables, they're all string or undefined, which means that they could be strings, or they could also not be there, we're not guaranteed. So in that case,
26:00 - 26:30 what I would do is I would come here inside of SRC, I would make a new folder over here called the details, which is one of the let's spell it correctly, utils like this, which is one of the most underrated folders generally in react. And inside of here, I'm going to do in v.ts. And here, I'm going to use Zot to actually parse the environment at runtime, and then export it and then make sure that the environment is exactly in the shape that I expect. So we can do our usual const and schema like this. And we can do z import this from Zot dot object. And here we
26:30 - 27:00 can pass it secret key, we can say this is going to be a string. So z dot string like this. And now we're going to do export const in V equals n schema dot parse, and then process dot in V, like this, right. So what this is going to do is this is going to export for us an environment variable that we can use, which is going to be the result of parsing our process dot in V
27:00 - 27:30 against our environment schema, this is going to make sure that we have a secret key over here that we can actually use it in a react application. And then we're going to get access to it here from this in V variable. If you want to make it easier, you can sometimes do in V like this to just make it more obvious, right? I don't like to do this, I just do in V like this. It's just simpler for me. And then here in the API, instead of doing process dot in V secret key, we just do here in V. And we import this from utils slash in V. And now the benefit of this is that now we're
27:30 - 28:00 guaranteed that the secret key here is going to be a string. And we also know its type because the environment has been validated at runtime against the schema over here. So if we have an environment where we actually don't have a secret key, or it's not in the right shape that we expect, our application is going to crash at runtime, and we'll know about it. And the user will never have to see that specific error. This is a great use case. And this is something that a lot of people don't talk about. But I pretty much do this in every single one of my applications. And
28:00 - 28:30 we also do this in project react, which again is a great pattern that I try to teach, which also goes to show that I really try to teach everything about good patterns, design patterns and best practices in my courses and also in my videos. So if you haven't checked out project react, again, I highly, highly recommend it. And with this, honestly, you're good to go, you're set up to be able to validate your data with Zot in the context of a react application, you know how to create a schema, how to define different properties for the schema of different types, you can work with objects, you can work with strings, you can work with numbers, booleans, objects, and all those,
28:30 - 29:00 you know how to also convert those to actual TypeScript types, and then use those types in your application, which is cool. And you also have seen some common and popular use cases for using these in an actual react application. The first example was a form example, this is what that looks like, at least the pseudocode of it. The second example was inside of an API function, again, very common example, pseudocode as well, right, we're not actually fetching anything. And then the third example inside of an environment, which again, is a very common use case. And something that again,
29:00 - 29:30 a lot of people don't talk about. And I hope that now you would apply this inside of your own applications. So now you're good to go, you know, Zot, you know, react, and you can use them together and become hopefully a better developer. If you want to play around with this, you're actually going to be able to find the codes for this inside of a repository, it's going to be linked in the description, take this code, play around with it, get a feel for Zot, and then start integrated into your react applications. I really hope that you've enjoyed this video. And I really hope that you've learned something. If you've enjoyed this video, make sure to leave this video a big thumbs up. You can also click here to subscribe. Or you
29:30 - 30:00 can click here to watch a different video of mine that YouTube seems to think that you're really going to enjoy. And with that being said, my name has been Darius Cosden. This is Cosden Solutions. Thank you so much for watching, and I will see you in the next video. Ciao, ciao.