# 3.2: Client-side Login

## Add User and AuthUser models

1. In your app folder, create a new folder called `models.`
2. Add a new file called `User.ts with the following code:`

```typescript
export interface User {
    id: number;
    username: string;
}
```

1. Then add another file called `AuthUser.ts`

```typescript
import { User } from './User';

export interface AuthUser {
    tokenString: string;
    user: User;
}
```

## Import HttpClient

1. In your `app.module.ts` add an import for the `HttpClientModule` after the `BrowserModule`:

```typescript
import { HttpClientModule } from '@angular/common/http';

// ...
    imports: [
        BrowserModule,
        // import HttpClientModule after BrowserModule.
        HttpClientModule,
    ],
```

## Angular AuthService

1. In the project root of your `SPA` project run this command to generate a services folder and an `auth.service.ts:`

```
ng g s services/auth --no-spec
```

1. In your new `auth.service.ts` file - import the `HttpClient`, `HttpHeaders`, our `AuthUser`, and the `rxjs map` operator
   1. Also, inject the HttpClient into the constructor. See the code below:

```typescript
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthUser } from '../models/AuthUser';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthService {
  constructor(private _http: HttpClient) { }
}
```

1. Add a property called `baseUrl` set to the auth endpoint and a property called `userToken` of type any:

```typescript
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { AuthUser } from '../models/AuthUser';
import 'rxjs/add/operator/map';

@Injectable()
export class AuthService {
  baseUrl = 'http://localhost:5000/api/auth/';
  userToken: any;

  constructor(private _http: HttpClient) { }
}
```

1. Next, let's go ahead and register our service in `app.module.ts` in the providers array:

```typescript
import { AuthService } from './services/auth.service';

// ...

  providers: [
    AuthService
  ],
```

## Login Method

1. Now, we're ready to write our `login()` method in `auth.service.ts`:  \<!-- \`\`\`typescript login(model: any) { return this.\_http.post(this.baseUrl + 'login', model, { headers: new HttpHeaders() .set('Content-Type', 'application/json') }) .map(user => { if (user) { localStorage.setItem('token', user.tokenString); this.userToken = user.tokenString; } }); }

   ````
   <!-- The code below functions in rxjs version 6 -->
   ```typescript
   login(model: any) {
    return this._http.post<AuthUser>(this.baseUrl + 'login', model, {
      headers: new HttpHeaders()
        .set('Content-Type', 'application/json')})
        .pipe(map(user => {
          if (user) {
            console.log('this works');
            localStorage.setItem('token', user.tokenString);
            this.userToken = user.tokenString;
          }
        }));
   }
   ````

   **Using the AuthService in our Nav Component**
2. In the `nav.component.ts` file, inject the `AuthService` into the constructor. We'll make it public here because we'll use it in the template.
3. Modify the `login()` method to use our `AuthService`.
4. We'll still log our result to the console (and also an error message) for testing purposes.

```typescript
constructor(public authService: AuthService) { }

ngOnInit() {
}

login() {
    this.authService.login(this.model).subscribe(data => {
        console.log('logged in successfully');
    }, error => {
        console.log('Failed to login');
    });
}
```

## Testing the Login Method

We need to start up our `.API` project and our `SPA` project. Preferences may vary - you can decide between the built-in terminal in VS Code or using a separate terminal.

Navigate to your two projects and start up the servers

```
dotnet watch run
```

```
ng serve
```

With your browser's console open, enter an actual username and password that you know is saved to your database.

You should get the `logged in successfully` message:

![LoggedIn](/files/-LEoXDaHF54tuPeN9Lug)

Now, navigate to the network tab in your developer tools.

You should see the `200 Ok` response.

![post](/files/-LEoXDaLVXvstIVr3nhv)

If you're using Google Chrome - click on the `Application` tab and then `Local Storage` and verify that our token is being stored in the browser's storage:

Chrome:

![localstorage](/files/-LEoXDaQJUsUF2oGdHpW)

If you're using Firefox, click the `Storage` tab and then `Local Storage`:

Firefox:

![localstoragefirefox](/files/-LEoXDaU2R9xWlgKMsU1)

Nice job! Logging in works!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://eleven-fifty-academy.gitbook.io/dotnet-302-core/3-client-side-login-and-register/3.2-client-side-login.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.