Фиребасе пружа услуге аутентикације које вам омогућавају да лако региструјете и пријавите кориснике. Можете да користите е-пошту, лозинке, бројеве телефона и добављаче идентитета као што су Гоогле и Фацебоок.

У овом водичу ћете научити како можете да користите Фиребасе аутентификацију у Реацт-у за аутентификацију корисника помоћу е-поште и лозинке. Корисничке податке прикупљене у Фиресторе-у, НоСКЛ бази података у облаку, такође ћете чувати из Фиребасе-а.

Имајте на уму да овај водич користи Фиребасе в9 и Реацт Роутер в6.

Направите Фиребасе апликацију

Да бисте повезали своју апликацију са Фиребасе, региструјте своју апликацију у Фиребасе-у да бисте добили објекат конфигурације. Ово је оно што ћете користити за иницијализацију Фиребасе-а у вашој Реацт апликацији.

Да бисте креирали Фиребасе апликацију, следите следеће кораке.

1. Пређите на Фиребасе конзола и кликните Креирајте пројекат.
2. Дајте свом пројекту име и кликните Креирај да започне процес.
3. Кликните на Веб икона (
4. Дајте својој апликацији име по свом избору и кликните Региструјте апликацију. Не морате да омогућите Фиребасе хостинг.
instagram viewer
5. Копирајте објекат конфигурације испод Додајте Фиребасе СДК.

Направите Реацт апликацију

Користите цреате-реацт-апп да поставите Реацт апликацију.

нпк цреате-реацт-апп реацт-аутх-фиребасе

Идите до фасцикле и покрените апликацију.

цд реацт-аутх-фиребасе
нпм рун старт

Аутентификујте кориснике са Фиребасе функцијама

Пре коришћења Фиребасе-а, инсталирајте га.

нпм и фиребасе

Креирајте нову датотеку, фиребасе.јс, и иницијализујте Фиребасе.

импорт { инитиализеАпп } из "фиребасе/апп";
цонст фиребасеЦонфиг = {
 апиКеи: ,
 аутхДомаин: ,
 ИД пројекта: ,
 сторагеБуцкет: ,
 мессагингСендерИд: ,
 аппИд: 
};
// Иницијализирај Фиребасе
цонст апп = инитиализеАпп (фиребасеЦонфиг);

Користите објекат конфигурације који сте копирали када сте регистровали апликацију.

Затим увезите Фиребасе модуле које ћете користити.

увоз {
 гетАутх,
 цреатеУсерВитхЕмаилАндПассворд,
 сигнИнВитхЕмаилАндПассворд,
 Одјава,
} из "фиребасе/аутх";
импорт { гетФиресторе, аддДоц, цоллецтион } из "фиребасе/фиресторе";
цонст дб = гетФиресторе();
цонст аутх = гетАутх();

До аутентификују кориснике, потребно је да креирате три функције: пријављивање, пријављивање и одјава.

Тхе пријави се функција прослеђује е-пошту и лозинку цреатеУсерВитхЕмаилАндПассворд да региструјете новог корисника. цреатеУсерВитхЕмаилАндПассворд враћа корисничке податке које ћете користити за креирање новог корисничког записа у бази података.

цонст сигнУп = асинц (е-пошта, лозинка) => {
 покушати {
 цонст усерЦредентиал = аваит цреатеУсерВитхЕмаилАндПассворд(
 аутх,
 емаил,
 Лозинка
 );
 цонст усер = усерЦредентиал.усер;
 аваит аддДоц (колекција (дб, "усерс"), {
 уид: усер.уид,
 емаил: усер.емаил,
 });
 врати истинито
 } ухватити (грешка) {
 врати {еррор: еррор.мессаге}
 }
};

Имајте на уму да не проверавате да ли се имејл већ користи пре регистрације јер Фиребасе то решава уместо вас.

Следеће, у Пријавите се функција проследи е-пошту и лозинку на сигнИнВитхЕмаилАндПассворд функција за пријављивање регистрованог корисника.

цонст сигнИн = асинц (е-пошта, лозинка) => {
 покушати {
 цонст усерЦредентиал = чекај сигнИнВитхЕмаилАндПассворд(
 аутх,
 емаил,
 Лозинка
 );
 цонст усер = усерЦредентиал.усер;
 врати истинито
 } ухватити (грешка) {
 врати {еррор: еррор.мессаге}
 }
};

И функције пријаве и одјаве враћају тачно ако су успешне и поруку о грешци ако дође до грешке.

Функција одјављивања је прилично једноставна. То зове Одјава() функција из Фиребасе-а.

цонст сигнОут = асинц() => {
 покушати {
 сачекајте одјаву (аутх)
 врати истинито
 } ухватити (грешка) {
 врати фалсе
 }
};

Креирајте Реацт форме

Обрасци за пријаву и регистрацију ће прикупити е-пошту и лозинку од корисника.

Креирајте нову компоненту Сигнуп.јс и додати следеће.

импорт { усеСтате } из "реацт";
импорт { Линк } из "реацт-роутер-дом";
импорт { сигнУп } из "./фиребасе";
цонст Пријава = () => {
 цонст [емаил, сетЕмаил] = усеСтате("");
 цонст [пассворд, сетПассворд] = усеСтате("");
 цонст [грешка, сетеррор] = усеСтате("");
 цонст хандлеСубмит = асинц (е) => {
 е.превентДефаулт();
 иф (лозинка !== лозинка2) {
 сетеррор("Лозинке се не поклапају");
 } остало {
 сетЕмаил("");
 постави лозинку("");
 цонст рес = чекај регистрацију (е-пошта, лозинка);
 иф (рес.еррор) сетеррор (рес.еррор)
 }
 };
 повратак (
 <>
Пријави се



 {грешка? 
{еррор}
: нула}


 типе="е-маил"
 наме="е-маил"
 валуе={емаил}
 плацехолдер="Ваша е-пошта"
 потребан
 онЦханге={(е) => сетЕмаил (е.таргет.валуе)}
 />
 типе="пассворд"
 наме="лозинка"
 вредност={лозинка}
 плацехолдер="Ваша лозинка"
 потребан
 онЦханге={(е) => сетПассворд (е.таргет.валуе)}
 />
прихвати




 већ регистровани? Пријавите се





 );
};
извоз подразумевана регистрација;

Овде креирате образац за регистрацију и пратите имејл и лозинку користећи стање. Када пошаљете образац, онСубмит догађај покреће хандлеСубмит() функција која позива пријави се() функција од фиребасе.јс. Ако функција врати грешку, ажурирајте стање грешке и прикажите поруку о грешци.

За образац за пријаву, креирајте Сигнин.јс и додати следеће.

импорт { усеСтате } из "реацт";
импорт { сигнИн } из "./фиребасе";
цонст Логин = () => {
 цонст [емаил, сетЕмаил] = усеСтате("");
 цонст [пассворд, сетПассворд] = усеСтате("");
 цонст [грешка, сетеррор] = усеСтате("");
 цонст хандлеСубмит = асинц (е) => {
 е.превентДефаулт();
 сетЕмаил("");
 постави лозинку("");
 цонст рес = чекај пријаву (е-пошта, лозинка);
 иф (рес.еррор) сетеррор (рес.еррор);
 };
 повратак (
 <>
 {грешка? 
{еррор}
: нула}


 типе="тект"
 наме="е-маил"
 валуе={емаил}
 плацехолдер="Ваша е-пошта"
 онЦханге={(е) => сетЕмаил (е.таргет.валуе)}
 />
 типе="пассворд"
 наме="лозинка"
 вредност={лозинка}
 плацехолдер="Ваша лозинка"
 онЦханге={(е) => сетПассворд (е.таргет.валуе)}
 />




 );
};
екпорт дефаулт Логин;

Образац за пријаву је прилично сличан страници за регистрацију осим што подношење позива Пријавите се() функција.

На крају, направите страницу профила. Ово је страница на коју ће апликација преусмерити кориснике након успешне аутентификације.

Креирај Профиле.јс и додати следеће.

импорт { сигнОут } фром "./фиребасе";
цонст Профил = () => {
 цонст хандлеЛогоут = асинц () => {
 аваит сигнОут();
 };
 повратак (
 <>
Профил

Одјавити се
 );
};
извоз подразумеваног профила;

У овој компоненти имате наслов Профил и дугме за одјаву. Тхе онЦлицк руковалац на дугмету покреће хандлеЛогоут функција која одјављује корисника.

Креирајте руте за аутентификацију

Да бисте приказивали странице које сте креирали у претраживачу, подесите реацт-роутер-дом.

Инсталирај реаговати-рутер-дом:

нпм и реагују-рутер-дом

Ин индек.јс, конфигурисати реаговати-рутер-дом:

импорт Реацт фром "реацт";
импорт РеацтДОМ из "реацт-дом";
импорт { БровсерРоутер, Роутес, Роуте } из "реацт-роутер-дом";
увоз апликације из "./Апп";
импорт Логин фром "./Логин";
импорт Профиле из "./Профиле";
РеацтДОМ.рендер(




} />
} />
} />



