Build a User Management App with SolidJS

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

If you get stuck while working through this guide, you can find 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 in the example repository.

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>

Profile photos

Next, add a way for users to upload a profile photo. Supabase configures every project with Storage for managing large files like photos and videos.

Create an upload widget

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>

Update the Account component

With the Avatar component created, update src/Account.tsx to include it:

<$CodeTabs>

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

</$CodeTabs>

Launch!

With 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.

At this stage you have a fully functional application!