Na o kile wa amogela sephuthelwana sa moagišani wa gago mojakong wa gago wa ka pele? (Mohlomongwe o bile o e butše ka phošo?) Mohlomongwe o šetše o na le voicemail e nago le tlhokomelo bakeng sa motho yo mongwe? Bjalo ka bahlami ba tirišo, ke mošomo wa gago go netefatša gore datha ye e nago le tlhokomelo yeo e bolokilwego ka tirišong ya gago ga e hwetše go išwa ka phošo go mokgatlo wo mongwe. Go na le dithekniki tše dintši tšeo di lego gona bakeng sa go boloka data ya bareki ka mo go šireletšegilego, gomme tše dintši di raragane kudu e bile go thata go di phethagatša. Ka kgopolo, motho a ka šireletša ya data ka moka ya bareki ka polokelongtshedimošo e tee - a boloka tlhamo ya tšobotsi e bonolo e bile e bolokegile. ke bokgoni bja go šireletša le go laola phihlelelo go mela ye e itšego ya datha ka gare ga tafola ya polokelo ya tshedimošo. Ke sedirišwa se maatla seo se go dumelelago go boloka datha ya gago ka moka ya bareki ka gare ga polokelo ya tshedimošo e tee ntle le go tshwenyega ka go dutla ga datha go ralala le diakhaonto. Le ge go le bjalo, go phethagatša RLS ka nepo e ka ba tshepedišo ye e hlalefetšago yeo e akaretšago go kopanya dintlha tša go tsena le ditumelelo tša gago tša polokelo ya tshedimošo. e nolofatša tshepedišo ye ka go kopanya ka go iketla netefatšo go tšwa go moabi wa gago wa OAuth le polokelo ya gago ya tshedimošo ya PostgreSQL. Tšhireletšo ya maemo a methaladi (RLS) Neon Authorize Neon Authorize e šomiša legato la gago la netefatšo leo le lego gona go hlaola modiriši yo mongwe le yo mongwe yo a tsenego gomme e tswalanya datha ka moka ka polokelongtshedimošo ya gago le mangwalo a bona a go tsena. Se se kgonthišetša gore ya data yeo e bolokilwego polokelong ya tshedimošo e ka fihlelelwa feela ke badiriši bao ba tsenego—le gore ke feela badiriši bao ba tsenego bao ba ka bonago data ya bona. Thuto ye e tla go sepetša ka mokgwa wa go aga tirišo ya Remix o šomiša Clerk bjalo ka legato la netefatšo. ke sedirišwa se se tumilego sa netefatšo ya mosediriši le taolo. O tla šomiša Neon Postgres bjalo ka legato la gago la datha gomme wa diriša Neon Authorize go šireletša datha ka moka ya moreki yo mongwe le yo mongwe yo a tsenego. Mothaladi wo mongwe le wo mongwe tafoleng o tla hlaola ID ya mosediriši, yeo e fiwago ke Mongwaledi. Ke fela bao ba netefaditšwego ka userID bao ba ka dirišanago le datha mothalong. Clerk Tirišo ya rena ya mohlala e bonolo—e rekota go tsena mo gongwe le mo gongwe ka gare ga polokelo ya tshedimošo ya RLS, e diriša userID. Ge letlakala le imetšwe, go tla bontšhwa go tsena ga mafelelo ga 10 ga modiriši yo a netefaditšwego, gomme ga go na datha ya mosediriši yo mongwe (yeo e bolokilwego tafoleng ye e swanago ya PostgreSQL) yeo e tlago tšwelela. A re thomeng! Go hlama tirišo ya Remix Thoma ka go hlama tirišo ya Remix le go tsenya dilo tše di ithekgilego ka go šomiša seripa sa khoutu ye e lego ka mo tlase. Bakeng sa ditaelo tše dingwe tše di tletšego, lebelela . tlhahlo ya go thoma ka pela ya Remix ##make a directory and initialise your NPM project mkdir neon-authorize-remix-clerk-app cd neon-authorize-remix-clerk-app npm init -y ## install runtime dependecies for Remix npm i @remix-run/node @remix-run/react @remix-run/serve isbot@4 react react-dom @remix-run/router drizzle-orm npm install @neondatabase/serverless npm install @clerk/remix npm i -D @remix-run/dev vite Ka ge Remix e šomiša Vite, sedirišwa sa go aga sa Javascript, hlama ka gare ga tšhupetšo ya modu: vite.config.js import { vitePlugin as remix } from "@remix-run/dev"; import { defineConfig } from "vite"; export default defineConfig({ plugins: [remix()], }); Pele re dira tlhabollo efe goba efe, re swanetše go hlama diakhaonto go Clerk le Neon go šomiša ditirelo tša bona: Go hlola ditiragalo tša Clerk le Neon Tlelereke Tsena go dashboard ya Clerk go hlama porojeke ye mpsha. Ka go sepelasepela ka go le letshadi, kgetha . Dinotlelo tša API Ka lepokising la Khopiša ka Pela, kgetha Hlakanya gape, gomme o kopiše diphetogo tša tikologo. Di kgomaretše ka gare ga faele ya ka gare ga khoutu ya gago. .env Ka go sepelasepela ka go le letshadi, kgetha “ ” . Dithempleite tša JWT. Bopa thempleite (ke reile ya ka leina la “ ”). neon-remix Khopiša gore o e šomiše ka morago. URL ya Ntlha ya Mafelelo ya JWKS Neon Tsena ka gare ga khonsule ya Neon gomme o hlame porojeke ye mpsha. Go tšwa go thepo ya go sepelasepela ya le letshadi, kgetha . Dumelela Hlama moabi yo mofsa gomme o kgomarele yeo o e kopišitšego go tšwa go Clerk pejana. URL ya Clerk JWKS Ge o šetše o hlotše mohlala, klika “Thoma.” Phanele ya ka thoko e tla bula ka letoto la magato a go phetha kopanyo ya gago ya Neon Authorize. Setup ya go thoma e go fa magato a go hloma porojeke ya motheo ya Dumelela le Clerk. 1. Set up Neon Extension and Roles Privileges. Run these steps in the Dashboard. 2. Grant privileges to the roles in the neondb database. Go hloma Tšhireletšo ya Maemo a Mothaladi Khoutu e filwego ke ya tirišo ya todos. Go e na le go diriša khoutu ya boilerplate yeo e filwego go tšwa go Neon bakeng sa tirišo ya todos, re tla hlama tafola ya gomme ra hloma RLS go yona. Bula Mohlakiši wa SQL ka go dashboard ya Neon gomme o sepele khoutu ye e lego ka mo tlase. Tafola ya e tla šomišwa go boloka dinako tša go tsena tša modiriši yo mongwe le yo mongwe. login_history login_history Hlokomela gore e na le dikholomo tše tharo fela: id, user_id, le login_at. Dikholomo tše pedi tša mafelelo di tla bontšha ditseno tša moragorago ka tirišong. login_history CREATE TABLE login_history ( id bigint generated by default as identity primary key, user_id text not null default (auth.user_id()), login_at timestamp not null default now() ); -- 1st enable row level security for your table ALTER TABLE login_history ENABLE ROW LEVEL SECURITY; -- 2nd create policies for your table CREATE POLICY "Individuals can add login." ON login_history FOR INSERT TO authenticated WITH CHECK ((select auth.user_id()) = user_id); CREATE POLICY "Individuals can view their own logins. " ON login_history FOR SELECT TO authenticated USING ((select auth.user_id()) = user_id); Oketša diphetogo tša tikologo tše di filwego go ya gago .env Ge megato ye ya go hloma e phethilwe, ya gago e swanetše go ba le diphetogo tše nne: tše pedi go tšwa go Clerk le tše pedi go tšwa go Neon: .env CLERK_PUBLISHABLE_KEY=pk_test_.... CLERK_SECRET_KEY=sk_test_... # Database owner connection string DATABASE_URL='postgresql://neondb_owner:...' # Neon "authenticated" role connection string DATABASE_AUTHENTICATED_URL='postgresql://authenticated@ep-... Go aga tirišo ya Remix Tirišo bjale e loketše go agwa. Khoutu e feletšego e hwetšagala go , eupša dikarolo tša bohlokwa kudu di hlaotšwe mo. Motheo wa tirišo o ka go : GitHub app/routes/_index.tsx export const loader: LoaderFunction = async (args) => { const { userId, getToken } = await getAuth(args); if (!userId) { return redirect("/sign-in"); } const authToken = await getToken(); console.log(userId); if (!authToken) { return null; } const DATABASE_AUTHENTICATED_URL= process.env.NEXT_PUBLIC_DATABASE_AUTHENTICATED_URL; try { const sql = neon(DATABASE_AUTHENTICATED_URL ?? '', { authToken, }); const loginResponse = await sql(`INSERT INTO login_history ("user_id") VALUES ($1) RETURNING *`,[userId]); // Retrieve last 10 logins const last10LoginsResponse = await sql(`SELECT * FROM login_history WHERE user_id = $1 ORDER BY login_at DESC LIMIT 10`, [userId]); console.log(`loginResponse: ${JSON.stringify(loginResponse)}`); return last10LoginsResponse as Array<LoginHistory>; } catch (error) { console.error(`Error inserting into login_history table: ${error.message}`); console.error(`Error details: ${JSON.stringify(error)}`); throw error; } } ka faeleng ya e phetha mešomo go seva pele e tšweletša letlakala la moreki. Ka tirišo ye, loader e dira bontši bja go phagamiša mo go boima ga tirišo. LoaderFunction _index.tsx Mošomo o thoma ka go lekola ge eba modiriši ga se a tsena gomme ka morago o lebiša modiriši letlakaleng la . Letlakala la go tsena le ka beakanywa ka go dashboard ya Mongwaledi go amogela mehuta ye e fapanego ya go tsena, go swana le go tsena ga Google le imeile: /sign-in Go hlama letlakala la go tsena, sepelasepela go dashboard ya Mongwaledi gomme o hlome mekgwa ya go tsena ye e nyakegago ya porojeke. Ge e le gore modiriši o tsene, mošomo o hwetša le go tšwa go Clerk. Ditekanyetšo tše di bohlokwa go netefatša gore modiriši o tsene, gomme ka morago o ka šomiša go tlatša mothalo wo mongwe le wo mongwe ka gare ga polokelo ya gago ya tshedimošo. userId authToken userId Gore o kgone go dira diphetogo go polokelo ya tshedimošo ye e šireleditšwego ka RLS, o swanetše go goga go tšwa go diphetogo tša tikologo. DATABASE_AUTHENTCATED_URL Logic ya motheo ya go phethagatša tšhireletšo ya RLS e ka gare ga . Mohlala wa SQL Neon o thongwa ka go šomiša diphetogo tša tikologo le leswao la auth. Mošomo wa o dira pitšo ya SQL gomme o tsenya user_id (le nako ya bjale) ka gare ga polokelo ya tshedimošo ya PostgreSQL, ka morago ga moo mošomo wa o botšiša DB bakeng sa dilogin tše 10 tša moragorago. LoaderFunction loginResponse last10LoginsResponse Mafelelong, e bušetšwa go tšwa mošomong wa loader. last10LoginsResponse Mošomo wa ka faeleng ya o tšweletša peakanyo ya letlakala bjalo ka ge go bontšhitšwe ka go seripa se se lego ka mo tlase: Index() _index.tsx export default function Index() { const logins = useLoaderData(); return ( <div> <h1>Signed in</h1> <p>You are signed in!</p> <p> <UserButton /></p> <div> <h1>Recent Logins</h1> {logins?.map((logins) => ( <li key={logins.id}> {logins.user_id} login at: {logins.login_at} </li> ))} </div> <p>< SignOutButton > Sign Out</ SignOutButton ></p> </div> ); } Khoutu ye e lego ka mo godimo e hwetša karabo go tšwa go , yeo e nago le dikeno tše 10 tša mafelelo tša go tsena. Karabo ye e aga letlakala leo le botšago modiriši gore o tsene, le lokeletša ditseno tša gagwe tša mafelelo tše 10, gomme le bontšha konope ya Tsena bjalo ka ge go bontšhitšwe ka mo tlase: LoaderFunction Mohlaleng wo, e bontšhwa gape go laetša gabotse gore ke fela datha ya go tsena ya modiriši yo a tsenego yeo e bonagalago. user_id Ka go šomiša lefasetere la go se tsebje, o ka tsena ka akhaonto ya bobedi ya Google, gomme wa lebelela datha ya lehlakore bakeng sa badiriši ba go fapana: Hlokomela gore dinako tša go tsena di a swana, eupša ka go šomiša Tšhireletšo ya Maemo a Mothaladi ka gare ga polokelo ya tshedimošo, o tla thibela go dutla ga datha go ralala le diakhaonto. Methaladi e ka ntšhwa fela le go bontšhwa bakeng sa modiriši yo a netefaditšwego. Mafetšo Go boloka datha e le poraebete ke taba ya tšhomišo ye bohlokwa. Bjalo ka ge dikgopelo gantši di boloka tshedimošo ya poraebete, e swanetše go šireletšwa go boloka datha ka diatleng tše di nepagetšego. Bareki ba na le ditšhireletšo tše ntši le tše ntši tša molao go swana le GDPR, gomme didirišwa tša go swana le Neon Authorize di dira gore go be bonolo go phethagatša Tšhireletšo ya Maemo a Mothaladi go šireletša datha ya moreki wa gago. Mo posong ye, re sepetše ka magato ao a nyakegago go kgontšha Tšhireletšo ya Maemo a Mothaladi ka gare ga polokelo ya tshedimošo ya Neon. Go šomiša RLS ka datha ya moreki wa rena go netefatša gore ke modiriši yo a tsenego fela yo a nago le mangwalo a go ntšha ya data ya gagwe. Oketša go tirišo ya gago lehono ka Neon. Tšhireletšo ya Llaga ya Mothaladi
