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.

Tšhireletšo ya maemo a methaladi (RLS) 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. Neon Authorize 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.

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. Clerk 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.

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 vite.config.js ka gare ga tšhupetšo ya modu:

 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.

1. Ka go sepelasepela ka go le letshadi, kgetha Dinotlelo tša API .

   1. Ka lepokising la Khopiša ka Pela, kgetha Hlakanya gape, gomme o kopiše diphetogo tša tikologo.
   2. Di kgomaretše ka gare ga faele ya .env ka gare ga khoutu ya gago.

2. Ka go sepelasepela ka go le letshadi, kgetha “ Dithempleite tša JWT. ” .

   1. Bopa thempleite (ke reile ya ka leina la “ neon-remix ”).
   2. Khopiša URL ya Ntlha ya Mafelelo ya JWKS gore o e šomiše ka morago.

Neon

1. Tsena ka gare ga khonsule ya Neon gomme o hlame porojeke ye mpsha.

2. Go tšwa go thepo ya go sepelasepela ya le letshadi, kgetha Dumelela .

3. Hlama moabi yo mofsa gomme o kgomarele URL ya Clerk JWKS yeo o e kopišitšego go tšwa go Clerk pejana.

   
   

   

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 login_history 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 login_history e tla šomišwa go boloka dinako tša go tsena tša modiriši yo mongwe le yo mongwe.

Hlokomela gore login_history 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.

 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 .env ya gago

Ge megato ye ya go hloma e phethilwe, .env 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:

 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 GitHub , eupša dikarolo tša bohlokwa kudu di hlaotšwe mo. Motheo wa tirišo o ka go 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; } }

LoaderFunction ka faeleng ya _index.tsx 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.

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 /sign-in . 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:

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 userId le authToken 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 userId go tlatša mothalo wo mongwe le wo mongwe ka gare ga polokelo ya gago ya tshedimošo.

Gore o kgone go dira diphetogo go polokelo ya tshedimošo ye e šireleditšwego ka RLS, o swanetše go goga DATABASE_AUTHENTCATED_URL go tšwa go diphetogo tša tikologo.

Logic ya motheo ya go phethagatša tšhireletšo ya RLS e ka gare ga LoaderFunction . Mohlala wa SQL Neon o thongwa ka go šomiša diphetogo tša tikologo le leswao la auth. Mošomo wa loginResponse 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 last10LoginsResponse o botšiša DB bakeng sa dilogin tše 10 tša moragorago.

Mafelelong, last10LoginsResponse e bušetšwa go tšwa mošomong wa loader.

Mošomo wa Index() ka faeleng ya _index.tsx o tšweletša peakanyo ya letlakala bjalo ka ge go bontšhitšwe ka go seripa se se lego ka mo tlase:

 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 LoaderFunction , 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:

Mohlaleng wo, user_id e bontšhwa gape go laetša gabotse gore ke fela datha ya go tsena ya modiriši yo a tsenego yeo e bonagalago.

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 Tšhireletšo ya Llaga ya Mothaladi go tirišo ya gago lehono ka Neon.