Skip to content

Commit d6db4e5

Browse files
committed
implement user authentication with auth0
1 parent bdba6eb commit d6db4e5

16 files changed

Lines changed: 1015 additions & 527 deletions

NOTICE

Lines changed: 598 additions & 1 deletion
Large diffs are not rendered by default.

README.md

Lines changed: 6 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,13 @@
1-
# Svelte/JavaScript: Starter SPA Code Sample
1+
# Svelte/JavaScript: Basic User Authentication Code Sample
22

3-
This JavaScript code sample demonstrates how to build a Single-Page Application (SPA) using Svelte.
3+
This JavaScript code sample demonstrates **how to implement user authentication** in Svelte applications using Auth0.
44

5-
Visit the ["Svelte/JavaScript Code Samples: API Security in Action"](https://auth0.com/developers/hub/code-samples/spa/svelte-javascript) section of the ["Auth0 Developer Hub"](https://auth0.com/developers/hub) to explore how you can secure Svelte applications written in JavaScript by implementing endpoint protection and authorization with Auth0.
5+
This code sample is part of the ["Auth0 Developer Hub"](https://auth0.com/developers/hub), a place where you can explore the authentication and authorization features of the Auth0 Identity Platform.
66

7-
[![Svelte/JavaScript Code Samples: API Security in Action](https://cdn.auth0.com/blog/hub/code-samples/spa/svelte-javascript.png)](https://auth0.com/developers/hub/code-samples/spa/svelte-javascript)
7+
Visit the ["Svelte/JavaScript Code Sample: User Authentication For Basic Apps"](https://auth0.com/developers/hub/code-samples/spa/svelte-javascript/basic-authentication) page for instructions on how to configure and run this code sample and how to integrate it with an API server of your choice to [create a full-stack code sample](https://auth0.com//developers/hub/code-samples/full-stack/hello-world/basic-access-control/spa).
8+
9+
[![Svelte/JavaScript Code Sample: User Authentication For Basic Apps](https://cdn.auth0.com/blog/hub/code-samples/spa/svelte-javascript/basic-authentication.png)](https://auth0.com/developers/hub/code-samples/spa/svelte-javascript/basic-authentication)
810

911
## Why Use Auth0?
1012

1113
Auth0 is a flexible drop-in solution to add authentication and authorization services to your applications. Your team and organization can avoid the cost, time, and risk that come with building your own solution to authenticate and authorize users. We offer tons of guidance and SDKs for you to get started and [integrate Auth0 into your stack easily](https://auth0.com/developers/hub/code-samples/full-stack).
12-
13-
## Set Up and Run the Svelte Project
14-
15-
Install the project dependencies:
16-
17-
```bash
18-
npm install
19-
```
20-
21-
The starter Svelte project offers a functional application that consumes data from an external API to hydrate the user interface. For simplicity and convenience, the starter project simulates the external API locally using [`json-server`](https://github.com/typicode/json-server).
22-
23-
However, you can also integrate this starter project with any of the ["Hello World" API code samples, which are available in multiple backend frameworks and programming languages](https://github.com/orgs/auth0-developer-hub/repositories?language=&q=api+hello-world&sort=&type=public).
24-
25-
The compatible API server runs on `http://localhost:6060` by default. As such, to connect your Svelte application with that API server, create a `.env` file under the root project directory and populate it with the following environment variables:
26-
27-
```bash
28-
VITE_API_SERVER_URL=http://localhost:6060
29-
```
30-
31-
Next, execute the following command to run the JSON server API:
32-
33-
```bash
34-
npm run api
35-
```
36-
37-
Finally, open another terminal tab and execute this command to run your Svelte application:
38-
39-
```bash
40-
npm run dev
41-
```
42-
43-
Visit [`http://localhost:4040/`](http://localhost:4040/) to access the starter application.
44-
45-
In the starter project, all the starter Svelte application routes are public. However, you can use Auth0 to get an ID token to hydrate the user profile information present on the `/profile` page with information from a real user. With Auth0, you can also get an access token to make a secure call to an external API to hydrate the messages present in the `/protected` and `/admin` pages.

0 commit comments

Comments
 (0)