,
 доцумент.гетЕлементБиИд("роот")
);

До ове тачке, апликација може регистровати корисника, пријавити га и одјавити. Дакле, како знате да ли је корисник пријављен или не?

У следећем одељку овог упутства видећете како можете да користите Реацт контекст да бисте пратили статус аутентификације корисника у целој апликацији.

Управљајте аутентификацијом помоћу Реацт Цонтект АПИ-ја

Реацт Цонтект је алатка за управљање стањем која поједностављује дељење података између апликација. То је боља алтернатива бушењу подупирача, где подаци пролазе низ стабло од родитеља до детета док не стигну до компоненте којој су потребни.

Креирајте контекст за аутентификацију

У срц фолдер, додај АутхЦонтект.јс датотеку и креирање и извоз АутхЦонтект.

импорт { цреатеЦонтект } из "реацт";
цонст АутхЦонтект = цреатеЦонтект();
извоз подразумевани АутхЦонтект;

Затим креирајте провајдера у АутхПровидер.јс. То ће омогућити коришћење компоненти АутхЦонтект.

импорт { гетАутх, онАутхСтатеЦхангед } из "фиребасе/аутх";
импорт { усеСтате, усеЕффецт } из 'реацт';
увези АутхЦонтект из './АутхЦонтект'
цонст аутх = гетАутх()
екпорт цонст АутхПровидер = ({ деца }) => {
 цонст [усер, сетУсер] = усеСтате (нулл);
 усеЕффецт(() => {
 онАутхСтатеЦхангед (аутх,(усер) => {
 сетУсер (корисник)
 })
 }, []);
повратак (
{деца}
 );
 };

