Missing Author Information

I am having trouble displaying the author name and avatar on my single.php page. The posts load fine and all the correct information is available. However the avatar and name is no where to be found. I’m not sure what I’m doing wrong. Help is appreciated

<div class="row">
    <div>
        <h1 class="primary-color"> <?php the_title(); ?></h1>
        <span class="avatar">
            <?php echo get_avatar( $id_or_email, 30, $default, $alt, $args ); ?>
        </span>
        by <span class="primary-color"><?php echo get_the_author_meta('display_name', $author_id); ?></span> <span class="pipe">|</span> <span class="date"><?php echo get_the_date(); ?></span>
    </div>
</div><!-- END ROW -->

<div class="row">
    <?php
        while ( have_posts() ) : the_post();
    ?>

    <?php the_content(); ?>

    <?php endwhile; ?>
</div>

To display the author’s avatar within The Loop use get_avatar() like that:

<?php print get_avatar(get_the_author_meta('ID'), '30', '', '', ['class' => 'foo-bar']); ?>

To display the author’s display name within The Loop use the_author():

<?php the_author(); ?>

So put everything inside The Loop and then:

<?php
while (have_posts()) : the_post();
  ?>

  <div class="row">
    <div>
      <h1 class="primary-color">
        <?php the_title(); ?>
      </h1>
      <span class="avatar">
        <?php print get_avatar(get_the_author_meta('ID'), '30', '', '', ['class' => 'foo-bar']); ?>
      </span>
      by <span class="primary-color"><?php the_author(); ?></span>
      <span class="pipe">|</span>
      <span class="date"><?php echo get_the_date(); ?></span>
    </div>
  </div>

  <div class="row">
    <?php the_content(); ?>
  </div>

<?php endwhile; ?>