Build a User Management App with SolidJS

<$Partial path="quickstart_intro.mdx" />

If you get stuck while working through this guide, refer to the full example on GitHub.

<$Partial path="project_setup.mdx" variables={{ "framework": "solidjs", "tab": "frameworks" }} />

Building the app

Start building the SolidJS app from scratch.

Initialize a SolidJS app

You can use degit to initialize an app called supabase-solid:

npx degit solidjs/templates/ts supabase-solid
cd supabase-solid

Then install the only additional dependency: supabase-js

npm install @supabase/supabase-js

And finally save the environment variables in a .env with the API URL and the key that you copied earlier.

<$CodeTabs>

<$CodeSample path="/user-management/solid-user-management/.env.example" lines={[[1, -1]]} meta="name=.env" />

</$CodeTabs>

Now that you have the API credentials in place, create a helper file to initialize the Supabase client. These variables will be exposed on the browser, and that's completely fine since you have Row Level Security enabled on the Database.

<$CodeTabs>

<$CodeSample path="/user-management/solid-user-management/src/supabaseClient.tsx" lines={[[1, -1]]} meta="name=src/supabaseClient.tsx" />

</$CodeTabs>

App styling (optional)

An optional step is to update the CSS file src/index.css to make the app look better. You can find the full contents of this file here.

Set up a login component

Set up a SolidJS component to manage logins and sign ups using Magic Links, so users can sign in with their email without using passwords.

<$CodeTabs>

<$CodeSample path="/user-management/solid-user-management/src/Auth.tsx" lines={[[1, -1]]} meta="name=src/Auth.tsx" />

</$CodeTabs>

Account page

After a user is signed in allow them to edit their profile details and manage their account.

Create a new component for that called Account.tsx.

<$CodeTabs>

<$CodeSample path="/user-management/solid-user-management/src/Account.tsx" lines={[[1, 1], [3, 78], [87, -1]]} meta="name=src/Account.tsx" />

</$CodeTabs>

Launch!

Now that you have all the components in place, update App.tsx:

<$CodeTabs>

<$CodeSample path="/user-management/solid-user-management/src/App.tsx" lines={[[1, -1]]} meta="name=src/App.tsx" />

</$CodeTabs>

Once that's done, run this in a terminal window:

npm start

And then open the browser to localhost:3000 and you should see the completed app.

Bonus: Profile photos

Every Supabase project is configured with Storage for managing large files like photos and videos.

Create an upload widget

Create an avatar for the user so that they can upload a profile photo. Start by creating a new component:

<$CodeTabs>

<$CodeSample path="/user-management/solid-user-management/src/Avatar.tsx" lines={[[1, -1]]} meta="name=src/Avatar.tsx" />

</$CodeTabs>

Add the new widget

And then add the widget to the Account page:

<$CodeTabs>

<$CodeSample path="/user-management/solid-user-management/src/Account.tsx" lines={[[1, 3], [76, 88]]} meta="name=src/Account.tsx" />

</$CodeTabs>

At this stage you have a fully functional application!