Овде добијате корисничку вредност коришћењем онАутхСтатеЦхангед() метод из Фиребасе-а. Овај метод враћа кориснички објекат ако аутентификује корисника и нулл ако не може. Коришћењем усеЕффецт() кука, корисничка вредност се ажурира сваки пут када се промени статус аутентификације.

Ин индек.јс, омотајте руте са АутхПровидер да би се осигурало да све компоненте приступају кориснику у контексту:

импорт { АутхПровидер } из "./АутхПровидер";
РеацтДОМ.рендер(




} />
} />
} />



 ,
,
 доцумент.гетЕлементБиИд("роот")
);

Креирајте заштићене руте

До заштити осетљиве руте, проверите статус аутентификације корисника који покушава да дође до заштићене странице као што је страница профила.

Модификовати Профиле.јс да преусмери корисника ако није аутентификован.

импорт { усеЦонтект } из "реацт";
импорт АутхЦонтект из "./АутхЦонтект";
импорт { усеНавигате, Навигате } из "реацт-роутер-дом";
импорт { сигнОут } фром "./фиребасе";
цонст Профил = () => {
 цонст { усер } = усеЦонтект (АутхЦонтект);
 цонст навигате = усеНавигате();
 цонст хандлеЛогоут = асинц () => {
 аваит сигнОут();
 };
 ако (!корисник) {
 повратак ;
 }
 повратак (
 <>
Профил

Одјавити се
 );
};
извоз подразумеваног профила;

Апликација условно пружа страницу профила преусмеравањем корисника на страницу за пријаву ако није аутентификован.

Идемо даље са Фиребасе аутентификацијом

У овом водичу сте користили Фиребасе за аутентификацију корисника помоћу њихове е-поште и лозинке. Такође сте креирали корисничке записе у Фиресторе-у. Фиребасе пружа функције за рад са добављачима аутентификације као што су Гоогле, Фацебоок и Твиттер.

10 најбољих пракси Реацт-а које треба да следите у 2022

Реад Нект

О аутору