Next.js 13 w Praktyce: Czym jest Clerk i setup aplikacji

0:00Bazowy routing naszej aplikacji mamy już za sobą.

0:03Teraz zajmiemy się autoryzacją i uwierzytelnianie użytkowników.

0:07Do tego celu wykorzystamy gotowe rozwiązanie w postaci Clark.

0:12Pewnie przyjdzie Ci na myśl jedna rzecz,

0:14że generalnie korzystając z gotowych rozwiązań, całe dane naszych użytkowników

0:18pozostają po stronie dostawcy danego rozwiązania.

0:22Jest to w tym przypadku jak najbardziej prawda.

0:25Natomiast dlaczego korzystamy tutaj z gotowego rozwiązania?

0:29Po pierwsze, budowanie swojego rozwiązania

0:31do autoryzacji autentykacji użytkowników byłoby naprawdę czasochłonne.

0:35Prawdopodobnie nie zmieścili byśmy się

0:38tutaj w ramach naszego kursu czasu przeznaczonego na ten kurs.

0:41Po drugie ja jestem fanem wykorzystywania gotowych rozwiązań na początku pisania czy

0:48to Twojego startupu, czy to swojego swojej aplikacji.

0:52Dlatego, że generalnie na początku staramy się integrować, dość

0:56szybko pokazywać nowe funkcjonalności naszym użytkownikom i zbadać, czy

1:01rzeczywiście jest zapotrzebowanie na nasz produkt.

1:03Dlatego też staram się właśnie pokazać tą

1:06drogę, którą wykorzystujemy gotowe rozwiązania.

1:09Natomiast jeżeli chodzi o ten minus, który przytoczyłem na początku, czyli

1:13dane naszych użytkowników są zapisywane po stronie Clark.

1:17Nie jest to do końca minus w tym

1:18przypadku, bo pokażę Ci sposób w jaki możesz za pomocą web kroków, które są

1:23dostarczane do tej aplikacji Clark Web póki możesz wykorzystać do tego, żeby w

1:27momencie, kiedy jest zakładane konto po stronie właśnie Clark konto użytkownika.

1:34Jeżeli ktoś nowy loguje się do Twojej aplikacji.

1:36Możesz do tego wykorzystać Web Kuki, żeby w tym samym czasie zapisać czy to ID

1:41danego użytkownika, stworzyć nową encje użytkownika w Twojej bazie danych.

1:45Generalnie finalnie nie będzie się to za dużo różniło, poza tym, że masz tutaj

1:49fajne rozwiązanie, które pozwoli Ci zarządzać tymi użytkownikami.

1:53Łatwo ich banować, łatwo ich usuwać.

1:55Natomiast jeżeli chcielibyśmy takie

1:56rozwiązanie napisać samemu panel admina do naszej aplikacji,

2:01to potrzebowalibyśmy znacznie dłuższego czasu niż jest to przewidziane.

2:05Ten kurs także.

2:06Przejdź sobie teraz do Dashboard, załóż sobie konto na.

2:09Prawdopodobnie będziesz mógł się zalogować to git hubem czy kontem na google?

2:13Jak przejdę sobie do dashboard tutaj,

2:16no to tutaj jest moment, w którym możemy sobie stworzyć aplikację.

2:19I generalnie rzecz biorąc jeżeli chodzi o

2:21stworzenie aplikacji w Clark to nie jest to za bardzo skomplikowane.

2:25Po prostu klikamy Add Application i wyskakuje nam taki pierwszy panel, w

2:30którym musimy sobie wpisać nazwę naszej aplikacji.

2:33A tutaj piszę do Web Pocket Cap.

2:36I jeżeli chodzi o zaznaczone opcje jak chcemy

2:40żeby nasi użytkownicy mogli się rejestrować w naszej aplikacji

2:44to myślę, że email address jest najbardziej popularną opcją.

2:48Ja dodaję jeszcze username i password, natomiast password

2:53możemy sobie dodać za chwilkę w ustawieniach naszej aplikacji, że

2:57username będzie mógł logować się za pomocą swojego swojego hasła.

3:01Natomiast przy rejestracji użytkownika będziemy wysyłać kod do autentykacji.

3:06Będzie to email wery fiction kod i tutaj

