# ProviderLogin component

**URL:** <https://forum.solidproject.org/t/providerlogin-component/1944>\
**Category:** Build a Solid App\
**Created:** [June 27, 2019, 3:01pm UTC](https://forum.solidproject.org/t/providerlogin-component/1944 "2019-06-27T15:01:49Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![hughgearse](https://avatars.discourse-cdn.com/v4/letter/h/f04885/32.png) [@hughgearse](https://forum.solidproject.org/u/hughgearse)\
**Post date:** [June 27, 2019, 3:01pm UTC](https://forum.solidproject.org/t/providerlogin-component/1944/1 "2019-06-27T15:01:49Z")

</div>

Hi

Can anyone point my to a sample usage of the ProviderLogin React component?

Thanks  
Des

---

<div class="post-metadata">

**Author:** ![james.martin](https://dub1.discourse-cdn.com/flex017/user_avatar/forum.solidproject.org/james.martin/32/439_2.png) [@james.martin](https://forum.solidproject.org/u/james.martin)\
**Post date:** [June 27, 2019, 5:29pm UTC](https://forum.solidproject.org/t/providerlogin-component/1944/2 "2019-06-27T17:29:40Z")

</div>

The ProviderLogin is used in the generated [sample application](https://generator.inrupt.com/welcome) found in the [generator-solid-react application](https://github.com/inrupt/generator-solid-react).

The usage is fairly simple - most of the parameters here are simply translations for labels (the component library does not assume any language and so all labels and text are passed in, so applications can both customize labels and add language support as needed.

```auto
 <ProviderLogin
              selectPlaceholder={t('login.selectPlaceholder')}
              inputPlaholder={t('login.inputPlaholder')}
              formButtonText={t('login.formButtonText')}
              btnTxtWebId={t('login.btnTxtWebId')}
              btnTxtProvider={t('login.btnTxtProvider')}
              className="provider-login-component"
              callbackUri={`${window.location.origin}/welcome`}
              errorsText={{
                unknown: t('login.errors.unknown'),
                webIdNotValid: t('login.errors.webIdNotValid'),
                emptyProvider: t('login.errors.emptyProvider'),
                emptyWebId: t('login.errors.emptyWebId')
              }}
              theme={{
                buttonLogin: 'ids-link',
                inputLogin: '',
                linkButton: ''
              }}
            />

```

The code usage above can be seen in the context of the generator [here](https://github.com/inrupt/generator-solid-react/blob/develop/generators/app/templates/src/containers/Login/login.component.js#L35).

[Usage documentation](https://github.com/inrupt/solid-react-components#providerlogin) can be seen in the components repo as well. Included is an optional list of providers, if you want to customize the provider dropdown list.

Hope this helps!

---

<div class="post-metadata">

**Author:** ![hughgearse](https://avatars.discourse-cdn.com/v4/letter/h/f04885/32.png) [@hughgearse](https://forum.solidproject.org/u/hughgearse)\
**Post date:** [June 27, 2019, 6:13pm UTC](https://forum.solidproject.org/t/providerlogin-component/1944/3 "2019-06-27T18:13:00Z")

</div>

That’s perfect!