Wasp•2mo ago

Is there a way to put integrate blog and docs with the login authentication?

I was working on a closed source platform for which the documentation is supposed to be private. The astro based documentation and blog are effect but how can I integrate them directly in app so that one can access them only after logging in.

11 Replies

kapa.ai•2mo ago

Hi @ComputO. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, there isn't specific information about integrating a blog and documentation system directly with Wasp's authentication. However, I can provide some general guidance on how you might approach this using Wasp's authentication features: 1. Page Protection: Wasp allows you to protect pages by setting the authRequired property to true. As mentioned in the Auth Overview documentation, you can use this to ensure only authenticated users can access certain pages:

page DocsPage {
  component: import Docs from "@src/pages/Docs",
  authRequired: true
}

page BlogPage {
  component: import Blog from "@src/pages/Blog",
  authRequired: true
}

page DocsPage {
  component: import Docs from "@src/pages/Docs",
  authRequired: true
}

page BlogPage {
  component: import Blog from "@src/pages/Blog",
  authRequired: true
}

2. Redirect Unauthenticated Users: When you set up authentication in your Wasp app, you can specify where unauthenticated users should be redirected using the onAuthFailedRedirectTo field, as mentioned in the Auth API Reference. 3. Server-side Protection: For any API routes or operations that serve your documentation or blog content, you can use the context.user object to check if a user is authenticated and deny access if they're not. The Auth Overview documentation provides an example of how to do this:

import { HttpError } from 'wasp/server'

export const getDocContent = async (args, context) => {
  if (!context.user) {
    throw new HttpError(403)
  }
  // Fetch and return doc content
}

import { HttpError } from 'wasp/server'

export const getDocContent = async (args, context) => {
  if (!context.user) {
    throw new HttpError(403)
  }
  // Fetch and return doc content
}

To fully integrate your Astro-based documentation and blog with Wasp, you might need to: 1. Port your Astro content to React components that can be used within Wasp. 2. Set up the appropriate pages and routes in your Wasp app. 3. Implement the necessary queries or actions to fetch and display your content. 4. Ensure all these are protected using the authentication methods described above. However, it's important to note that the provided knowledge sources don't contain specific information about integrating external documentation systems or blogs with Wasp. You might need to consult additional resources or the Wasp community for more detailed guidance on this specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @ComputO, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Filip•2mo ago

Hey @ComputO. Still need help with this?

ComputOOP•2mo ago

Yes ... I was able to deploy the blog and docs but could not integrate it with login

MEE6•2mo ago

Wohooo @ComputO, you just became a Waspeteer level 1!

Filip•2mo ago

In that case, I think I'll leave this to @Vinny (@Wasp), the creator of Open saas.\

Vinny (@Wasp)•2mo ago

This won't be possible unless you build a blog within the Wasp app itself, or you'd have to integrate a separate auth system for the blog only. For implementing a blog within the Wasp app, the answer Kapa gave above is a good start. I know that @NEROX also has implemented his own blog within his Wasp/Open SaaS app. Maybe he has some extra tips 🙂

ComputOOP•2mo ago

Building components again in wasp app seems a bit of a stretch.. if you know anyone who has directly integrated astro in wasp app that would help a lot.. or else currently we were thinking of adding auth to astro with same users & auth tables that we have through wasp

NEROX•2mo ago

Maybe you can check: https://github.com/NeroxTGC/WaspTemplate

GitHub

GitHub - NeroxTGC/WaspTemplate: Simple Blog made with Wasp

Simple Blog made with Wasp. Contribute to NeroxTGC/WaspTemplate development by creating an account on GitHub.

ComputOOP•2mo ago

first of all cool repo .. and cool demos .. but all my docs are already in Md .. so was searching for a direct lift and shift

NEROX•2mo ago

hmm, maybe I will make a Blog Template with Markdown. Any notes? Suggestions? Features? Etc?

A³Learn•2mo ago

Here's a few snippets you'll need

import ReactMarkdown from 'react-markdown'
import { getMarkdownContent } from 'wasp/client/operations'

export default function RefundPage() {
  const { data: refundContent, isLoading, error } = useQuery(getMarkdownContent, { 
    filename: 'refundpolicy.md' 
  })

import ReactMarkdown from 'react-markdown'
import { getMarkdownContent } from 'wasp/client/operations'

export default function RefundPage() {
  const { data: refundContent, isLoading, error } = useQuery(getMarkdownContent, { 
    filename: 'refundpolicy.md' 
  })

export const getBlogPost: GetBlogPost<{ slug: string }, BlogPost> = async ({ slug }, context) => {
  try {
    // Try multiple possible paths
    const possiblePaths = [
      join(process.cwd(), 'src', 'blog', 'posts'),                    // Dev environment
      join(process.cwd().replace(/\.wasp\/out\/server$/, ''), 'src', 'blog', 'posts'),  // Dev alternative
      join('/app', '.wasp', 'out', 'sdk', 'wasp', 'ext-src', 'blog', 'posts'),         // Production
      join('/app', 'src', 'blog', 'posts'),                          // Production alternative
    ];

    let postsDirectory;
    for (const path of possiblePaths) {
      try {
        console.log('Trying path:', path);
        await readdir(path);
        postsDirectory = path;
        console.log('Successfully found posts directory at:', path);
        break;
      } catch (error) {
        console.log('Failed to access path:', path, error.message);
        continue;
      }
    }

    if (!postsDirectory) {
      throw new Error('Could not find posts directory');
    }

    const fullPath = join(postsDirectory, `${slug}.md`);

    const fileContents = await readFile(fullPath, 'utf8');
    const { data: frontmatter, content } = matter(fileContents);

export const getBlogPost: GetBlogPost<{ slug: string }, BlogPost> = async ({ slug }, context) => {
  try {
    // Try multiple possible paths
    const possiblePaths = [
      join(process.cwd(), 'src', 'blog', 'posts'),                    // Dev environment
      join(process.cwd().replace(/\.wasp\/out\/server$/, ''), 'src', 'blog', 'posts'),  // Dev alternative
      join('/app', '.wasp', 'out', 'sdk', 'wasp', 'ext-src', 'blog', 'posts'),         // Production
      join('/app', 'src', 'blog', 'posts'),                          // Production alternative
    ];

    let postsDirectory;
    for (const path of possiblePaths) {
      try {
        console.log('Trying path:', path);
        await readdir(path);
        postsDirectory = path;
        console.log('Successfully found posts directory at:', path);
        break;
      } catch (error) {
        console.log('Failed to access path:', path, error.message);
        continue;
      }
    }

    if (!postsDirectory) {
      throw new Error('Could not find posts directory');
    }

    const fullPath = join(postsDirectory, `${slug}.md`);

    const fileContents = await readFile(fullPath, 'utf8');
    const { data: frontmatter, content } = matter(fileContents);

Gaming

Programming

Is there a way to put integrate blog and docs with the login authentication?

Did you find this page helpful?