3:08też dostarcza nam gotowe rozwiązanie do tego, żebyśmy mogli

3:12taki kod wysyłać do naszych użytkowników i żeby mogli dostawać kod w momencie, w

3:17którym będą rejestrować się naszej pracy aplikacji.

3:20Zacznę sobie na razie te dwie opcje.

3:21Wpisz sobie nazwę swojej aplikacji i klikamy Create application.

3:25W tym momencie zostaniemy przeniesieni tutaj na dashboard.

3:28Jak widzisz tutaj od razu mamy Quick Start Guide.

3:32Jak?

3:32W jaki sposób możemy sobie zrobić setup tej aplikacji I najpierw przejdziemy sobie

3:37jednak tutaj do User authentication i sekcja Email Username.

3:43Ja chcę żebyś miał tutaj zaznaczone właśnie te opcje, czyli username,

3:46password, email, adres i email weryfikacja jak wygląda flow w tym momencie.

3:52W momencie w którym użytkownik będzie rejestrował się na naszą aplikację, będzie

3:56podawał swój adres email i nazwę użytkownika.

4:00Generalnie będzie dostawał kod z

4:02weryfikacji z kodem weryfikacyjne i w tym momencie będzie mógł sobie zalogować się

4:07na swoje konto pierwszy raz ustawić swój password.

4:12Za każdym kolejnym razem po zweryfikowaniu takiego konta

4:15użytkownik już będzie mógł się logować swoją nazwą użytkownika i hasłem.

4:19Przejdźmy teraz do etapu tego w naszej aplikacji, czyli wróćmy sobie jeden link

4:23wcześniej, gdzie mieliśmy taki Quick Start Guide.

4:26I mamy. Tutaj musimy sobie wkleić przede wszystkim

4:29te dwa klucze, które mamy podane za pomocą właśnie twórców.

4:33Tutaj bardzo łatwo możemy sobie zrobić kopię.

4:35Ja sobie teraz zrobię kopi i przejdę sobie

4:37do naszej aplikacji do pliku i wklejamy sobie nasz sekret.

4:43Ze względu na to, że to są sekrety po

4:45prostu zasłonie to nie będziesz widzieć dokładnie wartości.

4:48Natomiast powinieneś mieć też trzy takie wartości w swoim pliku doc.

4:52Mianowicie powinieneś mieć Next public publisher bloki.

4:57I jeszcze krótki.

4:59To powinny być trzy opcje, które na chwilę obecną powinieneś mieć w swoim pliku EMF.

5:05Zamykamy nasz plik do TEN.

5:06Wróćmy na nasze serca i dajemy Continue Index.

5:12Mamy już wklejone to co potrzebujemy do autentykacji naszego użytkownika.

5:16I teraz jeżeli chodzi o start z Nexto jest jest on bardzo prosty.

5:21Musimy sobie tak naprawdę zainstalować paczkę o nazwie Clark Nexto.

5:26Jest to teraz sobie zrobimy.

5:28Ja sobie zmniejszę to okienko, a tutaj na lewą stronę damy sobie nasz terminal.

5:33I w tym momencie wszystkie zmiany, które będziemy teraz wprowadzę związane z

5:37autentykacji znajdziesz pod Branham w ficzer cloud.

5:40Jeżeli utkniesz

5:41po ostatniej lekcji, możesz się cofnąć na tamtą lekcję i zobaczyć sobie te zmiany.

5:46Ja teraz sobie zainstaluje paczkę tle.

5:50Jest kolejną rzeczą jak zainstalujemy paczkę.

5:54Mamy dodanie naszych kluczy.

5:55Klucze już sobie dodaliśmy.

5:56Teraz musimy zamontować provider.

5:59W naszej aplikacji

6:01jest to pokazane żeby to zrobić w pliku głównym naszym Apple Route.

6:07Natomiast my sobie możemy też stworzyć plik provider, który będzie do tego, żeby

6:11robić wszystkie nasze provider, które będziemy używać w naszej aplikacji.

6:14Lubię tę konwencję z tego względu, że

6:16później mam jedno miejsce, w którym mam wszystkie swoje providerów.

6:19Natomiast my, żeby po prostu utrzymywać wszystko jak najprościej,

6:24kopiujemy sobie rozwiązanie, które tutaj jest dane nam przez twórców, czyli

