- Read Tutorial
- Watch Guide Video
But one thing that we're not doing yet is we're not storing that user data. So when the user either creates the account, or when they log in, it's redirecting the user, but the rest of the application doesn't actually know anything about the user. So that's going to be over the next few guides because this is going to definitely be in the non trivial category. Over the next few guides, we're going to start building in a system so the entire application is wrapped up so that every component can know about the user, the settings screen can know about the user. When ever we create a new post that knows about the user, everything is going to have the ability to see if the user is logged in, and then also who that user is. So it can customize the apps behavior for them.
And so there are a number of ways you could do this, you could use a set of store tools. And there are all kinds of different ones out there. I personally have not been using those a ton over the last year, so ever since the context API has been created, And so that's what I'm going to show you. I'm going to show you how we can use the context API to wrap up the entire application so it can know about the user, whether they're logged in or not. And if they are, what that users data looks like. So we're going to take it nice and slow, because this is a very important concept. And so we're going to walk through each of those elements over the next few guides.
So whenever you're creating and working with the context API, your very first step has to be creating a context file. So if you open up the file system here, and you can see, we don't have a context, or the other key word you want to think about is a provider's directory, so let's do that first. So I want to make sure I'm putting it in the right spot. I'm going to add a new directory here called contexts. And I'm going to create a TS file here or TSX file here called current user context.tsx. And you'll see in a little bit why we're going to be using TSX. So that's the first thing we need to do. The next thing is we need to create a providers directory. So I'm going to do new file, providers/current user provider.tsx.
Okay, so we've now created both of those files. In the current user context, the code is pretty minimal. This is just some boilerplate code that we have to do to register our current user context here. So I'm going to say import, and here I'm going to say import all which we use the Asterisk for, and as React from react. And then from here, I want to extend and bring in, it's not technically a hook, but it looks a lot like one I'll show you here in a second, so I'm going to say import and then in curly brackets, create context, And that is from react.
CurrentUserContext.tsx
import * as React from "react";
import { createContext } from "react";
And I also wanted to show you, this secondary way of importing react, throughout the rest of this course. Usually, I'm just going to say import react, from react like that but I did want to show you this Asterisks version, because you're going to see it in a lot of tutorials that deal with TypeScript. And so I wanted to give you both options. At the end of the day, this is going to function exactly the same way, we're just saying, I want to import everything in the React library. And then I want to use react, and call that from different parts of that component, that's all we're doing.
So now with all of the imports taken in place, I'm going to say const, and then I'm going to name this one. So this is going to be the current user context equals and then I'm going to call create context. And then I have to give this a type or else TypeScript is going to get mad at me. So I'm going to use the angle brackets, I'm going to say any and then null, and I'm going to tell you exactly what's going on here in a moment. And then from there, I'm just going to say export defaults current user context.
CurrentUserContext.tsx
const CurrentUserContext = createContext<any>(null); export default CurrentUserContext;
Okay, so what's going on here, hitting save. So I'm creating a variable here called current user context. This is actually creating the context, which means it's registering this. And I'm saying that this can have any type. We're not passing any functions in because as you can see, create contacts is a function. That's why we're calling it with null. Now, as you become better at TypeScript, and you work on bigger applications, this file could get quite a bit longer. This is where you could build out your entire interface for what types of data points are allowed in the current user context. So this is where you could say, my users can have an email address, and they can have a password. And then they can have all of these other details like user can have posts, and maybe permissions, you could list all of those things out there here. I don't want you to get so deep in the weeds on the way contacts work. I'd rather you just get to the point where you're able to build it, and then we can extend it from there. So for right now, we're really just registering this context so that we can use it in different parts of the application.
I'm going to pause the video, I'm going to stop the video right now. So that we can break this into steps, over the next few guides I want to really focus on breaking each of the steps you need whenever you're working with the context API. So that when you have to do this on your own apps, you'll be able to go and you'll be able to reference these guides and say, okay, step one, I create a context module, and then I create the context itself and I name it after this. So in the next guide we're going to start building out our current user provider.