diff --git a/apps/docs/generator/helpers.ts b/apps/docs/generator/helpers.ts index 6bb5653e808..e7796c9101f 100644 --- a/apps/docs/generator/helpers.ts +++ b/apps/docs/generator/helpers.ts @@ -2,6 +2,7 @@ import * as _ from 'lodash' import * as fs from 'fs' export const slugify = (text: string) => { + if (!text) return '' return text .toString() .toLowerCase() diff --git a/apps/docs/lib/refGenerator/helpers.ts b/apps/docs/lib/refGenerator/helpers.ts index 83864fa5540..3325d45786f 100644 --- a/apps/docs/lib/refGenerator/helpers.ts +++ b/apps/docs/lib/refGenerator/helpers.ts @@ -267,6 +267,7 @@ export function gen_v3(spec: OpenAPIV3.Document, dest: string, { apiUrl }: { api } const slugify = (text: string) => { + if (!text) return '' return text .toString() .toLowerCase() diff --git a/apps/docs/pages/guides/auth/server-side-rendering.mdx b/apps/docs/pages/guides/auth/server-side-rendering.mdx index 87235781711..7b7edb00924 100644 --- a/apps/docs/pages/guides/auth/server-side-rendering.mdx +++ b/apps/docs/pages/guides/auth/server-side-rendering.mdx @@ -1,4 +1,5 @@ import Layout from '~/layouts/DefaultGuideLayout' +import { Accordion } from 'ui' export const meta = { id: 'server-side-rendering', @@ -55,8 +56,25 @@ like `*` and `**` to allow redirects to different forms of URLs. -These redirect URLs have the following structure: +Supabase Auth supports two authentication flows: **Implicit** and **PKCE**. The **PKCE** flow is generally preferred when on the server. +It introduces a few additional steps which guard a against replay and URL capture attacks. Unlike the implicit flow, it also allows users to access the +`access_token` and `refresh_token` on the server. + +
+ Implicit} + id={`ssr-implicit-flow`} + > + +When using the implicit flow, a redirect URL will be returned with the following structure: ``` https://yourapp.com/...#access_token=<...>&refresh_token=<...>&... ``` @@ -77,9 +95,76 @@ your direct control (such as on GitHub Pages or other freemium hosting providers), we want to prevent hosting services from getting access to your user's authorization credentials by default. Even if the server is under your direct control, `GET` requests and their full URLs are often logged. This -approach also avoids leaking credentials in request or access logs. - +approach also avoids leaking credentials in request or access logs. If you wish to obtain the +`access_token` and `refresh_token` on a server, please consider using the PKCE flow. + +
+
+ PKCE} + id={`ssr-pkce-flow`} + > + When using the PKCE flow, a redirect URL will be returned with the following structure: + ``` + https://yourapp.com/...?code=<...> + ``` + The `code` parameter is commonly known as the Auth Code and can be exchanged for an access token by calling `exchangeCodeForSession(code)`. + + For security purposes, the code has a validity of 5 minutes and can only be exchanged for an access token once. You + will need to restart the authentication flow from scratch if you wish to obtain a new access token. + + + As the flow is run server side, `localStorage` may not be available. You may configure the client library to use a custom storage adapter an alternate backing storage such as cookies + by setting the `storage` option to an object with the following methods: + ```js + const customStorageAdapter: SupportedStorage = { + getItem: (key) => { + if (!supportsLocalStorage()) { + // Configure alternate storage + return null + } + return globalThis.localStorage.getItem(key) + }, + setItem: (key, value) => { + if (!supportsLocalStorage()) { + // Configure alternate storage here + return + } + globalThis.localStorage.setItem(key, value) + }, + removeItem: (key) => { + if (!supportsLocalStorage()) { + // Configure alternate storage here + return + } + globalThis.localStorage.removeItem(key) + }, + } + ``` + You may also configure the client library to automatically exchange it for a session after a successful redirect. This can be done by setting the `detectSessionInUrl` option to `true`. + + Putting it all together, your client library initialization may look like this: + ```js + const supabase = createClient( + 'https://xyzcompany.supabase.co', + 'public-anon-key', + options: { + ... + auth: { + ... + detectSessionInUrl: true, + flowType: 'pkce', + storage: customStorageAdapter, + } + ... + } + ) + ``` + You can read more about the PKCE flow [here](https://oauth.net/2/pkce/) + +
+ ## Bringing it together @@ -220,3 +305,4 @@ cache keys every hour or less. export const Page = ({ children }) => export default Page + diff --git a/apps/docs/pages/guides/functions/cicd-workflow.mdx b/apps/docs/pages/guides/functions/cicd-workflow.mdx index 01c30d69182..a1836c20b53 100644 --- a/apps/docs/pages/guides/functions/cicd-workflow.mdx +++ b/apps/docs/pages/guides/functions/cicd-workflow.mdx @@ -2,7 +2,7 @@ import Layout from '~/layouts/DefaultGuideLayout' export const meta = { id: 'cicd-workflow', - title: 'Deploying with Git', + title: 'Deploying with GitHub Actions', description: 'How to deploy Supabase Edge Functions with a CI / CD pipeline.', video: 'https://www.youtube.com/v/6OMVWiiycLs', } diff --git a/apps/www/_blog/2023-04-04-infinite-scroll-with-nextjs-framer-motion.mdx b/apps/www/_blog/2023-04-04-infinite-scroll-with-nextjs-framer-motion.mdx index 406cc058b93..a670abe9610 100644 --- a/apps/www/_blog/2023-04-04-infinite-scroll-with-nextjs-framer-motion.mdx +++ b/apps/www/_blog/2023-04-04-infinite-scroll-with-nextjs-framer-motion.mdx @@ -4,6 +4,7 @@ description: Lazy load and paginate data on scroll with Next.js and a sprinkle o author: fsansalvadore image: infinite-scroll-thumb.jpg thumb: infinite-scroll-thumb.jpg +launchweek: 7 tags: - tutorial - launch-week diff --git a/apps/www/_blog/2023-04-07-designing-with-ai-midjourney.mdx b/apps/www/_blog/2023-04-07-designing-with-ai-midjourney.mdx index 44ee9690c48..2a82e547dce 100644 --- a/apps/www/_blog/2023-04-07-designing-with-ai-midjourney.mdx +++ b/apps/www/_blog/2023-04-07-designing-with-ai-midjourney.mdx @@ -4,13 +4,14 @@ description: Using MidJourney to generative artwork and serving ticket images wi author: marijana,thor_schaeff image: launch-week-7/designing-with-ai-midjourney/header.png thumb: launch-week-7/designing-with-ai-midjourney/header.png +launchweek: 7 tags: - launch-week date: '2023-04-07' toc_depth: 6 --- -While Supabase Launch Weeks are online, we love the idea of bringing everyone together as if it was an in-person conference. Our ticketing system is one of the ways that we emulate this. +While Supabase Launch Weeks happen online, we love the idea of bringing everyone together as if it was an in-person conference. Our ticketing system is one of the ways that we emulate this. We have been issuing tickets since Launch Week 5, and they were so successful that we have done them ever since. It’s become a challenge to outdo the previous effort with something better every time. @@ -264,13 +265,13 @@ Interested to know how this fits within your Next.js application? Find the code ## Displaying the images -We have some images, so how can we now display them somewhere? @Francesco Sansalvadore saw one of our team members trying to “swipe” on the tickets slider component on the [launch week page](https://supabase.com/launch-week/tickets) and he thought, why not feature all the fantastic people who generated tickets on a single page? +We have some images, so how can we now display them somewhere? [@Francesco Sansalvadore](https://twitter.com/frnk_snslvdr) saw one of our team members trying to “swipe” on the tickets slider component on the [launch week page](https://supabase.com/launch-week/tickets) and he thought, why not feature all the fantastic people who generated tickets on a single page? We built a [ticket wall](https://supabase.com/launch-week/tickets) that you can scroll endlessly. We approached it with an infinite scroll technique, lazy-loading a few tickets at a time. ![launch week 7 ticket wall](/images/blog/launch-week-7/designing-with-ai-midjourney/launch-week-7-ticket-wall.png) -If you’re interested in a more detailed step-by-step guide to reproduce this effect, take a look at the [Infinite scroll with NextJs, Supabase and Framer Motion](/blog/infinite-scroll-with-nextjs-framer-motion) blog post. +If you’re interested in a more detailed step-by-step guide to reproduce this effect, take a look at the [Infinite scroll with Next.js, Framer Motion, and Supabase](/blog/infinite-scroll-with-nextjs-framer-motion) blog post. ## Get your ticket @@ -278,7 +279,7 @@ You too can also be Charlie Bucket and have a Golden Ticket. There is no chocola Up for grabs are: -- Supabase mechanical keyboard. In fact, we have 3 of them to give away!_ Guaranteed to annoy your co-workers/cat/partner/ yourself. +- Supabase mechanical keyboard. In fact, we have 3 of them to give away!\_ Guaranteed to annoy your co-workers/cat/partner/ yourself. - Socks: _Perfect for your `