There are two ways to add authentication capabilities to your application.

1. [Use pre-built UI components](#option-1-use-pre-built-ui-components)

2. [Call Authentication APIs manually](#option-2-call-authentication-apis-manually)

## Option 1: Use pre-built UI components

Creating the login flow can be quite difficult and time consuming to get right. Amplify has authentication UI components you can use that will provide the entire authentication flow for you, using your configuration specified in your __aws-exports.js__ file.

Amplify has pre-built UI components for React, Vue, Angular and React Native.

<BlockSwitcher>
<Block name="React">

First, install the `@aws-amplify/ui-react` library as well as `aws-amplify` if you have not already:

```sh
npm install aws-amplify @aws-amplify/ui-react
```

Next, open __src/App.js__ and add the `withAuthenticator` component.

**withAuthenticator**

import all1 from "/src/fragments/ui/auth/react/withauthenticator.mdx";

<Fragments fragments={{all: all1}} />

</Block>
<Block name="Vue 3">

First, install the `@aws-amplify/ui-vue` library as well as `aws-amplify` if you have not already:

```bash
npm install aws-amplify @aws-amplify/ui-vue
```

Next, open __src/App.js__ and add the `Authenticator` component.

**Authenticator**

The `Authenticator` component offers a simple way to add authentication flows into your app. This component encapsulates an authentication workflow in the framework of your choice and is backed by the cloud resources set up in your Auth cloud resources. You’ll also notice that `user` and `signOut` are passed to the inner template.

```html
<script setup>
  import { Authenticator } from "@aws-amplify/ui-vue";
  import "@aws-amplify/ui-vue/styles.css";

  import { Amplify } from 'aws-amplify';
  import awsconfig from './aws-exports';

  Amplify.configure(awsconfig);
</script>

<template>
  <authenticator>
    <template v-slot="{ user, signOut }">
      <h1>Hello {{ user.username }}!</h1>
      <button @click="signOut">Sign Out</button>
    </template>
  </authenticator>
</template>
```

</Block>
<Block name="Vue 2">

First, install the `@aws-amplify/ui-components` library as well as `aws-amplify` if you have not already:

```bash
npm install aws-amplify @aws-amplify/ui-components
```

Now open __src/main.js__ and add the following below your last import:

```js
import '@aws-amplify/ui-components';
import {
  applyPolyfills,
  defineCustomElements,
} from '@aws-amplify/ui-components/loader';
import Vue from 'vue';

Vue.config.ignoredElements = [/amplify-\w*/];


applyPolyfills().then(() => {
  defineCustomElements(window);
});
```

Next, open __src/App.js__ and add the `amplify-authenticator` component.

**amplify-authenticator**

The `amplify-authenticator` component offers a simple way to add authentication flows into your app. This component encapsulates an authentication workflow in the framework of your choice and is backed by the cloud resources set up in your Auth cloud resources. You’ll also notice the `amplify-sign-out` component. This is an optional component if you’d like to render a sign out button.

```html
<template>
  <amplify-authenticator>
    <div>
      My App
      <amplify-sign-out></amplify-sign-out>
    </div>
  </amplify-authenticator>
</template>
```

</Block>
<Block name="Angular">

First, install the `@aws-amplify/ui-angular` library as well as `aws-amplify` if you have not already:

```bash
npm install aws-amplify @aws-amplify/ui-angular
```

Now open __app.module.ts__ and add the Amplify imports and configuration:

```js
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';;
import { AmplifyAuthenticatorModule } from '@aws-amplify/ui-angular';

import { AppComponent } from './app.component';
import awsconfig from '../aws-exports';

Amplify.configure(awsconfig);

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AmplifyAuthenticatorModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

Next, import the default theme inside __styles.css__:

```css
@import '~@aws-amplify/ui-angular/theme.css';
````

Next, open __app.component.html__ and add the `amplify-authenticator` component.

**amplify-authenticator**

The `amplify-authenticator` component offers a simple way to add authentication flows into your app. This component encapsulates an authentication workflow in the framework of your choice and is backed by the cloud resources set up in your Auth cloud resources. You’ll also notice that `user` and `signOut` are provided to the inner template.

```html
<amplify-authenticator>
  <ng-template
    amplifySlot="authenticated"
    let-user="user"
    let-signOut="signOut"
  >
    <h1>Welcome {{ user.username }}!</h1>
    <button (click)="signOut()">Sign Out</button>
  </ng-template>
</amplify-authenticator>
```

</Block>
</BlockSwitcher>

## Option 2: Call Authentication APIs manually