Svelte Website & Dashboard template with:
- User authentication using Auth0
- Sveltekit stack
- Design with Daisy UI (based on TailwindCSS)
- Types with Typescript
- Vite tooling
I love Svelte for its simplicity. Coming from Backend and having worked with React for a year, Svelte feels like a dream.
Sveltekit makes it very easy to have excellent performance with very little optimization, but the main advantage according to me is the developer experience.
This project can be helpful to early-stage start-ups and freelancers with limited front-end knowledge, who want to ship things fast in production without compromising on quality.
Daisy UI makes it easy to have a good generic UI without much effort.
If I were to do this project again, I would take a free website design on Figma, and implement it with TailwindCSS.
Also, if I were to use it in the real world, I would build another API in Python with FastAPI that would communicate with Sveltekit's backend.
This is a matter of personal taste, as Typescript can do the job just as well.
The authentication between Sveltekit and FastAPI could then work in 2 different ways:
- using access tokens generated by Auth0 and available in the user object
- using basic credentials since, unlike a SPA, the credentials would live in SvelteKit's backend and would be protected.
I would go for the first option, even if this might be overkill.
Also, you will notice that I externalized the login page. This is due to the fact that as of today, @auth/sveltekit
is experimental and some things cannot be done as far as I tried and searched online.
- Env variables
You will first need an Auth0 account. Then, you will have to:
- create a new Application (standard one)
- allow the following redirect URI: http://localhost:4040, https://your-deployment, http://localhost:4040/callback/auth, https://your-deployment/callback/auth
- allow the following web origins and logout URLs: http://localhost:4040, https://your-deployment
- (remove the localhosts in your production API, this gives steps mainly for a local server)
- create a new API
- create a
.env
file with the following variables:AUTH0_DOMAIN
AUTH0_ID
AUTH0_SECRET
AUTH0_ISSUER
AUTH0_REDIRECT_URI
You will also need to define a secret for your app so that it can use Auth.js.
AUTH_SECRET
must also be defined. You can create one using:openssl rand -base64 32
- Install
You can now run npm i
- Run locally
You can run npm run dev
, or npm run build
and npm run preview
- Deploy
I am using Vercel but anything is fine
You can find the latest performance here
Here are the results:
What I find sick is that I did very little optimization:
- Images are lazy loaded
- Heavy components are imported asynchronously