supabase/apps/docs/content/guides/getting-started/tutorials/with-angular.mdx

---
title: 'Build a User Management App with Angular'
description: 'Learn how to use Supabase in your Angular App.'
---

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

![Supabase User Management example](/docs/img/user-management-demo.png)

<Admonition type="note">

If you get stuck while working through this guide, you can find the [full example on GitHub](https://github.com/supabase/supabase/tree/master/examples/user-management/angular-user-management).

</Admonition>

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

## Building the app

Start with building the Angular app from scratch.

### Initialize an Angular app

Use the [Angular CLI](https://angular.io/cli) to initialize an app called `supabase-angular` setting some defaults that you can change to suit your needs:

```bash
npx ng new supabase-angular --routing false --style css --standalone false --ssr false
cd supabase-angular
```

Install [supabase-js](https://github.com/supabase/supabase-js):

```bash
npm install @supabase/supabase-js
```

Create a `src/environments` directory and save API URL and key that you copied [earlier](#get-api-details) as environment variables in a new `src/environments/environment.ts` file.

The application exposes these variables in the browser, and that's fine as Supabase enables [Row Level Security](/docs/guides/database/postgres/row-level-security) by default on all tables.

<$CodeSample
path="/user-management/angular-user-management/src/environments/environment.ts"
lines={[[1, -1]]}
meta="name=src/environments/environment.ts"
/>

With the API credentials in place, create a `SupabaseService` with `ng g s supabase` and add the following code to initialize the Supabase client and implement functions to communicate with the Supabase API.

<$CodeSample
path="/user-management/angular-user-management/src/app/supabase.service.ts"
lines={[[1, -1]]}
meta="name=src/app/supabase.service.ts"
/>

Optionally, update `src/styles.css` to style the app. You can find the full contents of this file [in the example repository](https://github.com/supabase/supabase/tree/master/examples/user-management/angular-user-management/src/styles.css).

### Set up a login component

You need an Angular component to manage logins and sign ups. The component uses [Magic Links](/docs/guides/auth/auth-email-passwordless#with-magic-link), so users can sign in with their email without using passwords.

<Admonition type="note" title="Did you know?">

You can customize other emails sent out to new users, including the email's looks, content, and query parameters from [the **Authentication > Email**](/dashboard/project/_/auth/templates) section of the Dashboard.

</Admonition>

Create an `AuthComponent` with the `ng g c auth` Angular CLI command and add the following code.

<$CodeTabs>

<$CodeSample
path="/user-management/angular-user-management/src/app/auth/auth.component.ts"
lines={[[1, -1]]}
meta="name=src/app/auth/auth.component.ts"
/>

<$CodeSample
path="/user-management/angular-user-management/src/app/auth/auth.component.html"
lines={[[1, -1]]}
meta="name=src/app/auth/auth.component.html"
/>

</$CodeTabs>

### Account page

Users also need a way to edit their profile details and manage their accounts after signing in. Create an `AccountComponent` with the `ng g c account` Angular CLI command and add the following code.

<$CodeTabs>

<$CodeSample
path="/user-management/angular-user-management/src/app/account/account.component.ts"
lines={[[1, 16], [27, -1]]}
meta="name=src/app/account/account.component.ts"
/>

<$CodeSample
path="/user-management/angular-user-management/src/app/account/account.component.html"
lines={[[1, 1], [3, -1]]}
meta="name=src/app/account/account.component.html"
/>

</$CodeTabs>

## Profile photos

Add a way for users to upload a profile photo. Supabase configures every project with [Storage](/docs/guides/storage) for managing large files like photos and videos.

### Create an upload widget

Create an `AvatarComponent` with the `ng g c avatar` Angular CLI command and add the following code.

<$CodeTabs>

<$CodeSample
path="/user-management/angular-user-management/src/app/avatar/avatar.component.ts"
lines={[[1, -1]]}
meta="name=src/app/avatar/avatar.component.ts"
/>

<$CodeSample
path="/user-management/angular-user-management/src/app/avatar/avatar.component.html"
lines={[[1, -1]]}
meta="name=src/app/avatar/avatar.component.html"
/>

</$CodeTabs>

### Update the Account component

With the Avatar component created, update `AccountComponent` to include it:

<$CodeTabs>

<$CodeSample
path="/user-management/angular-user-management/src/app/account/account.component.ts"
lines={[[1, -1]]}
meta="name=src/app/account/account.component.ts"
/>

<$CodeSample
path="/user-management/angular-user-management/src/app/account/account.component.html"
lines={[[1, -1]]}
meta="name=src/app/account/account.component.html"
/>

</$CodeTabs>

You also need to change `app.module.ts` to include the `ReactiveFormsModule` from the `@angular/forms` package.

<$CodeSample
path="/user-management/angular-user-management/src/app/app.module.ts"
lines={[[1, -1]]}
meta="name=src/app/app.module.ts"
/>

### Launch!

With all the components in place, change the contents of `AppComponent` to include the new components and Auth logic:

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

<$CodeTabs>

<$CodeSample
path="/user-management/angular-user-management/src/app/app.component.ts"
lines={[[1, -1]]}
meta="name=src/app/app.component.ts"
/>

<$CodeSample
path="/user-management/angular-user-management/src/app/app.component.html"
lines={[[1, -1]]}
meta="name=src/app/app.component.html"
/>

</$CodeTabs>

Now run the application in a terminal:

```bash
npm run start
```

Open the browser to [localhost:4200](http://localhost:4200) and you should see the completed app.

![Screenshot of the Supabase Angular application running in a browser](/docs/img/supabase-angular-demo.png)

At this stage you have a fully functional application!