6:27opracujemy sobie w naszym layoucie klik liderem save body naszych stron,

6:34czyli przejdziemy do naszego edytora kodu i mamy tutaj nasz główny layout.

6:39Musimy sobie ten HTML teraz opakować w provider.

6:43Jeżeli wszystko sobie zrobiliśmy dobrze,

6:45to jesteśmy w stanie teraz zaimportować ten provider.

6:49Zmian jeszcze się nie propagowała, dlatego też wróćmy do dokumentacji.

6:55Powinniśmy sobie zaimportować ten provider właśnie z paczki sklep.

7:01Zapiszemy sobie nasze zmiany i wszystko jest w porządku.

7:04Mamy już przygotowaną naszą aplikację do tego, żeby korzystać z sesji.

7:08I teraz, żeby

7:10chronić naszą aplikację, musimy sobie zrobić numer, który będzie odpowiadał

7:14odpowiedzialny za to, żeby przekierowywać użytkowników, którzy wskoczą na naszą

7:19stronę do odpowiednich stron, które nie są chronione.

7:25Dlatego też musimy sobie stworzyć plik TTS.

7:28Zróbmy to teraz w lutowym folderze tutaj naszego projektu.

7:33W folderze root tworzę sobie metody over this i tutaj do tego middleware możemy

7:38sobie na chwilę obecną wkleić przykładową wartość.

7:42W tym momencie możemy przejść do budowy Sign in Inside page.

7:47Natomiast jeszcze zanim zaznaczymy sobie tutaj Web app

7:51za pomocą konfiguracji jakie luty będą otwartymi wrotami, jakie będą zamknięte.

7:56Bo tak jak mówiłem w poprzedniej lekcji,

7:59jeżeli chodzi o wszystkie marketing pages, chcemy żeby one było otwarte.

8:02Nie jest potrzebne logowanie się, zakładanie konta.

8:05Chcemy umożliwić użytkownikom, którzy

8:08odwiedzają naszą aplikację, żeby mogli sobie poczytać na temat ficzerów, zobaczyć

8:12z czym to się je, do czego jest nasza aplikacja potrzebna.

8:15Dlatego teraz tutaj dodamy sobie odpowiednią konfigurację i zaznaczymy,

8:19które roboty są zamknięte, które są otwarte.

8:22I tutaj możemy sobie stworzyć kontekst

8:24public cross i to w formie tablicy robotów, które są publiczne, publiczne.

8:32Możemy sobie zrobić coś takiego jeszcze.

8:34Chcemy, żeby blog był ruchem publicznym w naszym przypadku, bo póki co w Marketing

8:38mamy stronę, blog i główną stronę naszej aplikacji.

8:43Zapiszemy sobie to teraz tutaj.

8:45I żeby to użyć to musimy zrobić Export

8:48Default out middleware i tutaj jako opcję musimy sobie podać public rules.

8:55W tym momencie mówimy

8:57Jarkowi, że słuchaj, te tutaj route nie są wrotami od których wymaga.

9:03Wymagamy zakładania konta, tylko to są

9:06publiczne roboty, które generalnie powinny funkcjonować zawsze,

9:09niezależnie od tego, czy użytkownik jest zalogowany czy nie.

9:13Sprawdźmy sobie już teraz, czy dostajemy

9:15feedback od Jarka w naszej aplikacji i uruchomimy sobie naszą aplikację NPM.

9:20Rundę mamy na localhost 3000.

9:24Odpalamy naszą aplikację localhost 3000 i zobaczymy czy generalnie na robocie nie

9:31powinniśmy dostać żadnego tutaj żadnej informacji.

9:34Natomiast jeżeli spróbujemy sobie przejść

9:37na dashboard to już powinniśmy dostać jakiś błąd.

9:42Jesteśmy przekierowany na domyślny, jakby domyślną stronę, która pozwala nam zrobić

9:49sign in naszego użytkownika i to jest jako domyślny adres tutaj.

9:54Zobaczmy ten adres.

9:56Generalnie to jest.

10:00To jest adres, który jest wygenerowany dla nas przez kler.

10:03Natomiast my sobie zrobię swoje sign sign up.

10:07I tym zajmiemy się teraz w kolejnej części.