Grommet is a React-based framework that provides tools for you to quickly build responsive and accessible applications. It has some of the most intuitive components for setting up the structure of your product (e.g. headers, footers, responsive sidebars, etc).
Then we’ll make the sidebar responsive, so it displays differently on smaller devices:
And finally we’ll add B2B support so our users can create/join organizations, and display the information in the sidebar:
Creating an AppBar with Grommet and Next.js
Let’s get started by creating a new Next.js application.
Add the Grommet top level container to your _app.js
We can then make a new file components/AppBar.jsx which contains our header. This example is taken, with small modifications, from Grommet’s getting started guide for React.
If we go to our index.js file and update it to use the AppBar:
Creating a Sidebar with Gromment and Next.js
Next let’s create the sidebar using Grommet’s Sidebar component:
You can see that we created two pages / and /secret and we are rendering them as Links to get smooth transitions between the different pages.
Then we just need to hook it up in pages/index.js
If you click Secret, you’ll get a 404 because we haven’t created pages/secret.js. Before we do that, since a lot of the logic will be repeated, let’s take a second to make a new useful component components/PageWrapper.js
And then our pages/secret.js can just look like:
Theming your application
Purple not your color? We can theme our entire application by passing in a theme to our Grommet component in src/_app.js
Adding user authentication to our AppBar
Our login button right now is just for show and our secret page is… not very secret. PropelAuth is a service that provides hosted user authentication. It provides fully hosted UIs including signup, login, and account management. For B2B/multi-tenant applications, it also provides organization management/RBAC.
You can follow the getting started guide to configure your page, ours looks like this:
Since we turned on Google login and magic link/passwordless login.
Back in our Next.js file, let’s hook it all up. We start by installing the @propelauth/react library:
and adding an AuthProvider to our _app.js
You can get your authUrl from your dashboard. If you use env variables like we did above, make sure to restart the server after setting up the .env file.
The AuthProvider is responsible for fetching user and organization information from PropelAuth for the current user. The provider makes sure fetching only happens once, no matter how many components/pages need the information.
Next we’ll update our components/AppBar.jsx. We want the Login button to redirect to a login page and after they are logged in to display some information about the user.
Our new AuthButtons has three states:
- Loading the current user’s information. This only happens once on initial page load.
- If they are logged in, we display their profile picture. Clicking that will redirect to an account page hosted by PropelAuth for us.
- If they aren’t logged in, they can click the login button to be redirected to our hosted login page.
If you log in, you’ll see:
Or… whatever profile image you use that isn’t a dog.
Protecting our “Secret” page
The same principles that we just learned from our AppBar apply to our pages. We can use useAuthInfo to determine if the user is logged in or not.
There’s also a function withRequiredAuthInfo that you can use to handle a lot of the loading boilerplate code:
The component SecretBodyInner only ever needs to deal with the case where the user is logged in.
Making our Sidebar collapsible
To let our users open/close the sidebar, we first need something they can click on. Let’s add a hamburger icon in our AppBar, with the help of hamburger-react
If you need to be able to control the sidebar from arbitrary components, you’ll want to use a React context to manage it, but since we only need access to it in the AppBar and Sidebar, we can manage it all from our PageWrapper:
Great! Now we just need to have the sidebar show up and go away when the Hamburger is clicked. I took the existing component MySidebar and renamed it to MySidebarInner:
Collapsible allows for a smooth transition when we open/close the sidebar, like this:
Making our Sidebar responsive
On mobile, our Sidebar can take up a lot of room. Instead of having the Sidebar jump in from the side of the screen, we can have it take up the full screen. When we finish, it will look like this:
Grommet provides us with ResponsiveContext, which allows us to change what we render based on the screen size. We’ll use that alongside the Layer overlay component to display the sidebar above everything.
Note that we also needed to add a new Button so our users can close the full screened sidebar.
Adding organizations to our Sidebar
Organizations are groups of your users that will use your product together. This could be a two person startup, a large enterprise, or someone’s side business that they want to be a company some day.
PropelAuth enables our users to manage their own organizations (inviting coworkers, setting roles, etc.) so all we have to do is display them in our Sidebar:
getSelectedOrg and selectOrg are provided by the orgHelper to make it easier to reference a single organization across our product.
And that’s all! We now have a really powerful skeleton for our project and we can start building the rest of our B2B or multi tenant application.